Flutter: Create custom dialog as StatefulWidget?

user_13724041 0
Viewed 3352

I'm working on an app that will get only 2 inputs from the user, maybe 3 in the future. So I use showDialog with 2 inputfield and 2 buttons. Very simple. Looks pretty much like this: enter image description here It shows up perfectly in the main screen if it's being called as a function. But I would like to use that same dialog in another screen in the app and just change the text on one of the buttons. Since the dialog code it's long and I don't want to repeat it, I want to put it in a new StatefulWidget (to retrieve the information from the input fields and clear them afterwards). Now the problem is that I can't find a way to return the dialog from an external widget. I don't know if it's actually impossible because of the whole async Widget incompatibility or I'm just too stupid to figure this out.

This is the code for my dialog (as a function):

_dialog() async {
  await showDialog<String>(
    context: context,
    child: ButtonBarTheme(
      data: ButtonBarThemeData(alignment: MainAxisAlignment.center),
      child: AlertDialog(
        contentPadding: const EdgeInsets.all(20.0),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: EdgeInsets.only(bottom: 15),
              child: new TextField(
                // onSubmitted: next,
                autofocus: true,
                controller: _title,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(bottom: 2),
                  labelText: 'Title',
                  hintText: 'Example: New Smartphone',
                ),
              ),
            ),
            TextField(
              autofocus: true,
              controller: _codigo,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                labelText: 'Code',
                hintText: 'Example: EC20008347607',
              ),
            ),
          ],
        ),
        actions: [
          Row(
            children: [
              Container(
                padding: EdgeInsets.only(right: 35, bottom: 5),
                child: FlatButton(
                    color: Colors.cyan[600],
                    child: const Text('CANCEL'),
                    onPressed: () {
                      Navigator.pop(context);
                    }),
              ),
              Container(
                padding: EdgeInsets.only(left: 15, bottom: 5),
                child: FlatButton(
                  color: Colors.cyan[600],
                  child: const Text('ADD'),
                  onPressed: () {
                    setState(() {
                      _title.text = '';
                      _code.text = '';
                    });
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

Thanks in advance for any help. I'm a beginner.

stateful flutter textinput dialog widget
3 Answers

You can put it in another dart file that accepts any property values that aren't static, like this:

CustomAlertDialog({String leftButtonText, String rightButtonText}) async {
  return AlertDialog(
        contentPadding: const EdgeInsets.all(20.0),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: EdgeInsets.only(bottom: 15),
              child: new TextField(
                // onSubmitted: next,
                autofocus: true,
                controller: _title,
                    decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(bottom: 2),
                  labelText: 'Title',
                  hintText: 'Example: New Smartphone',
                ),
              ),
            ),
             TextField(
              autofocus: true,
              controller: _codigo,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                labelText: 'Code',
                hintText: 'Example: EC20008347607',
              ),
            ),
          ],
        ),
        actions: [
          Row(
            children: [
              Container(
                padding: EdgeInsets.only(right: 35, bottom: 5),
                child: FlatButton(
                    color: Colors.cyan[600],
                    child: const Text('$leftButtonText'),
                    onPressed: () {
                       Navigator.pop(context);
                    }),
              ),
               Container(
                 padding: EdgeInsets.only(left: 15, bottom: 5),
                child: FlatButton(
                  color: Colors.cyan[600],
                  child: const Text('$rightButtonText'),
                  onPressed: () {
                    setState(() {
                      _title.text = '';
                      _code.text = '';
                    });
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}
user_12726550
user_97936510

Try my code snippet

**

MaterialButton(
              color: Colors.blue,
              height: 50,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              textColor: Colors.white,
              child:  Text('Show Info Dialog',),
              onPressed: () {
                SimpleDialogs.showinfoDialog(context: context, title: "Something insert here");
              },
user_120607900
Related