[Flutter/dart] How to make a page that appears on the screen

Overview

In the smartphone app, there is a type of page that appears on the spot without changing the screen (often in notifications, etc.). I'll show you how to make it with Flutter.

Pages like this

Method

Use SimpleDialog. I pass SimpleDialogOption to the children property, and I can pass any Widget to the child: property of this SimpleDialogOption. Here, let's pass ListTile and IconButton.

@override
//Stateful WidgetのState
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          margin: const EdgeInsets.only(top:20, left:20),
          child: RaisedButton(
            child: Text('Tap'),
            onPressed: ()async{await _showPage(context);}, 
            //A page appears with a button tap
          )
      )
    );
  }

//Process where the page appears
  Future<bool> _showPage(BuildContext context) async {
    List<int> _ids = List.generate(4, (index) => index + 1);  
    //List of number

    bool res = await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
              title: Text('Title'),
              children: _ids.map((e) =>
                  SimpleDialogOption(
                    child: ListTile(
                      leading: CircleAvatar(
                        child: Icon(Icons.person),
                      ),
                      title: Text(e.toString()),
                    ),
                  )).toList()
                ..add(
                    SimpleDialogOption(
                        child: IconButton(
                          icon: Icon(Icons.add),
                          onPressed: () {},
                        )
                    )
                )
          );
        }
    );
    return res;
  }
}

Lastly

If the UI is too complicated, it is better to make a page transition, but if you want to display notifications or options, you can display it in this way.