プログラミング、フリーダイビング、ブロックチェーンのブログ

プログラミング道場

私がおすすめするプログラミング教材のまとめ【書籍と動画】

プログラミング言語 スクリプト言語 コンパイル言語 アプリ開発 サーバー、インフラ、セキュリティなど 機械学習系 ゲーム開発 データベース 子供向け デザイン その他 おまけ まとめ この記事では、様々な書籍を紹介しました。 是非、自分に合 ...

続きを見る

【Flutter入門】画面遷移をする方法(値を渡す方法も紹介します)

更新日:

記事の内容


この記事では、アプリで複数の画面を移動する方法を紹介します。
具体的には、「routes」「Navigator」を使います。

画面遷移をする方法

Routeを定義する時には、「initialRoute」「routes」を設定します。
遷移する時には、「Navigator.push」や「Navigator.pushNamed」を使います。
戻る時には、「Navigator.pop」を使います。
指定した先まで戻る時には、「Navigator.popUntil」を使います。

複雑なRoutes設定とpushNamed

Routeが複雑な時は、このように整理してRouteを定義することができます。
その時は、遷移する時に「pushNamed」を使います。

シンプルな画面遷移に使うMaterialPageRoute

シンプルな画面遷移の場合は、直接、クラス名を指定して遷移してもOKです。
「MaterialPageRoute」を使います

元の画面に戻る時はpop

元の画面に戻る時は、「pop」や「popUntil」を使います。

元の画面に戻る時にpopを使いながら、値を渡す

popの第2引数に値を渡します。

遷移元

var weatherData =
await weather.getCityWeather(typedName);

遷移先から戻る時に押すボタン。
このcityNameが、上のweatherDataに入ってきます。

FlatButton(
onPressed: () {
Navigator.pop(context, cityName);
},
child: Text(
'Get Weather',
style: kButtonTextStyle,
),
),

画面遷移時に値を渡す方法(StatelessWidget)

画面遷移時に値を渡したいことがあると思います。
その時は、遷移先のクラスのコンストラクタに値をセットしましょう。

遷移先のページ

遷移元のページ
BottomButtonの中で、「ResultsPage」に渡したい値をセットしています。

画面遷移時に値を渡す方法(StatefulWidget)

画面遷移時に値を渡したいことがあると思います。
その時は、遷移先のクラスのコンストラクタに値をセットしましょう。

遷移元では、MaterialPageRouteを使ってこのように指定します。

Navigator.push(context, MaterialPageRoute(builder: (context) {
return LocationScreen(
locationWeather: weatherData,
);
}));

遷移先では、コンストラクタに値を指定した上で、widgetから値を取得します。

class LocationScreen extends StatefulWidget {
LocationScreen({this.locationWeather});
final locationWeather;
@override
_LocationScreenState createState() => _LocationScreenState();
}
@override
void initState() {
super.initState();
_updateUI(widget.locationWeather);
}

まとめ

この記事では、画面遷移をする方法を紹介しました。
ただの遷移、StatelessWidgetでの遷移、StatefulWidgetでの遷移の3つを覚えておきましょう。

Good luck for your engineer life!

関連コンテンツ

-Flutter, プログラミング

Copyright© プログラミング道場 , 2020 All Rights Reserved Powered by AFFINGER4.