Show Multiple Widgets in Alert Dialog

Hi Every one, in previous article we have talked about how to Retrieve value from Text Field in Flutter. Now, i will talk about how to show multiple widgets in Alert Dialog. That still has relation with last article.

For display multiple widgets inside alert dialog, we must create like this

return showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
        content: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          //position
          mainAxisSize: MainAxisSize.min,
          // wrap content in flutter
          children: <Widget>[
            Text("Username : " + etUsername.text),
            Text("Password : " + etPassword.text)
          ],
        )
    );
  },
);

Explanation :

for using multiple widget in content alert dialog, we must set column and children widget.

Full Code :

class Page1 extends StatelessWidget {

  TextEditingController etUsername = new TextEditingController();
  TextEditingController etPassword = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('Page 1'),
      ),

      body: Form(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 35.0),
            ),

            Text('Register Form', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0),),

            TextFormField(
              controller: etUsername,
              decoration: InputDecoration(
                  hintText: 'Input Username'
              ),
            ),
            TextFormField(
              controller: etPassword,
              obscureText: true,
              decoration: InputDecoration(
                  hintText: 'Input Password'
              ),
            ),

            //notification widget
            //toast
            //alert dialog
            //snack bar

            Container(
              alignment: Alignment.centerRight,
              child: MaterialButton(onPressed: (){
                return showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                        content: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          //posisi
                          mainAxisSize: MainAxisSize.min,
                          // untuk mengatur agar widget column mengikuti widget
                          children: <Widget>[
                            Text("Username : " + etUsername.text),
                            Text("Password : " + etPassword.text)
                          ],
                        )
                    );
                  },
                );
              },
                color: Colors.orange,
                textColor: Colors.white,
                child: Text('Submit'),
              ),

            ),

          ],
        ),
      ),
    );
  }
}