Flutter - Comment créer des formulaires dans popup

Question

Je veux créer un formulaire dans une fenêtre contextuelle avec un flutter comme l'image ci-dessous: popup

.

comment puis-je faire ça avec Flutter?

Answer 1

Voici un exemple de code qui vous permettra de créer un bouton capable de produire ce type de 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
                          })
                    ],
                  );
                });
          },
        ),

sortie:

Pour plus d'options, vous devriez manipuler les propriétés du widget de formulaire, le widget TextField ou le widget de plutton, tel que l'autovalidation, la décoration, la couleur, etc. Si cela ne suffit pas, vous pouvez utiliser le boîte de dialogue widget au lieu du widget alertdialog widget. Mais dans ce cas, vous remplacerez la propriété de contenu avec votre enfant. Et apporter les modifications nécessaires.