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.

Solution

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.