SnackBar Widget

In this tutorial, you will learn how to use the SnackBar.
Before Start
When we start our tutorial, we should create a page to show our SnackBar. I will use a button to click, if you click it, it will show you a snack bar.
http://www.w3.org/2000/svg
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
​
class SnackPage extends StatefulWidget {
  @override
  _SnackState createState() => _SnackState();
}
​
class _SnackState extends State<SnackPage> {
  GlobalKey<ScaffoldState> _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _key,
        appBar: AppBar(
          title: Text(PageName.SNACK_BAR),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
             // our code.
            },
            child: Text("Show the snack bar"),
            color: RED,
          ),
        ));
  }
}
It will show you like this. If we click the button, I want that the SnackBar will show on the bottom of the screen. 
Simple Use
I will give you a simple to show the SnackBar. First, we should create a SnackBar.
http://www.w3.org/2000/svg
  Widget _snackSample() => SnackBar(
        content: Text(
          "You have a message!",
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        backgroundColor: BLUE_LIGHT,
      );
Then, we use them in the onPressed function.
http://www.w3.org/2000/svg
final bar = _snackSample();
_key.currentState.showSnackBar(bar);
When you click the button, it will show you as follow.
Constructor
When we start to learn the widgets, we should have a custom that we should look at its constructor first.
http://www.w3.org/2000/svg
SnackBar({
    Key key,
    @required this.content,
    this.backgroundColor,
    this.action,
    this.duration = _kSnackBarDisplayDuration,
    this.animation,
  })
The content is a widget, the backgroundColor is the Color, the duration is a Duration, the animation is an Animation. So let's talk about them one by one.
action
This parameter is very special because we do not see it before. So we should look at its definition.
http://www.w3.org/2000/svg
  final SnackBarAction action;
This class is also a widget, let's look at its constructor.
http://www.w3.org/2000/svg
SnackBarAction({
    Key key,
    this.textColor,
    this.disabledTextColor,
    @required this.label,
    @required this.onPressed,
  })
The label is the String, the onPressed is a function. The other two  are the Color. Let's look at an example.
http://www.w3.org/2000/svg
  Widget _snackAction() => SnackBar(
        content: Text(
          "Test the action in the SnackBar.",
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        action: SnackBarAction(
          label: "I Know!",
          textColor: Colors.white,
          disabledTextColor: TEXT_BLACK_LIGHT,
          onPressed: () {
            print("I know you are testing the action in the SnackBar!");
          },
        ),
        backgroundColor: BLUE_LIGHT,
      );
You can use it in the button.
http://www.w3.org/2000/svg
final bar = _snackAction();
_key.currentState.showSnackBar(bar);
It will show like this.
When you click the I Know!, the console will print some strings.
http://www.w3.org/2000/svg
I/flutter ( 4202): I know you are testing the action in the SnackBar!
duration
When you want to change the show time of the SnackBar, you should use the parameter.duration. Let's see an example.
http://www.w3.org/2000/svg
 Widget _snackDuration() => SnackBar(
        content: Text(
          "You have a message!",
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        backgroundColor: BLUE_LIGHT,
        duration: Duration(milliseconds: 100),
      );
When you click the button , you can see that the show time become short than before.The effect is below.
Conclusion
I have talked about the parameter action,duration. I just use the content and backgroundColor,because they are very easy and we have used its type before, so I don't talk about its detail. Also, I don't plan to talk about the animation, I will talk about them in the Animation Widget.
Thanks for your reading!
The end.
Whole code in GitHub,star to support.
Before Start

Simple Use

Constructor

action

duration

Conclusion

Whole code in GitHub,star to support.

0 Comments

Recent Comments
