Filter by Widgets


SnackBar Widget

This Tutorials is posted by niebin312 at 04-03-2019 05:18:02



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.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class SnackPage extends StatefulWidget {
_SnackState createState() => _SnackState();
}
class _SnackState extends State<SnackPage> {
GlobalKey<ScaffoldState> _key = GlobalKey();
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.

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.

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.

SnackBar({
Key key,
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.

final SnackBarAction action;

This class is also a widget, let's look at its constructor.

SnackBarAction({
Key key,
this.textColor,
this.disabledTextColor,
this.label,
this.onPressed,
})

The label is the String, the onPressed is a function. The other two are the Color. Let's look at an example.

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.

final bar = _snackAction();
_key.currentState.showSnackBar(bar);

It will show like this.

When you click the I Know!, the console will print some strings.

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.

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.


0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.