flutter - how to create forms in popup

Question

I want to create a form inside a pop-up with flutter like the image below: popup

Answer 1

Here is an example of code that will allow you to create a button that can produce this kind of popup .

Code :

RaisedButton(
          child: Text("Open Popup"),
          onPressed: () {
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    scrollable: true,
                    title: Text('Login'),
                    content: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Form(
                        child: Column(
                          children: [
                            TextFormField(
                              decoration: InputDecoration(
                                labelText: 'Name',
                                icon: Icon(Icons.account_box),
                              ),
                            ),
                            TextFormField(
                              decoration: InputDecoration(
                                labelText: 'Email',
                                icon: Icon(Icons.email),
                              ),
                            ),
                            TextFormField(
                              decoration: InputDecoration(
                                labelText: 'Message',
                                icon: Icon(Icons.message ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                     actions: [
                      RaisedButton(
                          child: Text("Submit"),
                          onPressed: () {
                            // your code
                          })
                    ],
                  );
                });
          },
        ),

Output :

For more options, you would have to manipulate the properties of the Form widget, the TextField widget or the RaisedButton widget such as autovalidation, decoration, color etc ... If this is not enough , you can use the Dialog widget instead of the AlertDialog widget. But in this case, you will replace the content property with child. And make the necessary modifications.