【Flutter】同じ部品は共通化！！Componentを作って同じコードを使い回そう

はじめに

同じコードを何回も書かなきゃいけない機会があり、
どうやったら簡単にできるか考えてComponentにたどり着いた。

componentするメリット

・コードが冗長化するのを防ぐ。（コードが長くなると読んでて疲れる）
・単純に時短になる。（同じコードを書かないため）

必要なものを洗い出す

・componentフォルダーを作り、input_form.dartを作成する。
・同じプロパティを書き出す。
・プロパティの型を調べる。
・引数で値を渡せるようにする。
・実装してみて本当に前と変わっていないか確認する。

componentフォルダーを作成しinput_form.dartを作成する。

componentはまとめておくとわかりやすいのでフォルダーを作成し、
その中にinput_form.dartを作成する。

同じプロパティを書き出す

      TextFormField(
                cursorColor: const Color.fromRGBO(131, 124, 124, 1),
                decoration: const InputDecoration(
                  labelText: 'IDまたはメールアドレス',
                  fillColor: Color.fromRGBO(240, 240, 240, 1),
                  filled: true,
                  border: InputBorder.none,
                ),
              ),
              const SizedBox(
                height: 8,
              ),
       TextFormField(
                cursorColor: const Color.fromRGBO(131, 124, 124, 1),
                decoration: const InputDecoration(
                  labelText: 'パスワード',
                  fillColor: Color.fromRGBO(240, 240, 240, 1),
                  filled: true,
                  border: InputBorder.none,
                ),
              ),

・labelTextの文字列以外は一緒なのでlabelTextを変更すれば問題なさそう。

プロパティの型を調べる

今回はlabelTextを用いるので型を調べます。
labelTextはString?型なので覚えておきます。

引数で値を渡せるようにする

input_form.dartでstatelessWidgetでcomponentを作成する。

import 'package:flutter/material.dart';

class InputForm extends StatelessWidget {
  const InputForm({
    super.key,
    this.labelText,
  });
  final String? labelText;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      cursorColor: const Color.fromRGBO(131, 124, 124, 1),
      decoration: InputDecoration(
        labelText: labelText,
        fillColor: const Color.fromRGBO(240, 240, 240, 1),
        filled: true,
        border: InputBorder.none,
      ),
    );
  }
}

実装してみて前のコードと比べてみる。

前のコード

      TextFormField(
                cursorColor: const Color.fromRGBO(131, 124, 124, 1),
                decoration: const InputDecoration(
                  labelText: 'IDまたはメールアドレス',
                  fillColor: Color.fromRGBO(240, 240, 240, 1),
                  filled: true,
                  border: InputBorder.none,
                ),
              ),
              const SizedBox(
                height: 8,
              ),
       TextFormField(
                cursorColor: const Color.fromRGBO(131, 124, 124, 1),
                decoration: const InputDecoration(
                  labelText: 'パスワード',
                  fillColor: Color.fromRGBO(240, 240, 240, 1),
                  filled: true,
                  border: InputBorder.none,
                ),
              ),

component後のコード

       InputForm(
                labelText: 'IDまたはメールアドレス',
              ),
              SizedBox(
                height: 8,
              ),
              InputForm(
                labelText: 'パスワード',
              ),

参考文献

https://zenn.dev/brenpy_monster/books/99f265a2611f64/viewer/4689b4
https://pryogram.com/flutter/component-widget/