Search code examples
flutterdartflutter-layoutflutter-appbar

Use Navigator.push (MaterialPageRoute) instead of AlertDialog


I would like to use Navigator.push (MaterialPageRoute) instead of AlertDialog as now I think its better for my user to have a full page to post content rather than a dialog box, how would I go about editing my code to do this? Thanks in advance

 appBar: AppBar(
    centerTitle: true,
    title: Text('hehe',
    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0),),
    actions: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: IconButton(icon: Icon(Icons.comment),
            onPressed: () {
          showDialog(context: context,
          builder: (BuildContext context){
            return AlertDialog(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
              content: Form(key: formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: TextFormField(
                      initialValue: '',
                      onSaved: (val) => board.subject = val,
                      validator: (val) => val == "" ? val: null,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: RaisedButton(
                      color: Colors.indigo,
                      child: Text(
                          'Post',
                      style: TextStyle(color: Colors.white),),
                      onPressed: () {
                        handleSubmit();
                        Navigator.of(context).pop();
                      },
                    ),
                  )
                ],
              ),
              ),
            );
          },
          );
            }
            ),
      ),
    ],
  ),

Solution

  • Create a StatefulWidget subclass say MyForm.

    class MyForm extends StatefulWidget {
      @override
      _MyFormState createState() => _MyFormState();
    }
    
    class _MyFormState extends State<MyForm> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("My form")),
          body: Form(
            key: formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: TextFormField(
                    initialValue: '',
                    onSaved: (val) => board.subject = val,
                    validator: (val) => val == "" ? val : null,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: RaisedButton(
                    color: Colors.indigo,
                    child: Text(
                      'Post',
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () {
                      handleSubmit();
                      Navigator.of(context).pop();
                    },
                  ),
                )
              ],
            ),
          ),
        );
      }
    }
    

    And use it like this in your onPressed method.

    onPressed: () {
      Navigator.push(context, MaterialPagerRoute(builder: (context) => MyForm()));
    }
    

    So, when the button is clicked, you will be navigated to the new page which is your form currently.