{"id":19826,"date":"2022-05-27T05:54:39","date_gmt":"2022-05-27T05:54:39","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=3890"},"modified":"2022-05-27T05:54:39","modified_gmt":"2022-05-27T05:54:39","slug":"display-a-snackbar","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/05\/27\/display-a-snackbar\/","title":{"rendered":"Display a SnackBar"},"content":{"rendered":"\n<p>SnackBar gives a&nbsp;<strong>brief message<\/strong>&nbsp;at the bottom of the screen on mobile devices and lower-left on larger devices and gets&nbsp;<strong>confirmation<\/strong>&nbsp;from the user. The snack bar automatically disappears after a certain amount of time.<\/p>\n\n\n\n<p>Here, we are going to learn how we can implement a snack bar in Flutter. In Flutter, the snack bar only works with a scaffold widget context.<\/p>\n\n\n\n<p>Let us take an example where we show the list of records, and contains a delete icon corresponding to every list. When we delete any record, it shows a message at the bottom of your screen. This message gets confirmation from the user. If it does not receive any confirmation, the message goes disappear automatically. The following example helps to understand it more clearly.<\/p>\n\n\n\n<p>Create a Flutter project in Android Studio. Open the&nbsp;<strong>main.dart<\/strong>&nbsp;file and replace the following code.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      theme: ThemeData(  \n        primarySwatch: Colors.green,  \n      ),  \n      home: MyHomePage(),  \n    );  \n  }  \n}  \n  \nclass MyHomePage extends StatefulWidget {  \n  @override  \n  _MyHomePageState createState() => _MyHomePageState();  \n}  \n  \nclass _MyHomePageState extends State&lt;MyHomePage> {  \n  var lists = List&lt;String>.generate(11, (index) => \"List : $index\");  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text('Flutter SnackBar Demo'),  \n      ),  \n      body: ListView.builder(  \n        itemCount: lists.length,  \n        itemBuilder: (context, index) {  \n          return ListTile(  \n            title: Text(lists&#91;index]),  \n            trailing: Container(  \n              width: 60,  \n              child: FlatButton(  \n                child: Icon(  \n                  Icons.delete,  \n                  color: Colors.grey,  \n                ),  \n                onPressed: () {  \n                  showSnackBar(context, index);  \n                },  \n              ),  \n            ),  \n          );  \n        },  \n      ),  \n    );  \n  }  \n  \n  void showSnackBar(BuildContext context, int index) {  \n    var deletedRecord = lists&#91;index];  \n    setState(() {  \n      lists.removeAt(index);  \n    });  \n    SnackBar snackBar = SnackBar(  \n      content: Text('Deleted $deletedRecord'),  \n      action: SnackBarAction(  \n        label: \"UNDO\",  \n        onPressed: () {  \n          setState(() {  \n            lists.insert(index, deletedRecord);  \n          });  \n        },  \n      ),  \n    );  \n    Scaffold.of(context).showSnackBar(snackBar);  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>Now, run the app in Android Studio. You can see the following screen in the emulator. When you&nbsp;<strong>delete<\/strong>&nbsp;any list, it shows a message at the bottom of the screen. If you tap on the undo, it does not remove the list.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-tabbar3.png\" alt=\"Flutter Tabbar\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-tabbar4.png\" alt=\"Flutter Tabbar\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>SnackBar gives a&nbsp;brief message&nbsp;at the bottom of the screen on mobile devices and lower-left on larger devices and gets&nbsp;confirmation&nbsp;from the user. The snack bar automatically disappears after a certain amount of time. Here, we are going to learn how we can implement a snack bar in Flutter. In Flutter, the snack bar only works with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[575],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/19826"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=19826"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/19826\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=19826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=19826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=19826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}