Android iOS Flutter tutorial on Snackbar || SnackBar || Flutter

 

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.