Flutter Dialogs | RRTutors

Flutter Dialogs

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

  1. Alert Dialog

  2. Custom Dialog

  3. Full-Screen Dialog

 

Simple AlertDialog

 

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

 

Add buttons to Alert Dialogs

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"),

      )

    ]


 

How to close Dialog

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,

           ),

         ],

       ),

     ),

   );

 }

}

 

Flutter DialogBox

Advertisements