【Flutter】Widgetを切り分ける（共通化）

こんにちは　sohnishi　です。

Flutterで開発している時に、下記のような場面が頻繁にあります。

Widgetが肥大化してきて管理しずらくなった。
同じWidgetを他の画面でも利用したい。

これを解決するために、Widgetを他ファイルに切り分けて、

色んな画面からすぐに呼び出せるようにしたいと思います。

まずはWidgetを他ファイルに切り分けます。

【parts_widget.dart】

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),
    );
  }
}

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】

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"),
        ],
      )
    );
  }
}

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を小分けにして管理する方法がしっくりきました。

ぜひ参考になれば幸いです！

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル