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

プログラミング道場

自分の市場価値を知りたい人にオススメの記事です

【すぐできる】エンジニアとしての市場価値を診断してみよう!

目次1 エンジニアが市場価値を把握しておくべき理由2 エンジニアの市場価値を決める要素3 エンジニアにおすすめしたい市場価値診断ツール4 【最後に】正確な市場価値を知るなら転職エージェント エンジニアが市場価値を把握しておくべき理由 エンジ ...

続きを見る


副業を考えているエンジニアにオススメの記事です

【土日や在宅OK】エンジニアの副業におすすめの案件紹介サイト

目次1 クラウドテック2 ITプロパートナーズ3 BIGDATA NAVI クラウドテック クラウドテックは副業やフリーランス向けの案件を扱うサイトです。 88%の方がリモートワーク案件で稼働中です。 リモートワークで働きたい人には、是非、 ...

続きを見る


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

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

目次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);
}

Flutterエンジニアの求人

DODAにはFlutterエンジニアの案件が、約190件、登録されていました。



Flutterを使って働きたい人は、DODAに相談してみて下さい



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

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

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

続きを見る


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

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

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

続きを見る


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

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

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

続きを見る


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

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

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

続きを見る


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

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

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

続きを見る


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

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

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

続きを見る

関連コンテンツ

-Flutter, プログラミング

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