目次
今回のテーマは「値の受け渡し」です
Flutterではほとんどすべてのものがウィジェットですので, 値の受け渡しも
コンストラクタで受け渡す
だけで済みます. コンストラクタとは, インスタンスを生成するときに自動的に実行されるメソッドのことで, ここで初期設定などを行います. 例えば, screen1で入力した値をscreen2で表示したい場合,
screen2のコンストラクタで値を受け取れるように設定し, screen1の値をそこに代入する
形で値の受け渡しが行われます. (うーん. いまいちわかりにくい説明ですね笑)
実際に見てみましょう. 次のように, TextFormFieldに入力された「Hello, Flutter!」という文字列を次の画面に受け渡すアプリを作成していきます.
もちろん, 全角でも受け渡すことができます.
Pierrot半角や全角を気にせず値を渡せるというのはすごくストレスがないです！
Statelessウィジェットで値を受け渡す！
まずはレイアウトは気にせず, 受け渡しの実装だけ行います.
今回のファイルの保存場所の関係は, 以下のようになっています.
まずは, main.dartからです.
import 'package:flutter/material.dart';
import '/screens/home_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "最初の画面",
home: HomeScreen(),
);
}
}最初のHomeScreenは次のようになります.
import 'package:flutter/material.dart';
import 'next_screen.dart';
class HomeScreen extends StatelessWidget {
final TextEditingController inputText = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: inputText,
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
RaisedButton(
child: Text("次の画面へ"),
onPressed: () => _nextScreen(context),
),
],
),
),
);
}
// 画面遷移
_nextScreen(BuildContext context) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NextScreen(inputText: inputText.text,
),
),
);
}
}inputText.textに受け渡される値が格納されています.
import 'package:flutter/material.dart';
class NextScreen extends StatelessWidget {
NextScreen({this.inputText});
final dynamic inputText;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(inputText),
),
);
}
}次の部分がコンストラクタと呼ばれている部分で, ここで初期設定を行います.
NextScreen({this.inputText});受け取る側がStatefulウィジェットの場合
受け取る側がStatelessウィジェットの場合, next_screen.dartを次のように書き換えます.
import 'package:flutter/material.dart';
class NextScreen extends StatefulWidget {
NextScreen({this.inputText});
final dynamic inputText;
@override
_NextScreenState createState() => _NextScreenState();
}
class _NextScreenState extends State<NextScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(widget.inputText),
),
);
}
}HomeScreen()から値を受け取ることができるよう,
NextScreen({this.inputText});
final inputText;inputTextを用意しておきます. テキストの引き渡しは,
widget.inputTextで行われます.
コメント