【Flutter】Navigation・Routesを使った画面遷移の実装手順

はじめに

今回はFlutterの画面遷移について書いていきたいと思います。

実際に実装してみた結果はこんな感じ。

細かい説明ではなく、実際に実装する大まかな手順について紹介をしていきます。

ルートの設定

画面にURLのような名前をつけて、それにしたがって画面遷移を行います。

return MaterialApp(
    initialRoute: '/',
    routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
    },
);

ルートの設定はMaterialAppクラスのコンストラクターにて行い、以下の2つのプロパティを定義します。
MaterialApp class - material library - Dart API

• initialRoute: アプリで最初に始めるルート
• routes: それぞれのルートとウィジェットの対応付け

またこれらを設定した場合はhomeは設定できないことに注意してください。

ルートに遷移(push)

まず前提として画面はスタックによって実装されています。

ルートを設定しているときにルートを遷移(push)したいときはpushNamedメソッドを用います。
Navigator class - widgets library - Dart API

onPressed: (){
    Navigator.pushNamed(context, '/second', arguments: 'SomeMessage');
},

何かしらの値を送りたいときはargumentsを用いますが、何もないときは書かなくてOKです。

受け取る側はbuildメソッドの引数に情報が格納されているので、ModalRouteクラスの静的メソッドを使います。

class SecondPage extends StatelessWidget{
  Widget build(BuildContext context){
    var messageFromFirst = ModalRoute.of(context).settings.arguments;

元のルートに戻る(pop)

反対に戻したいときはNavigator.popメソッドを使います。
Navigator class - widgets library - Dart API

onPressed: (){
    Navigator.pop<String>(context, 'SomeValue');
},

また値を戻るときに渡したい場合は第２引数に書き、ジェネリックはその型を書きます。渡す値がなければ書かなくてOK。

次に受け取るときにはルートの遷移で使用したpush(pushNamed)メソッドの返り値で受け取ります。

onPressed: () async {
    var message = await Navigator.pushNamed(context, '/second', arguments: 'SomeValue');
},

また受け取りの際は非同期処理で取得してください。

さいごに

今回紹介したメソッド以外にもNavigatorクラスにはいろんな便利メソッドがあります。

maybePop，canPop，popUntilなどなどあるので、そちらも調べてみると面白いかもしれません。
Navigator class - widgets library - Dart API

ではまた。