Mags.ai is a multidisciplinary learning community focused on bettering ourselves through sharing knowledge with each other. Our interests include but are not limited to Science, Technology, Philosophy, and Politics. Mags.ai is committed to exploring these subjects in-depth and helping our community members become more informed and engaged in the world around them. Through our platform, members can connect with experts, engage in lively discussions, and access a wealth of curated resources, from articles and videos to podcasts and book recommendations.

Today, we're excited to announce our new book club that we believe will help us further our mission of learning and discovery. The book club will be open to all members of the Mags.ai community and will provide an opportunity for participants to delve deeper into these subjects, engage in meaningful discussions, and connect with fellow learners from around the world. We hope that this initiative will foster a sense of curiosity, collaboration, and intellectual growth among our community members, and we look forward to sharing our reading journey with you.

Our first book selection will be "It's Ok to Be Angry About Capitalism" by Bernie Sanders. This book is an insightful and passionate exploration of the problems inherent in our current economic system, and how we can work to build a fairer and more just society.

To participate in the discussion, become a member of our Discord community

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

In "It's Ok to Be Angry About Capitalism", Senator Sanders draws on his decades of experience in public service and activism to make the case for a more equitable and democratic economy. He argues that the concentration of wealth and power in the hands of a few has led to widespread inequality, environmental degradation, and political dysfunction, and that we need to fundamentally rethink our approach to economics if we want to create a better future for everyone.

Throughout the book, Sanders offers a range of policy proposals and practical strategies for achieving these goals, from raising the minimum wage and strengthening workers' rights to investing in green infrastructure and implementing a fairer tax system. He also draws on examples from other countries, such as Denmark and Germany, to show how alternative models of capitalism can work in practice.

"It's Ok to Be Angry About Capitalism" is a timely and important book that speaks to many of the pressing issues of our time. I hope you'll join us in reading and discussing it in the coming weeks.

Happy reading!

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Canva is one of the most popular online design and publishing tools.

Over 75 million people in more than 190 countries use Canva every month and 3.5 billion designs were created with Canva in 2021.

Level up your Canva skills with these 10 tips and tricks you may not know  👇

1. Create a Website

Create basic websites just using Canva 🤯

1. Create a new design and select website
2. Choose any template
3. Click Publish as Website
4. Choose free or paid domain

2. Find similar elements

You can find more designs similar to ones you like by searching.

1. Select your element
2. Click the information icon
3. Search by tags or select "See more like this"

3. Copy a style

You can easily copy the styles from one element to another

1. Select an element
2. Click paint roller icon
3. Select the element you want the style to be copied to

4. Lock elements

Prevent mistakes by locking finalized elements

1. Select all the elements to lock
2. Click the lock icon on the toolbar

5. Search photos by color

You can search for photos based on color to match your design

1. Click photos on the sidebar
2. Click the search filter controls
3. Select your desired color

Continue Your Learning Journey

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

6. Generate product mockups

Quickly turn your assets into high quality mockups!

1. Select an element
2. Click edit image
3. Choose an option under Smartmockups

7. Display rulers and guides

Use rulers and guides to make aligning your elements easier

1. Click File ➜ "Show rulers and guides"
2. Click and drag as many guidelines as needed rom the edges of the editor

8. Create clickable links

Add hyperlinks to a design that work even when exported as a PDF!

1. Select an element
2. Click on the hyperlink icon
3. Enter the URL to link to

9. Generate QR codes

You can create a QR code that promotes your website or app

1. Click "More" on the sidebar
2. Select QR Code
3. Enter a URL

10. Plan your content

Schedule content on your social media platforms (Pro only)

1. Select "Content Planner" from the homepage
2. Hover over a data and click the + icon
3. Select a design and click Schedule

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

Content Credit

Thank you to Syed Huq for sharing their knowledge on Twitter!

