Flutter snackbar :
The flutter tutorial on snackbar to make a snackbar visible in both android and ios with same code is discussed in this blog. In earlier tutorials on Flutter we have got a basic idea of what’s flutter, in this blog we will get through snackbar how to start coding them.
If you are new to flutter please visit my earlier tutorials on flutter to understand this tutorial much easily, Let’s get ahead learning flutter.
Introduction:
A snack bar is a widget which is used to show/display a piece of message. To get it much easier in android we use Toast and in iOS we have alerts, to serve the same purpose these snack bars are introduced as a part of material design.
As you may have observed a toast earlier in android it doesn’t have any action, its just used to display a message.But this snack bar it also contains a action button.
Flutter tutorial on snackbar
Let’s Start Coding
Create a dart file as you create java file previously in android.
import the flutter package
import 'package:flutter/material.dart';
then start with void main() (as usual) declaration
void main() => runApp(MyApp());
then create a class
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return null; } }
Here we have to return MaterialApp so as to add features to our app. This MaterialApp contains widgets we mostly use in our apps.
return MaterialApp()
Now add a title and structure which is created using Scaffold, it contains appBar, bottomsheets, menu drawers and so on..
title: "Welcome", home: Scaffold( appBar: AppBar( title: Text(Title), ), ),
Now here comes the our flutter snackbar implementation.
Create a class for snack bar which will help us to display a snack bar also make a action on it.
class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) { return null; } }
Now we need to add a button to display a flutter snackbar
Center( child: RaisedButton( onPressed: () { }, ),
add a title to button
child: Text('SnackBar'),
And add a Snack-bar on button click
final snackBar = SnackBar( content: Text('I am snackbar!'), );
As we discussed earlier we need to perform a action on Snack-bar, we will hide it
action: SnackBarAction( label: 'Hide', onPressed: () {}, ),
And finally most important step a crucial one too… don’t forget to Show Snack bar
Scaffold.of(context).showSnackBar(snackBar);
Snack Bar:
class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: RaisedButton( onPressed: () { final snackBar = SnackBar( content: Text('I am snackbar!'), action: SnackBarAction( label: 'Hide', onPressed: () {}, ), ); Scaffold.of(context).showSnackBar(snackBar); }, child: Text('SnackBar'), ), ); } }
Flutter SnackBar Full Code :
Providing the full source code for flutter snackbar implementations.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build final Title = "SnackBar"; return MaterialApp( title: "Welcome", home: Scaffold( appBar: AppBar( title: Text(Title), ), body: SnackBarPage(), ), ); } } class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: RaisedButton( onPressed: () { final snackBar = SnackBar( content: Text('I am snackbar!'), action: SnackBarAction( label: 'Hide', onPressed: () {}, ), ); Scaffold.of(context).showSnackBar(snackBar); }, child: Text('SnackBar'), ), ); } }
Flutter SnackBar Output:
And here you go we have got and flutter snackbar appearing!!!
If you have any query on this tutorial on flutter snack bar do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.