One way to have a modal in flutter is to use a function provided by the flutter called showModalBottomSheet.

This function takes two arguments in order to work.

1.context -- context should and will be the context of the widget you are using it.

2.builder -- builder takes in a function that also needs context but this will not be the same context as the above so when you are naming it make sure you count for this, I used _ since I don't need to access the context in this example. 

 

example: 

I'm going to create a basic function that has showModalBottomSheet in it with all the arguments.

  void _startAddNewTransaction(BuildContext ctx) {
    showModalBottomSheet(
      context: ctx,
      builder: (_) {
        return NewTransaction(submitFunction: _addNewTransaction);
      },
    );
 }

NewTransaction is just a column with two text fields. 

 

to use the feature you need to pass in the function to a button of sort, here I am passing it to the floating action button provided by scaffold in flutter. 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        onPressed: () => _startAddNewTransaction(context),

 

 

or an Icon button in the app bar

     appBar: AppBar(
        title: Text('Flutter App'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => _startAddNewTransaction(context),
         )