A material design dialog, Dialogs are temporary windows that appear as overlays over the existing application
Show dialog is simple
showDialog(context: context, builder: (context) => Center(child: Text("Dialog"))); |
In flutter we have multiple ways to show dialogs
Alert Dialog
Custom Dialog
Full-Screen Dialog
showDialog( context: context, builder: (BuildContext context){ return AlertDialog( title: Text("Alert Dialog"), content: Text("Dialog Content"), ); } ) |
This is a simple alert dialog with title and message. We can also add buttons to handle the events
This widget, there is a parameter called action. ?It accepts an array of widgets and we can provide multiple buttons to that.
Those Buttons will appear in the bottom right corner of the dialog
actions:[ FlatButton( child: Text("Close"), ) ] |
We can close the Displayed Dialog by calling the Navigator.of(context).pop();
FlatButton( child: Text("Close"), onPressed: (){ Navigator.of(context).pop(); }, ) |
Example
class MyDialog extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Dialog"),backgroundColor: Colors.pink,), body: Center( child: FlatButton( onPressed: () { showMyDialog(context); }, child: Text( 'Show Me', style: TextStyle( fontSize: 16.0, fontWeight: FontWeight.bold, color: Colors.white), ), color: Colors.pink, ), ), ); } void showMyDialog(BuildContext context) { showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return Dialog( child: _contentWidget(context), insetAnimationCurve: Curves.fastOutSlowIn, insetAnimationDuration: Duration(milliseconds: 100), shape: RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(8.0), ), ),); }); } Widget _contentWidget(BuildContext context) { return Center( widthFactor: 2.0, heightFactor: 1.0, child: Container( width: 300.0, height: 200.0, color: Colors.white, child: Column( children: <Widget>[ Expanded( child: Container( padding: EdgeInsets.only(top: 5.0), child: Text('This is title',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold,fontSize: 22.0),),), flex: 1, ), Expanded( child: Container( alignment: Alignment.topLeft, margin: EdgeInsets.all(20.0), child: Text('Text Message to display the Dialog in Flutter',style: TextStyle(fontSize: 18.0,color: Colors.black),), ), flex: 3, ), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ RaisedButton(onPressed: (){ Navigator.of(context).pop(); }, child: Text('Continue',style: TextStyle(color: Colors.white)),color: Colors.pink,), FlatButton(onPressed: (){ Navigator.of(context).pop(); }, child: Text('Cancel',style: TextStyle(color: Colors.pink),)), ], ), flex: 2, ), ], ), ), ); } } |