How to show a Dialog Box on a Button Click in Flutter?

In this post, I'm going to show you how to show a Dialog box on a Button Click. The final output is going to look like below. On button click, you will see the Dialog box shown below. ![](https://www.fluttercentral.com/Uploads/1474a6f2-383a-4ff9-acda-d1e95aebc767.jpgwidth="50%height="auto]( Here is the final code from Main.dart file. All you need to do it copy to the main.dart file on your newly created flutter project. runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State { void _showcontent() { showDialog( context: context, barrierDismissible: false, // user must tap button! builder: (BuildContext context) { return new AlertDialog( title: new Text('You clicked on'), content: new SingleChildScrollView( child: new ListBody( children: [ new Text('This is a Dialog Box. Click OK to Close.'), ], ), ), actions: [ new FlatButton( child: new Text('Ok'), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: [ new Text( 'Push the button to show a Dialog:', ), new RaisedButton( onPressed: _showcontent, color: Colors.blueAccent, child: new Text('Click here', style: TextStyle(color: Colors.white)), ), ], ), ), ); } } Let me know if this helps through your comments. Thanks, Srikanth