Tech Sheets

Flutterで画面遷移を実装する

最終更新日:2019-05-02

Flutterで画面遷移を実現するには、次の2ステップで実装します。

  • 画面となるWidgetを作る
  • 画面遷移APIを呼ぶ
  • 画面となるWidgetを作る

    Flutterでの画面はWidgetのツリーです。Androidの Fragment やiOSの UIViewController のように、画面用の特別なクラスがあるわけではありません。

    ここでは例として NextPage を作っておきます。

    class NextPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("Next Page")),
          body: Center(child: Text("画面その2だよ")),      
        );    
      }
    }
    

    画面遷移APIを呼ぶ

    遷移先の画面ができたら、次はその画面に遷移するための処理を記述しましょう。 Navigator.push() を使います。ここでは例としてFABをタップしたときに画面遷移するようにしています。

    // FABの部分だけ記述
    FloatingActionButton(
        onPressed: () => Navigator.push(
          this.context,
          MaterialPageRoute(
            builder: (context) => NextPage())
        ),
        tooltip: 'Next',
        child: Icon(Icons.arrow_right),
    )
    

一覧に戻る