いちの
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- StatelessWidgetへのデータの渡し方と受け取り方
- StatefulWidgetへのデータの渡し方と受け取り方
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
StatelessWidgetへのデータの渡し方と受け取り方
StatelessWidgetは、不変の(変更不可能な)ウィジェットを作成するために使用されます。画面遷移時に値を渡すことは、アプリケーション内の異なるページ間で情報を共有する基本的な方法の一つです。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('画面1'),
),
body: Center(
child: ElevatedButton(
child: Text('次の画面へ'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(companyName: '株式会社メモリアインク'),
),
);
},
),
),
);
}
}
class DetailsPage extends StatelessWidget {
final String companyName;
DetailsPage({required this.companyName});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('画面2'),
),
body: Center(
child: Text('$companyName'),
),
);
}
}
解説
Navigator.push
メソッドを使用して、新しい画面に遷移します。MaterialPageRoute
のbuilder
プロパティに、遷移先のDetailsPage
ウィジェットと、渡す値(この例ではcompanyName
)を指定します。DetailsPage
ウィジェットは、コンストラクタを通して渡された値を表示します。
動作確認
それでは実際の動作を見てみましょ〜
StatefulWidgetへのデータの渡し方と受け取り方
StatefulWidgetは、動的な(変更可能な)ウィジェットを作成するために使用されます。StatefulWidgetにデータを渡す方法も、基本的にはStatelessWidgetと同様ですが、StatefulWidgetは状態を保持することができるため、より複雑なロジックを実装することが可能です。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('画面1'),
),
body: Center(
child: ElevatedButton(
child: Text('次の画面へ'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(companyName: '株式会社メモリアインク'),
),
);
},
),
),
);
}
}
class DetailsPage extends StatefulWidget {
final String companyName;
DetailsPage({required this.companyName});
@override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('画面2'),
),
body: Center(
child: Text('${widget.companyName}'),
),
);
}
}
解説
DetailsPage
はStatefulWidget
であり、渡された値はwidget.companyName
を通じてアクセス可能です。StatefulWidget
内での値の管理と更新が可能になります。
ウィジェットについてもっと知りたいという方は、以下個人的に自信作の記事をぜひ!
【2024年最新】スマホアプリ開発会社がオススメするFlutterで使うべきウィジェット(Widget)Top 10
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです この記事を読むことでわかること Flutter開発において最も役立…
動作確認
それでは実際の動作を見てみましょ〜
まとめ
この記事では、Flutter を使用して、StatelessWidgetとStatefulWidgetにデータを渡し受け取る方法を詳細に解説しました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
【Flutter】Navigatorを使った簡単な画面遷移(push、pop)
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです今回はFlutterでNavigatorを使った簡単な画面遷移について解説…
コメント
コメント一覧 (1件)
[…] […]