flutter - how to create forms in popup

Here you go! showDialog takes a WidgetBuilder as a parameter so you can return any widget.

   import 'package:flutter/material.dart';void main() {  runApp(new MaterialApp(home: new MyApp()));}class MyApp extends StatefulWidget {  @override  _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> {  final _formKey = GlobalKey<FormState>();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Flutter"),      ),      body: Center(        child: RaisedButton(          onPressed: () {            showDialog(                context: context,                builder: (BuildContext context) {                  return AlertDialog(                    content: Stack(                      overflow: Overflow.visible,                      children: <Widget>[                        Positioned(                          right: -40.0,                          top: -40.0,                          child: InkResponse(                            onTap: () {                              Navigator.of(context).pop();                            },                            child: CircleAvatar(                              child: Icon(Icons.close),                              backgroundColor: Colors.red,                            ),                          ),                        ),                        Form(                          key: _formKey,                          child: Column(                            mainAxisSize: MainAxisSize.min,                            children: <Widget>[                              Padding(                                padding: EdgeInsets.all(8.0),                                child: TextFormField(),                              ),                              Padding(                                padding: EdgeInsets.all(8.0),                                child: TextFormField(),                              ),                              Padding(                                padding: const EdgeInsets.all(8.0),                                child: RaisedButton(                                  child: Text("Submitß"),                                  onPressed: () {                                    if (_formKey.currentState.validate()) {                                      _formKey.currentState.save();                                    }                                  },                                ),                              )                            ],                          ),                        ),                      ],                    ),                  );                });          },          child: Text("Open Popup"),        ),      ),    );  }}

Hop it helps!

Using the rflutter_alert plugin rflutter_alert

You must add the library as a dependency to your project.

 dependencies:   rflutter_alert: ^1.0.3

To open a popup, Let’s to be a function and do the following:

 _openPopup(context) {    Alert(        context: context,        title: "LOGIN",        content: Column(          children: <Widget>[            TextField(              decoration: InputDecoration(                icon: Icon(Icons.account_circle),                labelText: 'Username',              ),            ),            TextField(              obscureText: true,              decoration: InputDecoration(                icon: Icon(Icons.lock),                labelText: 'Password',              ),            ),          ],        ),        buttons: [          DialogButton(            onPressed: () => Navigator.pop(context),            child: Text(              "LOGIN",              style: TextStyle(color: Colors.white, fontSize: 20),            ),          )        ]).show();  }

And call it this way

onPressed: () {  _openPopup(context),} 

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: <Widget>[                            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 theForm widget, the TextField widget or the RaisedButton widget such asautovalidation, decoration, color etc ... If this is not enough , youcan use the Dialog widget instead of the AlertDialog widget. But inthis case, you will replace the content property with child. And makethe necessary modifications.