概要
Flutterでナビゲーションを使う時、次の画面にパラメータを渡す必要がある時があります。この時、Flutterで次の画面にパラメータを渡す方法について説明します。
このブログで紹介するソースコードは下記のリンクで確認できます。
プロジェクトの準備
例題を見ながら、ナビゲーションを使って画面を移動する時、パラメーがを渡す方法について見てみましょう。次のコマンドを使ってプロジェクトを準備します。
flutter create parameters
ナビゲーションや画面の構成
ナビゲーションと画面を構成するため、まず、lib/main.dartファイルを開いて下記のように修正します。
import 'package:flutter/material.dart';
import 'package:parameters/home.dart';
import 'package:parameters/second.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: 'home',
routes: {
'home': (context) => const Home(),
'second': (context) => const Second(),
},
);
}
}
画面を担当するウィジェットであるhome.dartとsecond.dartを後で作る予定です。次のように後で作る画面ウィジェットを持って来て、
...
import 'package:parameters/home.dart';
import 'package:parameters/second.dart';
...
次のようにナビゲーションを構成します。
...
initialRoute: 'home',
routes: {
'home': (context) => const Home(),
'second': (context) => const Second(),
},
...
パラメータを渡す
最初の画面であるhome画面ウィジェットを作るためlib/home.dartファイルを作って次のように修正します。
import 'package:flutter/material.dart';
import 'package:parameters/second.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HOME'),
),
body: Center(
child: TextButton(
child: Text('Go to Second screen'),
onPressed: () {
Navigator.pushNamed(
context,
'second',
arguments: SecondScreenArguments(number: 5),
);
},
),
),
);
}
}
ここで次の画面であるsecondに移動する部分を詳しく見ると、次のようなコードを使ってることが分かります。
...
Navigator.pushNamed(
context,
'second',
arguments: SecondScreenArguments(number: 5),
);
...
SecondScreenArgumentsは後で作るsecond.dartファイルに次のように宣言されるクラスです。
...
class SecondScreenArguments {
final int number;
SecondScreenArguments({required this.number});
}
...
このように画面間渡すパラメータのタイプを定義してNavigator.pushNamedのargumentsで渡します。
パラメータを受ける
次はhome画面ウィジェットからパラメータを受けて画面に表示するsecond画面ウィジェットを作ってみましょう。lib/second.dartファイルを作って次のように修正します。
import 'package:flutter/material.dart';
class SecondScreenArguments {
final int number;
SecondScreenArguments({required this.number});
}
class Second extends StatelessWidget {
const Second({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final args =
ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;
return Scaffold(
appBar: AppBar(
title: Text('SECOND'),
),
body: Center(
child: Text('${args.number}'),
),
);
}
}
上でもみましたが、まず、パラメータのタイプを定義するためSecondScreenArgumentsクラスを宣言しました。
...
class SecondScreenArguments {
final int number;
SecondScreenArguments({required this.number});
}
...
このように宣言したタイプを持って次のようにModalRoute.of(context)!.settings.argumentsを使ってパラメータを受けます。
...
final args = ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;
...
最後にこのようにこのように受けたパラメータで使うデータをargs.numberのようにアクセスして使います。
...
child: Text('${args.number}'),
...
完了
これでFlutterでナビゲーションを使って画面を移動する時、画面間データを渡す方法についてみてみました。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
