Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

Basic usage

Apps sometimes need to pop up messages to inform users of “network connection failure” or “download success”, just like Android Toast. The SnackBar component is used in Flutter as follows:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Lao Meng, a programmer with attitude')));Copy the code

Note that instead of using the SnackBar component directly in the build method, we call the scaffold.of (context).showsnackbar method. The message pops up at the bottom and is displayed for a period of time, 4 seconds by default, and then pops up.

Scaffold.of(context).showSnackBar(SnackBar(
      duration: Duration(seconds: 1),
    ));
Copy the code

The display time is 1 second, and the Content property does not have to be text, but can be other components, such as displaying an icon and text:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('Download successful')],
      ),
      duration: Duration(seconds: 1),
    ));
Copy the code

The effect is as follows:

Set its shape with the shape property:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('Download successful')],
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(50))
      ),
      duration: Duration(seconds: 1),
    ));
Copy the code

The effect is as follows:

SnackBar has two pop-up forms, the default is fixed, directly at the bottom of the pop-up, the other is floating, floating at the bottom, the usage is as follows:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('Download successful')],
      ),
      behavior: SnackBarBehavior.floating,
    ));
Copy the code

Floating effect:

We can also add behavior components to SnackBar, such as adding a “know” button, click “know”, the message is immediately hidden, the usage is as follows:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('Download successful')],
      ),
      action: SnackBarAction(
        label: 'Got it.',
        onPressed: (){},
      ),
    ));
Copy the code

Effect:

Instant multiple pop-up delay issues

When the SnackBar method is called several times in a short period of time, the SnackBar messages will be queued up one by one, as shown in the following code:

RaisedButton(
          child: Text(
            'Click on me and the SnackBar pops up.',
          ),
          onPressed: () {

            List.generate(10, (index){
              Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('I am the message: $index'))); }); },)Copy the code

By default, each SnackBar is displayed for 4 seconds. If there are 10, the message will keep playing for 40 seconds, which is obviously not a friendly experience. What we want is that if there is a new message, the old message will disappear immediately, and the new message will be displayed.

Scaffold.of(context).removeCurrentSnackBar(); Scaffold.of(context).showSnackBar(...) ;Copy the code

Read more:

  • Overview of the Flutter series
  • Expand and Flexible of Flutter Widgets
  • Flutter AnimatedList Widgets
  • Flutter SliverAppBar Widgets
If this article is helpful to you, PLEASE give me a “like” and follow my official account. Thank you very much.