On mobile devices, the status bar appears along the upper edge of the screen and displays useful information about the device’s current state, like the time, cellular carrier, and battery level. Setting the color of the status bar can better align your application with your brand. With Flutter, there are several ways we can color the status bar.

The Status Bar Color Hierarchy

We'll cover 3 different ways to color the status bar. In increasing order of specificity they are:

• Scaffold backgroundColor
• AppBar backgroundColor
• AppBar systemOverlayStyle (Android only!)

Scaffold Background Color

By setting a background color of a Scaffold without an AppBar the status bar will inherit from the specified color.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(
          Icons.add,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

AppBar Background Color

By setting a background color of an AppBar the status bar will inherit from the specified color, regardless of if the Scaffold has a background color.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(
          Icons.add,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

AppBar Background Color + System Overlay Style

On Android, the status bar actually takes on a slightly darker color that what's specified by the Scaffold and AppBar. This is by design, but if you'd like to specify the exact color value you can set it via the systemOverlayStyle property on an AppBar.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        backgroundColor: Colors.purple,
        elevation: 0,
        toolbarHeight: 0,
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.purple,
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(
          Icons.add,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

Flutter makes it very easy to create a custom theme for your application. This article will quickly outline the various ways of using colors in Flutter.

The Colors Class

The Colors class provides quick access to colors that match the Material Design color palette.

Primary Colors

• Primary colors have shades from 100 - 900 in increments of one hundred with a starting shade of 50
• The color without a shade (ex: Colors.pink) is equivalent to the 500 shade

Accent Colors

• Accent colors have shades of 100, 200, 400, and 700
• The color without a shade (ex: Colors.pinkAccent)  is equivalent to the 200 shade

Blacks and Whites

The colors class also provides a series of black and white colors. The numbers included in the name describe their opacity level.

Transparent

The Colors.transparent color represents a fully transparent color.

The Color Class

The Color class (note the lack of a trailing s!) is what we'll use to create our own custom colors.

HEX Colors

We can create a color using HEX values with the Color constructor

static const c = Color(0xFF42A5F5);

• Prefix the value with 0x
• The first 2 digits are the opacity, a hex code from 0 to FF
• The last 6 digits is the HEX color code

ARGB Colors

We can create a color using ARGB values with the Color.fromARGB constructor

static const c = Color.fromARGB(255, 66, 165, 245);

• The first value is the alpha value, an int from 0 to 255
• The last 3 values are the RGB colors, an int from 0 to 255
• Using HEX values is supported

RGBO Colors

We can create a color using RGBO values with the Color.fromRGBO constructor

static const c = Color.fromRGBO(66, 165, 245, 1.0);

• The first 3 values are the RGB colors, an int from 0 to 255
• The last value is the opacity, a double from 0.0 to 1.0
• Using HEX values is supported for the first 3 values

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

In a previous article we looked at the surprisingly non-trivial way to display a SnackBar from within a Dialog context in Flutter.

The full article gives additional context but  the TLDR was:

• A Scaffold context is required to display a SnackBar
• Dialogs appear outside of Scaffold contexts
• Wrap the Dialog with a Scaffold and handle the gesture to close edge cases

Displaying a Snackbar in a Dialog with Flutter

A Flutter tutorial where we add a Snackbar to a Dialog

MagsAIMags

Flutter 2.0 introduced ScaffoldMessenger as a replacement for displaying SnackBars directly from the Scaffold class. The main use case it seems to be trying to solve is synchronizing a SnackBar across navigation events. You can see this in action if you position two Scaffolds on the same page and dispatch a SnackBar from one of them:

When watching the Flutter Widget of the Week on ScaffoldMessenger I was excited to see that it sits above all Scaffolds in the hierarchy and came built into the MaterialApp widget.

Perhaps this was the solution to the SnackBar in a Dialog problem? To save ourselves some time, unfortunately, it wasn't. 😭

Despite that there are some notable differences that we can take a look at, and our final solution is a bit more streamlined.

Revised Solution

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text("Show Dialog"),
          onPressed: () {
            showDialog(
              useSafeArea: false,
              context: context,
              builder: (context) => Stack(
                children: [
                  const IgnorePointer(
                    child: Scaffold(
                      backgroundColor: Colors.transparent,
                    ),
                  ),
                  SafeArea(
                    child: AlertDialog(
                      title: const Text("SnackBar Dialog"),
                      content: ElevatedButton(
                        child: const Text("Show SnackBar"),
                        onPressed: () {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(
                              content: Text("Hello, SnackBar!"),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

The full code is available on my GitHub. Major changes from the previous solution are broken down below

GitHub - MagsMagnoli/flutter-scaffold-messenger: A demonstration of displaying snackbars inside of a modal using ScaffoldMessenger

A demonstration of displaying snackbars inside of a modal using ScaffoldMessenger - GitHub - MagsMagnoli/flutter-scaffold-messenger: A demonstration of displaying snackbars inside of a modal using ...

GitHubMagsMagnoli

No More Gesture Detectors

By wrapping the Dialog with a Scaffold we needed to introduce GestureDetectors to handle touch events on the Dialog backdrop. With ScaffoldMessenger we no longer need the Scaffold to be a direct parent of the AlertDialog and using a Stack widget allows us to place the  outside of the Dialog widget tree. This allows us to leverage the IgnorePointer widget instead of GestureDetector.

No More Errors

In the previous article, calling Scaffold.of in the Dialog threw an error and required us to wrap it with a Scaffold. With ScaffoldMessenger.of we no longer throw an error but now display a SnackBar in the Scaffold underneath it.

Caveat: SafeArea

The showDialog function wraps its content with a SafeArea widget by default. This causes SnackBars to be displayed above the bottom edge of the device. To fix this issue disable the useSafeArea flag on the showDialog function then wrap the AlertDialog with a SafeArea manually.

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

On October 6th, 2021 a massive leak of Twitch.tv data was revealed which among other proprietary information exposed sensitive user data. As a result all users should take necessary precautions to secure their accounts.

In this article we will walk through:

• How to change your password
• How to enable two factor authentication

Change Your Password

In order to change your password you'll need to have your current password as well as a desired new password handy. We recommend using a password manager such as bitwarden to generate and store strong passwords securely. If you prefer to only create a password then use this strong password generator

• Visit the security and privacy tab of the Twitch settings page
• Click 'change password' under the security heading

• Fill out the form with your old and new passwords then click 'change password'

Enable Two-Factor Authentication (2FA)

Since passwords can be brute forced, two-factor authentication adds another layer of security to your password protected account. When enabled, a short-lived one-time code generated from a third party must be provided along with your password. We recommend using Authy which is available to download on most operating systems.

• Visit the security and privacy tab of the Twitch settings page
• Click 'set up two-factor authentication' under the security heading

• Click 'enable 2fa' in the dialog

• Enter your phone number then click 'continue'

• Enter the 7 digit code sent to your phone number via SMS

If you've set up Authy previously then you should be all set, otherwise you may be prompted with a QR code to scan

Further Reading

The more we rely on the internet to power our daily lives the higher the risk to our personal well-being data breaches will become. It's important to become familiar with the latest security measures and to employ them whenever possible.

Some things that should be on your radar:

1. Avoid using SMS as your two-factor authenticator
2. Learn about security keys

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

Any unprotected forms on the public internet are susceptible to spam attacks by malicious bots. Solutions such as reCAPTCHA have emerged which mitigate such attacks by presenting suspected bots with a challenge to complete. This tutorial will walk through adding reCAPTCHA to a Svelte application.

Follow along in the repository on GitHub and consider sponsoring my work for more articles ❤️

GitHub - MagsMagnoli/svelte-recaptcha-tutorial: A tutorial for adding recaptcha to a svelte app

A tutorial for adding recaptcha to a svelte app. Contribute to MagsMagnoli/svelte-recaptcha-tutorial development by creating an account on GitHub.

GitHubMagsMagnoli

Setting up reCAPTCHA

Head over to the reCAPTCHA admin console to register your website and generate your site key and secret key.

For this tutorial we're going to be selecting the reCAPTCHA v2 invisible reCAPTCHA badge. reCAPTCHA v3 doesn't present users with a challenge and is best used for complex application flows. The invisible badge fits our simple requirements and is less intrusive than the "I'm not a robot" checkbox.

After completing the setup form you should be presented with your reCAPTCHA keys. The site key will be used on the frontend and the secret key will be used on the backend.

Do not, under any circumstance, commit the secret key to source control or expose it in any way outside of your application environment!

Limiting exposure of the site key is a good habit but since it will be visible on the frontend it isn't as important as securing the secret key.

Application Overview

Now that we have everything we need to setup reCAPTCHA it's time to code!

The demo application we're going to be working with is a simple login form that records how many requests are sent to the server. We can see that each click of the login button sends a request to the backend.

In it's current state this is a prime target for abuse 😓 but we're going to fix that with reCAPTCHA 😁

Implementing reCAPTCHA on the frontend

The first thing we need to do is to add the reCAPTCHA library dependency to our project. We'll do this by incorporating a script tag into the head of our html.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Note that we are using async and defer to prevent parser-blocking JavaScript.

With the library in place let's now add the following div element to our form:

<div
    class="g-recaptcha"
    data-sitekey={RECAPTCHA_SITE_KEY}
    data-callback="handleCaptchaCallback"
    data-expired-callback="resetCaptcha"
    data-error-callback="handleCaptchaError"
    data-size="invisible"
/>

This element employs a number of data attributes which are defined by the the reCAPTCHA library. The full list of available options are described in detail here so for brevity:

• data-sitekey - the site key we obtained earlier
• data-callback - a function to call after a successful reCAPTCHA invocation
• data-expired - a function to call when the reCAPTCHA session has expired
• data-error - a function to call after a failed reCAPTCHA invocation
• data-size - instructs reCAPTCHA we'll be using an invisible widget

Setting the site key can be as simple as hard coding it on the element but since we're here to learn let's introduce it as an environment variable 😄

Environment variables in SvelteKit

SvelteKit supports environment variables natively if we do the following:

• create a .env file at the root of our project
• prefix any environment variable we want to use on the frontend with VITE_
• for typescript support, add the variable to ImportMetaEnv type definition
• access the variable in code

It's important to note that any environment variable we want to use on the server side only, such as the secret key, should NOT be prefixed with VITE_ and need to be loaded with a library such as dotenv.

Also remember to NEVER commit secret environment variables to version control!

First we create a .env file at the root of our project

VITE_RECAPTCHA_SITE_KEY=YOUR_SITE_KEY
RECAPTCHA_SECRET_KEY=YOUR_SECRET_KEY

Then we update our typescript definitions in lib/types.d.ts:

interface ImportMetaEnv {
  VITE_RECAPTCHA_SITE_KEY: string;
}

And finally we can access the variable we set on the div element in index.svelte:

const RECAPTCHA_SITE_KEY = import.meta.env.VITE_RECAPTCHA_SITE_KEY;

ReCAPTCHA callbacks

There are three callback functions we defined on the reCAPTCHA element that we need to implement. Unfortunately it's not as easy as assigning each to a function we define in Svelte. reCAPTCHA looks for these functions on the window object so we need to assign our functions to it first. To enable Typescript support we must add the following type definition to our lib/types.d.ts file:

export declare global {
  interface Window {
    handleCaptchaCallback: (token: string) => Promise<void>;
    resetCaptcha: () => void;
    handleCaptchaError: () => void;
  }
}

Then in the onMount of index.svelte we make the assignments:

onMount(() => {
    window.handleCaptchaCallback = handleCaptchaCallback;
    window.handleCaptchaError = handleCaptchaError;
    window.resetCaptcha = resetCaptcha;
});

We'll implement handleCaptchaError as a function that displays an error string to the user:

const handleCaptchaError = () => {
    error = 'Recaptcha error. Please reload the page';
};

We then add a simple error message inside our form. Be sure to initialize error as an empty string at the top of index.svelte:

{#if error}
    <div>
        <small class="text-yellow-300 font-bold">{error}</small>
    </div>
{/if}

If the user doesn't fill out the form after a period of time their current session will expire. Instead of displaying an error when they submit the form after this point, we'll implement resetCaptcha to automatically refresh our session thereby keeping the form always in a stable state.

const resetCaptcha = () => {
    window.grecaptcha.reset();
};

grecaptcha is a global variable created by the reCAPTCHA library. Install the grecaptcha package on npm to make it available in Typescript.

The final callback to implement is handleCaptchaCallback which is executed after reCAPTCHA completes successfully. It is called with a token that we will need to send to our backend. We'll move the networking logic from our handleSubmit function into this callback and replace it with logic that calls out to reCAPTCHA to process.

const handleCaptchaCallback = async (token: string) => {
    await fetch('/api/login', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username,
            password,
            recaptchaToken: token
        })
    });

    requests += 1;
    
    // reset recaptcha for future requests
    resetCaptcha();
};

const handleSubmit = () => {
    // reset any errors
    error = '';
    
    // tell recaptcha to process a request
    window.grecaptcha.execute();
};

Implementing reCAPTCHA on the backend

We're beginning the final stretch! The server is responsible for verifying the authenticity of the reCAPTCHA token. In order to do that we need to send a POST request to a special endpoint. This request requires our RECAPTCHA_SECRET_KEY environment variable in our .env file. To initialize environment variables on the server, first install dotenv then import it at the top of login.ts. Now our variables will be accessible on the process.env:

import dotenv from 'dotenv';

dotenv.config();

const { RECAPTCHA_SECRET_KEY } = process.env;

Although not required, reCAPTCHA accepts an ip address in the verification request. This value is available to us as the SvelteKit RequestHandler object's host property.

With these three values in hand, we can now make a validation request, then either send the user a failure message or continue forward in our server processing:

const recaptchaVerifyResponse = await fetch(
    `https://www.google.com/recaptcha/api/siteverify?   secret=${RECAPTCHA_SECRET_KEY}&response=${recaptchaToken}&remoteip=${host}`,
    {
        method: 'POST'
    }
);

const json: {
    success: boolean;
} = await recaptchaVerifyResponse.json();

if (!json.success) {
    return {
        status: 400,
        body: 'ReCAPTCHA failed. Please try again'
    };
}

On the frontend we modified our request to process the response and display the error string if present. We also made a user class for convenience in types.d.ts

// index.svelte

const json: User | string = await response.json();

if (response.status === 200) {
    // do something with response
} else {
    // show error message
    error = json as string;
}

// types.d.ts

export type User = {
    id: number;
    username: string;
};

We successfully secured our login form with reCAPTCHA! 🎉  

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

While building out the SvelteKit application for an upcoming tutorial I ran into a peculiar issue with the request body: the content was populated but I was receiving undefined whenever I tried to access its properties.

export const post: RequestHandler<void, { username: string }> = 
async ({ body }) => {
  console.log(body); // {"username":"username", "password":"password"}

  const { username } = body;

  console.log(username); // undefined

...

If we take a look at the frontend code we can start to piece together what's happening:

const onSubmit = async () => {
  await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({
      username,
      password
  })
});

We're using fetch to send a POST request to our server and it requires us to send the body as a string. Despite typing the RequestHandler as an object it's simply passing along that string!

SvelteKit natively supports parsing incoming data as an object as long as the Content-Type: application/json header is added to the request. This is what the updated code looks like:

const onSubmit = async () => {
  await fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username,
      password
  })
});

And now we'll see that our problem is fixed! 🎉

export const post: RequestHandler<void, { username: string }> = 
async ({ body }) => {
  console.log(body); // { username: "username", password: "password"}

  const { username } = body;

  console.log(username); // username

...

Alternate Solution

Another approach would be to explicitly call JSON.parse on the incoming JSON string. Note that I switched to properly typing the RequestHandler body as a string.

export const post: RequestHandler<void, string> = async ({ body }) => {
  console.log(body); // {"username":"username", "password":"password"}

  const { username } = JSON.parse(body);
	
  console.log(username); // username

...

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

Every mobile developer knows the importance of delivering a buttery-smooth, 60fps (and increasingly 120fps) app. Flutter prides itself by being performant by default, but sometimes extra steps are needed to optimize particularly heavy UIs. We’ll take a look at once such example and solve it using the provider package.

The code for this article can be found in the repository below:

GitHub - MagsMagnoli/flutter-provider-optimization

Contribute to MagsMagnoli/flutter-provider-optimization development by creating an account on GitHub.

GitHubMagsMagnoli

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int counter = 0;
  int items = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Text('$counter', style: TextStyle(fontSize: 20)),
                SizedBox(height: 16),
                Wrap(
                  children: Iterable.generate(items)
                      .map((e) => ExpensiveItem(
                            position: e + 1,
                            counter: counter,
                          ))
                      .toList(),
                )
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            counter += 1;
          });
        },
      ),
    );
  }
}

Each item initializes with a loading spinner to simulate being expensive to create. If the number contained in the list item is a factor of the counter then its background will be randomly assigned a color, otherwise it will be white.

Currently when the counter is increased the call to setState causes every list item to be rebuilt. This is unnecessary for items that will have the same state for consecutive values of the counter. In the next section we’ll see how the provider package can help us optimize the rebuilding of these widgets.

Optimizing With Provider

Install The Provider Package

Add the provider package to your pubspec.yaml file

Optimize The List

The first thing we’ll do is extract the list to its own widget with a const constructor so it won’t be rebuilt every time we call setState. This is because in Dart a const variable becomes a compile-time constant.

Now we’ll wrap this new ExpensiveItemList widget with a Provider widget and pass it the counter variable. Doing so makes counter available to widgets further down the tree.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Text('$counter', style: TextStyle(fontSize: 20)),
                SizedBox(height: 16),
                Provider<int>.value(
                    value: counter,
                    builder: (_, __) => const ExpensiveItemList())
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            counter += 1;
          });
        },
      ),
    );
  }
}

