Flutter基礎 – 画面遷移 ~初歩編~

はじめに

今日からFlutterについての記事も

ちょびちょび出していこうかなと思いマッスル

間違い解釈ミスなどありましたら

コメントTwitterなどで教えてくださいませ~<(_ _)>

最初は「画面遷移」についてやっていきますよ(^^♪

とりあえず、簡単なパターンから!

今回はわかりやすいように、

Kotlinを使って記述するパターン」※ここでは”Android”として説明しています

比較してみます!

データの受け渡しを伴わない画面遷移

Android(Kotlin) の場合

// 遷移する [ MainActivity] --> [ SubActivity]
val intent = Intent(applicationContext, SubActivity::class.java)
startActivity(intent)
// 遷移先から戻る [ MainActivity] <-- [ SubActivity ]
finish()

”コンテキスト” と ”遷移先のクラスファイル” からIntentオブジェクトを作って、遷移します。

遷移元に戻る時は「finish()」で終わっています(/・ω・)/

うっきー

よく見たことのあるやーつですね(‘ω’)
Flutterではどうでしょうか?

Flutter の場合

// ※FirstPageクラス

// 遷移する [ FirstPage ] -> [ SecondPage ]
Navigator.push<SecondPage>(
    context,
    MaterialPageRoute(builder: (context) {
        return SecondPage();
    }),
);

”Navigator.push()”メソッド を使用。

名前からわかるように、新たな画面を上に重ねていくようなイメージ。

第2引数にはRouteオブジェクトを渡します。

SecondPageのインスタンスを返すように実装。

うっきー

”上に重ねて”というのは
Androidのアクティビティとイメージが似ているので、理解しやすいですね(‘ω’)
また、Routeオブジェクトはほとんどの場合、
MaterialPageRouteクラスを利用するそうです(*^^)

// ※SecondPageクラス

// 遷移先から戻る [ FirstPage ] <- [ SecondPage ]
Navigator.pop(context);

”Navigator.pop()” を使用

うっきー

戻る時は”pop”なんですね!
これで重なっている画面を上から取っていくって感じでしょうか!
わかりやすい(*‘∀‘)

データを遷移先へ渡す

Android(Kotlin) の場合

// データ格納
val intent = Intent(applicationContext, SubActivity::class.java)
intent.putExtra("msg", "MainからSubへ")

// 遷移する [ MainActivity] --> [ SubActivity]
startActivity(intent)
// データ取り出し
val message = intent.getStringExtra("msg")

// 遷移先から戻る [ MainActivity] <-- [ SubActivity ]
finish()

intentにデータを格納して遷移、

遷移後にはまたintentからデータを取り出します。

うっきー

基本的にこれが定番ですね~(‘ω’)

Flutter の場合

// ※FirstPageクラス

// 遷移する [ FirstPage ] -> [ SecondPage ]
Navigator.push<SecondPage>(
    context,
    MaterialPageRoute(builder: (context) {
        // コンストラクタに値を渡す
        return SecondPage("FirstからSecondへ");
    }),
);

FirstPage側では、

SecondPageクラスのインスタンス化をする際

コンストラクタにデータを渡します

SecondPage側では、

データを受け取るためのコンストラクタと、

それをSecondPageクラス内で扱うためのフィールドも用意する。

// ※SecondPageクラス

class SecondPage extends StatelessWidget {

  // コンストラクタを定義する
  //   -> 引数の値をフィールドに格納
  const SecondPage(this.message);

  // フィールドを定義する
  //   -> 渡された値がここに入る
  final String message;

  @override
  Widget build(BuildContext context) {
    /*
    / ~ 省略 ~
    */
  }
}
うっきー

データを渡すのにコンストラクタを使っちゃうっていうの、
若干背徳感感じますね(。-∀-)笑

データを遷移先から受け取る

Android(Kotlin) の場合

// データを格納
intent.putExtra("msgRe", "SubからMainへ")
setResult(Activity.RESULT_OK, intent)

// 遷移先から戻る [ MainActivity] <-- [ SubActivity ]
finish()
// 遷移する [ MainActivity] --> [ SubActivity ]
// ※データを受け取る前提の遷移が必要
val intent = Intent(applicationContext, SubActivity::class.java)
startActivityForResult(intent, 1)

// データを受け取る処理(messageで受け取る)
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if(requestCode == 0 && resultCode == Activity.RESULT_OK){
        val message = data?.getStringExtra("msgRe")
    }
}

データを遷移先から受け取る場合、遷移する際にsrartActivityForResult()を呼ばないといけません!

遷移先でデータを格納、リザルトコードをセットしてfinish()。

受け取りはonActivityResult()で行います。

うっきー

おおwいきなりゴチャってきたw

Flutter の場合

// ※SecondPageクラス

// データを渡す
Navigator.pop(context, 'SecondからFirstへ');

遷移先のSecondPageで、

pop()の第2引数にデータを渡します。

// ※FirstPageクラス

// 非同期処理を使用(async/await)
onPressed: () async {
  // pop()で渡された値を、messageで受け取る
  var message = await Navigator.push<SecondPage>(
    context,
    MaterialPageRoute(builder: (context) {
      return SecondPage();
    }),
  );
},

非同期処理async/awaitを使って

結果を待機して取得します。

うっきー

データの受け渡しが「ある」「ない」の記述差は、
Androidほど大きくないですね(。-∀-)
非同期処理については、ざっくりとしかわからないのでざっくりと説明しました(;´・ω・)笑

なんかほかにもいろいろ方法があるらしい

今回は単純に

「ただの画面遷移」

「文字列の受け渡し」

だけでしたが

調べるとまだ画面遷移のテクニックはあるみたいですね~(。-∀-)

(Named RoutesとかNamedRoutesとか、あと NamedRoutesとか)

あとNavigatorクラスのほかのメソッドもやりたいな~

ま、それは次回以降にしましょうw

クラス構成もいまいちわかってないので

テンプレイジイジしながら勉強してきます(;’∀’)笑

それではまた次回!