🍋

【Flutter】コンポーネント化でWidgetを共通管理→コードダイエット

2023/12/01に公開

Flutter

本記事を書いた理由

自分のため
（覚えてもすぐ忘れる…）

コンポーネント化でWidgetを管理するメリット

メリットは以下3点！
↓↓↓

・コードの記述が簡潔になり、コードの可読性が上がる（長ったらしいコードにならない）
・同じUIを共通化して使い回すことができるようになる（Widgetのリサイクル的な…「SDGsしてるぞ」ってなる）
・コンポーネント化を使いこなすことで、「なんかエンジニアっぽいことしてるな自分…」っていう気分になる

コンポーネント化の方法（２種類）

・classで管理する方法
・メソッドで管理する方法

classで管理する方法

①「再利用したいWidget」をクラス化したファイル
↓↓↓

BodyText.dart



class BodyText extends StatelessWidget {
  const BodyText({Key? key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text(
            'コンポーネント…',
          ),
          const Text(
            '…できた①？？？',
          ),
        ],
      ),
    );
  }
}

②「①再利用したいWidgetをクラス化したファイル」をWidgetとして利用するファイル
↓↓↓

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/BodyText.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'コンポーネントしよ❤️'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //「①再利用したいWidgetをクラス化したファイル」をbuild関数内のbodyにセットする！
      body: BodyText(), 
    );
  }
}

メソッドで管理する方法

①「再利用したいWidget」をメソッド化したコードを記述したファイル
↓↓↓

WidgetParts.dart

import 'package:flutter/material.dart';

Widget buildBodyText2() {
  return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text(
            'コンポーネント…',
          ),
          const Text(
            '…できた②？？？',
          ),
        ],
      ),
    );
}

②「①再利用したいWidgetをメソッド化したコードを記述したファイル」をWidgetとして利用するファイル
↓↓↓

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/WidgetParts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'コンポーネントしよ❤️'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //「①再利用したいWidgetをクラス化したファイル」をbuild関数内のbodyにセットする！
      body: buildBodyText2(), 
    );
  }
}

参考文献

ちなみに第３の方法として「プロパティとして切り出す」ということもできるが、
Flutterの強みであるホットリロードの恩恵を受けられないためお薦めはしないらしい（下記サイト参照）

まとめ

(最後にソッといいねボタンやバッジを贈るボタンを押して頂けたら幸いですm(_ _)m)