SnackBar In Flutter

Introduction

In this article, we will learn how to implement SnackBar in Flutter. Snackbar only works with Scaffold widget context. SnackBar is useful to show some task notification and get confirmation from the user for that. Let’s say you have removed some record from the app and showed confirmation to the user in the toast message box, but a user can not undo this operation. In this case, snackbar is very important as it provides an action so the user can undo it. We will take the same example to understand snackbar in Flutter application.

Output

Steps

Step 1

The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, then you can check my blog Create a first app in Flutter. I have created an app named as “flutter_snackbar”.

Step 2

Now, create a listview using listview builder. We have generated temporary list using generate() method. Following is the code of it.

var records = List<String>.generate(20, (index) => "Record : $index");

Step 3

We will generate the listview and each item has a delete button which will delete the item and show snackbar at the bottom. Following is the implementation of that.

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SnackBar in Flutter'),
),
body: ListView.builder(
itemCount: records.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(records[index]),
trailing: Container(
width: 40,
child: FlatButton(
child: Icon(
Icons.delete,
color: Colors.purple,
),
onPressed: () {
showSnackBar(context, index);
},
),
),
);
},
),
);

Step 4

Now, we will create a method, showSnackBar, which will show a snackbar at the bottom. We will implement action in snackbar to undo delete operation as well. Following is the programming implementation of that.

void showSnackBar(BuildContext context, int index) {
var deletedRecord = records[index];
setState(() {
records.removeAt(index);
});
SnackBar snackBar = SnackBar(
content: Text('Deleted $deletedRecord'),
action: SnackBarAction(
label: "UNDO",
onPressed: () {
// print('Undo Delete of $message');
setState(() {
records.insert(index, deletedRecord);
});
},
),
);
Scaffold.of(context).showSnackBar(snackBar);
}

Step 5

Following is the full code of the example.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var records = List<String>.generate(20, (index) => "Record : $index");
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SnackBar in Flutter'),
),
body: ListView.builder(
itemCount: records.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(records[index]),
trailing: Container(
width: 40,
child: FlatButton(
child: Icon(
Icons.delete,
color: Colors.purple,
),
onPressed: () {
showSnackBar(context, index);
},
),
),
);
},
),
);
}
void showSnackBar(BuildContext context, int index) {
var deletedRecord = records[index];
setState(() {
records.removeAt(index);
});
SnackBar snackBar = SnackBar(
content: Text('Deleted $deletedRecord'),
action: SnackBarAction(
label: "UNDO",
onPressed: () {
// print('Undo Delete of $message');
setState(() {
records.insert(index, deletedRecord);
});
},
),
);
Scaffold.of(context).showSnackBar(snackBar);
}
}

Hooray…. Run the app and Test It on emulator/simulator or device :)))

Conclusion

We have learned how to implement the snackbar in Flutter and provide the action of undo in the snackbar as well. You have seen such snackbar features in Gmail.

Git Repo