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

プログラミング道場

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

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

続きを見る

【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!

DartとFlutterをより詳しく勉強したい人は、この記事を読んで下さい

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

初心者向け Dart入門 - Dartの要点をつかむためのクイックツアー Dartの構文などを短時間で確認したい人にオススメの本です。 他の言語を全く使ったことがない人には難しいかもしれないので、ある程度の経験を積んだ人向けです。 でも、内 ...

続きを見る


SwiftでiOSアプリを開発したい人は、この記事を読んで下さい

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

初心者向け 【6日で速習】iOS 13アプリ開発入門決定版 20個のアプリを作って学ぼう ▼ 今すぐ詳細を見てみる 地図検索、カメラ投稿、タイマー、日出時刻検索、ARアプリ、AIアプリなど実用アプリを20個以上作って学ぶことができます。 作 ...

続きを見る


KotlinでAndroidアプリを開発したい人は、この記事を読んで下さい

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

初心者向け やさしいKotlin入門 プログラミング経験がない人にもオススメできる一冊です。 これ一冊で、アプリを作れるようにはなりませんが、Kotlinの楽しさを知るにはいい本だと思います^^ 速習 Kotlin: Javaより簡単!新A ...

続きを見る


Gitをより詳しく勉強したい人は、この記事を読んで下さい

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

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

続きを見る


ゼロからWebエンジニアになりたい人は、この記事を読んで下さい

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

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

続きを見る


独学で実務っぽい経験を積みたい人は、この記事を読んで下さい

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

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

続きを見る

関連コンテンツ

-Flutter, プログラミング

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