Flutter Widgetを外部ファイルで定義する

こんにちは、lisです！

FlutterのWidgetを別のファイルに自分で定義する方法です。

FlutterはWidgetを構築していくとバリバリにネストが深くなっていく傾向がありますよね……

Widgetの定義ができれば、これが解消されたり管理しやすくなったりするかもしれません。

新規ファイルにWidgetを定義する

今回は例としてnew_file.dartというファイルを作成します。

下記のように作成しました。

// new_file.dart
import 'package:flutter/material.dart';

class MyText extends StatelessWidget {
  MyText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('hoge');
  }
}

今回はStatelessWidgetで作成しましたが、作りたいものによってはStatefulWidgetで作成するなどが必要な場合もありそうです。

widgetをUI構成に追加する

UI構成に追加したい場所に、作成したwidgetを追加きましょう！

今回は「main.dart」に追加しました。

// main.dart
import 'package:blueprint/new_file.dart'; // 追加
...
class _AppState extends State<App> {
  Widget build(BuildContext context) {さしさすさす
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: MyText()  // 追加
      ),
    );
  }
}

ひとまとまりのwidget群を定義できる！

今回の例ではTextを1つ置いただけですが、main.dartでのwidget配置同様、widgetを組み合わせて作成することが可能です。

なので「メニューバー部分を担うwidgetの塊」のようにブロックごとで定義すれば、ソースも簡素化されるしわかりやすくなります。

Flutterをはじめて思った感想は

「ネストすんごいな」

でした。

widgetの定義でこれは少し解消できそうですね！

あとがき

Flutter Widgetを外部ファイルで定義するでした！

クラス/機能分割的な観点でもできればこれを積極的にやっていった方がいいのかなーと思いました。

www.lisz-works.com

www.lisz-works.com