FlutterでScaffoldをModal表示する

こんな風にScaffoldをModalで表示する方法を紹介します。

Navigator.push するときに渡すMaterialPageRoute のfullscreenDialog をtrueにしておけば、モーダル表示されます。

コード例はこんなかんじ。Screen1からScreen2をモーダル表示します。

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Screen1")),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Screen2();
                    },
                    fullscreenDialog: true));
          },
          child: Text("show modal screen"),
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Screen2")),
      body: Center(
        child: Text("This is modal!!"),
      ),
    );
  }
}

参考
https://kwmt27.net/2018/07/28/flutter-navigator-modal/