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

プログラミング道場

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

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

エンジニアが市場価値を把握しておくべき理由 エンジニアは、なぜ市場価値を把握しておいた方がいいのか、まずはその理由について説明します。 エンジニアの市場価値を決める要素 エンジニアの市場価値を決める要素について説明します。 経験業務と年数 ...

続きを見る

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

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

これからエンジニアになりたい人へ向けた本 私が書いた、「これからエンジニアになりたい人」に向けた本です。 最近、世間ではプログラミングの必要性が声高く叫ばれるようになりました。 子供向けには2021年からプログラミング教育が義務教育で実施さ ...

続きを見る

【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の学習でおすすめの本と動画(Udemy)【2022年最新】

初心者向け 脱初心者のための問題集 Dart編 Dartの基礎的な文法を学習し終わった後、次に何をしようかと考えている人にオススメの本です。 基礎を学んだ後にするべきことは、アウトプットです。 この本では、そのアウトプットをするための演習課 ...

続きを見る


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

Swiftの学習でおすすめの本と動画(Udemy)【2022年最新】

初心者向け たった2日でマスターするiPhoneアプリ開発集中講座 Xcode 11 Swift 5対応 小学生から高齢者まで、全ての初心者にオススメできる本です。 初めてiPhoneアプリを作る際の定番本です。 SwiftUI / iOS ...

続きを見る


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

Kotlinの勉強でおすすめの本と動画(Udemy)【2022年最新】

初心者向け TECHNICAL MASTER はじめてのAndroidアプリ開発 Kotlin編 Kindle版 Android環境でのプログラミングを初めて学ぶ人のための書籍です。 「Androidアプリ開発の基礎を学びたい!」という人に ...

続きを見る


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

Gitの学習でおすすめの本【2022年最新】

漫画?でわかりやすく学ぶ入門書の定番 改訂2版 わかばちゃんと学ぶ Git使い方入門 Gitの入門書の定番と言っても差し支えありません。 絵や図で解説している本なので、わかりやすく頭に入ってきます。 サルでもわかるGit入門 Gitの解説サ ...

続きを見る


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

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

ちまたには、「エンジニアになるための情報」で溢れかえっています。 ジョージさんが考える「Webエンジニアになる方法」を教えて下さい。 私が定義するWebエンジニア まず、最初に以下の図を見て下さい。 これが、Web業界で働く人達の大分類です ...

続きを見る


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

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

エンジニアとして就職するためには実務経験が大事だと聞いていますが、就職しないことには実務経験を積むことができません。 どうやって、最初の実務経験を積んだらいいでしょうか? スクールの理想と現実 これからプログラミングを学ぼうとしている人が描 ...

続きを見る

関連コンテンツ

-Flutter, プログラミング

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