Flutter Snackbar

<p>In this post, I'm going to share you the code to create a Snackbar in Flutter. Once you run the provided code, this is how a Snackbar will popup on a button click.</p> <p>![](https://www.fluttercentral.com/Uploads/dc7242ee-05d8-4e1f-9ac7-59500b33720d.gifwidth="50%height="auto](</p> <p>Snackbar becomes handy when you want to inform users that cerain action is taking place. Here is the code from main.dart file. All you need to do is, create a new flutter app and replace the code with the below code.</p> <p>color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](</p> <p>color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';</p> <p>color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #c586c0;](new color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #6a9955;](// This widget is the root of your application.</p> <p>color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](MaterialApp( title: color: #ce9178;]('Flutter Demo', theme: color: #c586c0;](new color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #c586c0;](new color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Flutter Demo Home Page'), ); } }</p> <p>color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key); color: #569cd6;](final color: #4ec9b0;](String title; color: #569cd6;](@override</p> <p>color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #c586c0;](new color: #4ec9b0;](_MyHomePageState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold( appBar: color: #c586c0;](new color: #4ec9b0;](AppBar( title: color: #c586c0;](new color: #4ec9b0;](Text(widget.title), ), body: color: #c586c0;](new color: #4ec9b0;](Builder( builder: (color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Center( child: color: #c586c0;](new color: #4ec9b0;](RaisedButton( onPressed: () { color: #4ec9b0;](Scaffold.color: #dcdcaa;](of(context).color: #dcdcaa;](showSnackBar(color: #4ec9b0;](SnackBar( content: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]('Hello from Snakbar!'), action: color: #4ec9b0;](SnackBarAction( label: color: #ce9178;]("Undo", onPressed: () , ), )); }, child: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]("Show Snakbar"), ) ); }, ) ); } }</p> <p>Hope this is useful.</p> <p>Thanks, Srikanth</p>