こんにちは sohnishi です。
Flutterで開発している時に、下記のような場面が頻繁にあります。
- Widgetが肥大化してきて管理しずらくなった。
- 同じWidgetを他の画面でも利用したい。
これを解決するために、Widgetを他ファイルに切り分けて、
色んな画面からすぐに呼び出せるようにしたいと思います。
まずはWidgetを他ファイルに切り分けます。
【parts_widget.dart】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; class PartsWidget extends StatelessWidget { const PartsWidget({required this.text}); final String text; @override Widget build(BuildContext context) { return Container( height: 25, width: 300, child: Text(text), ); } } |
今回は簡潔に説明するため、引数でString型を一つだけ受け取るWidgetを作成しました。
あとは画面側のソースコードからこのWidgetを呼び出してあげるだけです。
【screen.dart】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import 'package:flutter/material.dart'; import 'package:sample/widgets/parts_widget.dart'; class Screen extends StatelessWidget { const Screen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("sample") ), ), body: Column( children: [ const PartsWidget(text:"SAMPLE"), ], ) ); } } |
シンプルにPartsWidgetのみを表示している画面です。
parts_widget.dartをimportし、PartsWidgetを表示したい場所に引数とともに記述してあげるだけです。
Widgetは肥大化してくると管理できなくなってしまいます。
人によって様々な開発手法があると思いますが、私はWidgetを小分けにして管理する方法がしっくりきました。
ぜひ参考になれば幸いです！
“【Flutter】Widgetを切り分ける（共通化）” への 0 件のフィードバック