Home > Blockchain >  Using Form in Alertdialog
Using Form in Alertdialog

Time:08-05

I want to create an object in body and use it in alertdialog, how should I do it? For example:

var form = Form(
);
********
return AlertDialog(
content: form,
),

The reason I want to do this is because when I try to use the buildForm structure outside the body it doesn't work. But I can't define it in the body because I want to use floating action button how can I solve it or is there a different way to solve it?

enter image description here

   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    tooltip: "New ToDo",
    onPressed: () {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("New ToDo"),
            content: Container(
              child: Column(children: [
                Form(
                  key: _formKey,
                  child: Column(children: [
                    buildForm(_controllerTitle, "Title")
                  ],),
                ),
              ],),
            ),
            actions: [
            ],
          );
        },
      );
    },
  ),              

CodePudding user response:

You can create a method buildForm that will take a TextEditingController and String

  Widget buildForm(TextEditingController controller, String title) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(title), // or just use on input decoration
          TextFormField(
            controller: controller,
            decoration: InputDecoration(),
          ),
        ],
      ),
    );
  }

Customize the way you want. And can be use like

 buildForm(_controllerTitle, "Title"),

class _EXTTEstState extends State<EXTTEst> {
  Widget buildForm(TextEditingController controller, String title) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(title), // or just use on input decoration
          TextFormField(
            controller: controller,
            decoration: InputDecoration(),
          ),
        ],
      ),
    );
  }

  final _controllerTitle = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        tooltip: "New ToDo",
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text("New ToDo"),
                content: Container(
                  child: Column(
                    children: [
                      Form(
                        // key: _formKey,
                        child: Column(
                          children: [
                            buildForm(_controllerTitle, "Title"),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                actions: [],
              );
            },
          );
        },
      ),
    );
  }
}
  • Related