Use an appBar icon to open a form

Question

.

I want to use an icon in my appBar to open my form. Currently my form is situated in the body of my app(Column). How can I make this so instead of having the form in the body, I can tap the icon and a popup will appear instead, bit like composing a tweet?

Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: Text('Social App'),
    actions: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: IconButton(icon: Icon(Icons.add), onPressed: (){})
      ),
    ],
  ),

body: Column(
    children: <Widget>[
      Flexible(
        flex: 0,
        child: Card(
          child: Form(
            key: formKey,
              child: Flex(
              direction: Axis.vertical,
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.subject),
                title: TextFormField(
                  initialValue: '',
                  onSaved: (val) => board.subject = val,
                  validator: (val) => val == "" ? val: null,
                ),
              ),
              ListTile(
                leading: Icon(Icons.message),
                title: TextFormField(
                  initialValue: '',
                  onSaved: (val) => board.body = val,
                  validator: (val) => val == "" ? val: null,
                ),
              ),
              FloatingActionButton(
                child: Text('post'),
                backgroundColor: Colors.pink,
                onPressed: (){
                  handleSubmit();
                },
              ),
            ],
        ),
      ),
      ),
  ),

If there's anything else I need to include to help please let me know. And thanks in advance.

Answer 1

You can make the form as other page and navigate to it, or as Dialog, and show it over current page using showDialog.

Values can be returned from the page/dialog via shared model, using BLoC pattern or by Navigator.of(context).pop.