はじめに
同じコードを何回も書かなきゃいけない機会があり、
どうやったら簡単にできるか考えて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: 'パスワード',
),
参考文献
Discussion