はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

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

はじめに

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

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

f:id:hanaaaaaachiru:20200421192304g:plain

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

ルートの設定

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

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

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

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

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

ルートに遷移(push)

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

f:id:hanaaaaaachiru:20200421192524p:plain

ルートを設定しているときにルートを遷移(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');
},

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

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

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

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

さいごに

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

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

ではまた。