Flutter3個目の投稿です。
備忘録として使用する予定ですが
皆さんの解決策にもなれば幸いです。
今回はFlutterの入力と値渡しに関して記載します。
目次
-完成イメージ
-1.構成
-2.入力と値渡し①_second_page.dartに変数を宣言
-3.入力と値渡し②_first_page.dartから変数を渡す
-4.入力と値渡し③_second_page.dartにTextを配置
-5.入力と値渡し④_first_page.dartにTextFieldを配置
-6.入力と値渡し⑤_first_page.dartにTextFieldで入力した値を変数に入れる
-7.全体コード
-参考文献
-最後に
完成イメージ
・前回の記事からファースト画面に入力画面を作成する
※下記前回記事
・テキスト入力後、ファースト画面のボタンを押せばセカンド画面へ
入力したテキストが反映される
1.構成
・セカンド画面に変数（name）を作成し、
セカンド画面遷移時に名前がないと無効になるようにする
・ファースト画面からセカンド画面へ行く処理内で変数(名前)を渡すようにする
・セカンド画面でTextを配置し、ファースト画面から渡された名前を表示する
・ファースト画面にTextFieldを配置し入力可能にする
・ファースト画面で入力した値を変数に入れ、セカンドページに反映するようにする
2.入力と値渡し①_second_page.dartに変数を宣言
・名前の変数（String name）を作成する
・セカンド画面を呼び出す時に引数（this.name）がないと無効になるように記載する
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
SecondPage(this.name);
final String name;
3.入力と値渡し②_first_page.dartから変数を渡す
・エラーが発生しているSecondPage()を引数を渡すように
名前を入れて修正する
例：SecondPage() → SecondPage('daichi')
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage('daichi'),//←ココ
),
);
},
child: const Text('次の画面へ'),
),
4.入力と値渡し③_second_page.dartにTextを配置
・Center Widget内にColumnを作成
・mainAxisAligment.centerでボタンとTextを真ん中に配置
※mainAxisAligment.start＝上部、mainAxisAligment.end＝下部に配置される
・変数nameをが入るTextを作成
・Text Widget内のstyle:TextStyle(fontsize:50,)で文字の大きさを変更する
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
name,
style: TextStyle(fontSize: 50),
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.pop(context);
},
child: const Text('前の画面へ'),
),
],
),
),
Text(name)は
ファースト画面の'daichi'→セカンド画面のSecondPage(this.name)→final String name
→Text(name)という順で値が渡されている
5.入力と値渡し④_first_page.dartにTextFieldを配置
・Center Widget内にColumnを作成
・mainAxisAligment.centerでボタンとTextを真ん中に配置
・TextFieldを作成
・TextField Widget内にonChanged: (text){}を記載する
※{}内にprint(text);を記載すればコード確認ができる
・Center Widget内にPaddingを作成し両余白を調整する
・FirstPage class内にテキストの変数を作成
body: Center(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
onChanged: (text) {
nameText = text;
},
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(nameText),
),
);
},
child: const Text('次の画面へ'),
),
],
),
),
),
6.入力と値渡し⑤_first_page.dartにTextFieldで入力した値を変数に入れる
・FirstPage classにTextFieldで入力した値の変数（String nameText）を作成する
・onChanged: (text){}内に代入して入力したTextがnameTextに入るようにする
・SecondPage('daichi'）をSecondPage(nameText）にして
入力したTextがSecondPageに値渡しできるようにする
class FirstPage extends StatelessWidget {
String nameText = '';//←ココ
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('ファースト'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
onChanged: (text) {
nameText = text;//←ココ
},
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(nameText),//←ココ
),
);
},
child: const Text('次の画面へ'),
),
],
),
),
),
);
}
}
これで完成！！！
7.全体コード
import 'package:flutter/material.dart';
import 'package:introduction3_input_and_passing_by_value/first_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: FirstPage(),
);
}
}
import 'package:flutter/material.dart';
import 'package:introduction3_input_and_passing_by_value/second_page.dart';
class FirstPage extends StatelessWidget {
String nameText = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('ファースト'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
onChanged: (text) {
nameText = text;
},
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(nameText),
),
);
},
child: const Text('次の画面へ'),
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
SecondPage(this.name);
final String name;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text('セカンド'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
name,
style: TextStyle(fontSize: 50),
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.pop(context);
},
child: const Text('前の画面へ'),
),
],
),
),
);
}
}
参考文献
Flutter大学. 「Flutter超入門2022】③入力フォームに入れた値を次の画面に渡す【Flutter3.0】」. YouTube. 2022/06,https://www.youtube.com/watch?v=Iyy4ceBaAjY,
（参照 2024-06-20）
Flutter. 「TextField class」. Flutter. 更新日不明,
https://api.flutter.dev/flutter/material/TextField-class.html, (参照 2024-06-20)
最後に
・反映できない場合は、更新をすると上手く行くときがあります
・コードが多いところには//←ココを付けて変更点をわかりやすくしました
・3投稿目で大まかなフォーマットができ、復習速度が上がってます！
（多分30分〜1時間くらい？笑）