mohammed nabil
mohammed nabil

Reputation: 107

How to pass data from alert dialog to same page in flutter

I want to pass data from alert dialog.Alert dialog contains textfield,so whatever the user type on the textfield that text should pass to the main page (screen).Below is the code of the alert dialog

    Padding(
                          padding: const EdgeInsets.only(left: 42.0),
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: RaisedButton(onPressed: (){
                                _showDialog();
                            },
                          ),
                        ),

Padding(
                padding: const EdgeInsets.only(top: 50.0),
                  child: new Text('// Displays text'););

    void _showDialog() {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            // return object of type Dialog
            return AlertDialog(
              title: new Text("Alert Dialog title"),
              content: TextField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: 'Enter the number'
                ),
              )
              ,
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                Row(
                  children: <Widget>[
                   new FlatButton(
                   child: new Text("Cancel"),
                    onPressed: () {
                    Navigator.of(context).pop();
                    },
                  ),
                    new FlatButton(onPressed: (){

                    }, child: new Text("OK"))
                  ],

                ),
              ],
            );
          },
        );
      }

Upvotes: 2

Views: 9090

Answers (2)

cipli onat
cipli onat

Reputation: 2142

Edit new solution:

// write this in your main page
String onMainPageText;

you can display like this in on your main page! after clicking the okey in your _showdialog method Text(onMainPageText)

change your _showDialog method with the following code.

  void _showDialog() {
    String dialogText;
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: TextField(
            onChanged: (String textTyped) {
              setState(() {
                dialogText = textTyped;
              });
            },
            keyboardType: TextInputType.number,
            decoration: InputDecoration(hintText: 'Enter the number'),
          ),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            Row(
              children: <Widget>[
                new FlatButton(
                  child: new Text("Cancel"),
                  onPressed: () {
                    setState(() {
                      onMainPageText = '';
                    });
                    Navigator.of(context).pop();
                  },
                ),
                new FlatButton(
                    onPressed: () {
                      setState(() {
                        onMainPageText = dialogText;
                      });
                      Navigator.of(context).pop();
                    },
                    child: new Text("OK"))
              ],
            ),
          ],
        );
      },
    );
  }

Old answer:

create a global TextEditingController will handle your problem you can access the text field text with textEditingConroller.text

dont forget to define textEditingController inside your class

class YourMainPageState extends State<YourMainPage>{
  TextEditingController textEditingController = new TextEditingController();

}
  void _showDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: TextField(
            controller: textEditingController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(hintText: 'Enter the number'),
          ),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            Row(
              children: <Widget>[
                new FlatButton(
                  child: new Text("Cancel"),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                new FlatButton(onPressed: () {print(textEditingController.text);}, child: new Text("OK"))
              ],
            ),
          ],
        );
      },
    );
  }

You can display typed text with that code :

Padding(
                padding: const EdgeInsets.only(top: 50.0),
                  child: new Text(texEditingController.text););

Upvotes: 6

Hussein Abdallah
Hussein Abdallah

Reputation: 1560

The textfield has a parameter called onChanged: you can use that to pass a function

TextField(
            keyboardType: TextInputType.number,
            onChange: onChange
            decoration: InputDecoration(
                hintText: 'Enter the number'
            ),
          )

in your main screen use this:

 void onChange(String text) {
 //do stuff here with text like maybe setState
 }

Upvotes: 0

Related Questions