[Flutter]Drawerで画面遷移(navigation)するには？

どうも、ちょげ(@chogetarou)です。

Drawerで画面遷移する方法を紹介します。

方法

Drawerで画面遷移するには、Navigator.push()を使います。

まず、Drawerで表示しているメニューにタップ処理を追加します。

タップ処理の追加は、ボタンやGestureDetectorなどで行います。

そして、タップ処理でNavigator.push()を呼び出します。

Scaffold(
  appBar: AppBar(),
  drawer: Drawer(
    child: GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => /*遷移先のページ*/,
          ),
        );
      },
      child: Container(),
    ),
  ),
),

これでDrawerで画面遷移することが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        drawer: Drawer(
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Page2(),
                ),
              );
            },
            child: Container(
              child: Text('Next Page'),
              alignment: Alignment.center,
            ),
          ),
        ),
      ),
    );
  }