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

プログラミング道場

私がオススメするプログラミング教材です

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

目次1 これからエンジニアになりたい人へ向けた本2 プログラミング言語3 アプリ開発4 サーバー、インフラ、セキュリティなど5 機械学習系6 ゲーム開発7 データベース8 子供向け9 デザイン10 組織作り11 自作シリーズ12 その他13 ...

続きを見る

【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);
}

DartとFlutterをより詳しく勉強したい人には、この記事がオススメです

Dart
FlutterとDartの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け 動画教材 Flutter & Dart - The Complete Guide [2023 Edition] ▼ 興味がある方は、画像をクリック 英語版ですが、人気のコースです。 Fl ...

続きを見る


SwiftでiOSアプリを開発したい人には、この記事がオススメです

Swiftの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け 動画教材 【iOS】SwiftUI 超入門 - Swift を基礎から学んで iOS (iPhone) アプリを開発しよう ▼ 興味がある方は、画像をクリック Swift , SwiftUI , ...

続きを見る


KotlinでAndroidアプリを開発したい人には、この記事がオススメです

Kotlinの勉強でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け 動画教材 はじめての Kotlin【Java 知らなくてOK!丁寧な解説で Android に必要な Kotlin の基本を学習】 ▼ 興味がある方は、画像をクリック 今学ぶべき言語、Kotli ...

続きを見る


Gitをより詳しく勉強したい人には、この記事がオススメです

Gitの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 漫画?でわかりやすく学ぶ入門書の定番3 初心者向け4 中級者向け5 上級者向け 動画教材 もう怖くないGit!チーム開発で必要なGitを完全マスター ▼ 興味がある方は、画像をクリック Gitの基本コマンド、ブランチやマ ...

続きを見る


ゼロからWebエンジニアになりたい人には、この記事がオススメです

ゼロからWebエンジニアとして就職する方法【何もない自分に積み上げていく】

ちまたには、「エンジニアになるための情報」で溢れかえっています。 ジョージさんが考える「Webエンジニアになる方法」を教えて下さい。 目次1 私が定義するWebエンジニア2 必ずやるべきこと3 推奨されること4 まとめ 私が定義するWebエ ...

続きを見る


独学で実務っぽい経験を積みたい人には、この記事がオススメです

エンジニアが独学で実務経験っぽいことを学ぶ方法

エンジニアとして就職するためには実務経験が大事だと聞いていますが、就職しないことには実務経験を積むことができません。 どうやって、最初の実務経験を積んだらいいでしょうか? 目次1 スクールの理想と現実2 IT業界が抱える矛盾点3 擬似的に実 ...

続きを見る

-Flutter, プログラミング

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