class ExpensiveItemList extends StatelessWidget {
  final items = 10;

  const ExpensiveItemList();

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: Iterable.generate(items)
          .map((e) => ExpensiveItem(
                position: e + 1,
              ))
          .toList(),
    );
  }
}

Optimize The List Item

The ExpensiveItem Widget no longer receives the counter variable in its constructor but it still needs access to it in order to know when to rebuild. We’ll use the select extension on BuildContext which provider gives us to only listen to when the item switches from not being a factor to being a factor, and vice versa.

class ExpensiveItem extends StatelessWidget {
  final int position;

  const ExpensiveItem({Key key, this.position}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = (MediaQuery.of(context).size.width / 5) - 32 / 5;
    final isFactor = context
        .select<int, bool>((value) => value > 0 && position % value == 0);
    ...
  }
}

Results

After implementing the changes, re-run the app and you’ll notice that only the items that need to update their UI are being rebuilt!

Conclusion

We successfully used the provider package to optimize our Flutter app. Congratulations! 🥳

Note that, as is usually the case, this isn’t the only way we could have done this. There are other packages and state management solutions we could have used instead. What matters is that we chose a solution that got the job done in a reasonable amount of time.

The key takeaway here is this:

When you have a Widget that is particularly expensive to create, isolate!

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together

Revisiting Displaying a SnackBar in a Dialog with SnackBarMessenger

Using ScaffoldMessenger to display a SnackBar in a Dialog with Flutter

MagsAIMags

According to the material design specification, dialogs “inform users about a task and can contain critical information, require decisions, or involve multiple tasks.” Sometimes we’ll want these tasks to perform network requests, and it’s common practice to display errors in a Snackbar. I wanted to create this behavior in my recently released project for the 6x6 challenge (which you can read more about here) and found that it was slightly non-trivial. In this article I document my journey towards a solution that I’m happy with.

I’ll be demonstrating each step using a simplified example app. Our goal is to display a Snackbar after clicking a button in a dialog. You can follow along by downloading the GitHub repo. Each branch represents a step of the process

GitHub - MagsMagnoli/flutter-dialog-snackbar

Contribute to MagsMagnoli/flutter-dialog-snackbar development by creating an account on GitHub.

GitHubMagsMagnoli

Let’s begin.

A Naive First Attempt

We know that a Snackbar must be shown using a context which contains a scaffold in its parent tree. One may naively attempt to trigger the Snackbar in the onPressed method of the button of the AlertDialog as demonstrated below:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('Show Dialog'),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('SnackBar Dialog'),
                content: RaisedButton(
                  child: Text('Show SnackBar'),
                  onPressed: () {
                    Scaffold.of(context).showSnackBar(
                      SnackBar(content: Text('Hello, SnackBar!')),
                    );
                  },
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Doing so will result in the following error:

We wrapped our showDialog call with a scaffold so what gives? By inspecting the widget hierarchy in DevTools we see our problem quite clearly:

AlertDialogs displayed using showDialog are placed above the MaterialApp and are not contained inside the calling MyHomePage which creates the Scaffold.

Iteration One: Scaffold

We can easily solve the scaffold issue from the previous section by wrapping our AlertDialog in another Scaffold. Be sure to use a Builder widget as the root of the body parameter to make the Scaffold available to the context given to the Scaffold.of which is used to display the Snackbar. We also need to make the background of the Scaffold transparent to persist the translucent effect of the AlertDialog.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('Show Dialog'),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => Scaffold(
                backgroundColor: Colors.transparent,
                body: Builder(
                  builder: (context) => AlertDialog(
                    title: Text('SnackBar Dialog'),
                    content: RaisedButton(
                      child: Text('Show SnackBar'),
                      onPressed: () {
                        Scaffold.of(context).showSnackBar(
                          SnackBar(content: Text('Hello, SnackBar!')),
                        );
                      },
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Pulling up DevTools again after these changes shows that our AlertDialog now has a Scaffold widget as its parent:

And running the app gives us the visuals we were expecting! 🎉

Sadly we are not done yet. 😓

If you interact with the app you’ll notice a problem. We’ve lost the ability to dismiss the dialog by touching outside of the content area. This is because we now have an invisible Scaffold filling the screen.

Iteration Two: Gestures

The dialog can be programmatically dismissed by calling the pop method on the Navigator class. We need to make this available to taps on the scrim area of the dialog and not on clicks onto the dialog itself. This can be achieved by using two GestureDetectors, one which wraps the entire Scaffold and makes the call to dismiss, and another that wraps the AlertDialog and prevents taps from being propagated to the parent one.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('Show Dialog'),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => GestureDetector(
                onTap: () => Navigator.of(context).pop(),
                child: Scaffold(
                  backgroundColor: Colors.transparent,
                  body: Builder(
                    builder: (context) => GestureDetector(
                      onTap: () {},
                      child: AlertDialog(
                        title: Text('SnackBar Dialog'),
                        content: RaisedButton(
                          child: Text('Show SnackBar'),
                          onPressed: () {
                            Scaffold.of(context).showSnackBar(
                              SnackBar(content: Text('Hello, SnackBar!')),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

This is the final widget hierarchy:

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together