🧩
Flutter--下ごしらえして冷凍して解凍して食べる(UIのclass化)
個人開発でTextFormFieldをたくさん使うので
フォーマットをあらかじめ作って使い回すという記事を以前書いた。
その後、入力内容によって色違いを作りたくなって、最初はformat用のfileで色ごとにクラスを作っていたのだけれど、三色、四色と増やしたくなると、そのfileがひどいことになる。それで色そのものも変数にしてしまえ、と思った。Colorも型なんだな
class TffFormat extends StatelessWidget {
final String hintText;
final ValueChanged<String> onChanged;
final Color tffColor1;
final Color tffColor2;
final Color tffColor3;
const TffFormat({
required this.hintText,
required this.onChanged,
required this.tffColor1,
required this.tffColor2,
required this.tffColor3,
Key? key,
}) : super(key: key);
Widget build(BuildContext context) {
return TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(5.0),
hintText: hintText,
hintStyle: TextStyle(
fontSize: 14,
color: tffColor1),
fillColor: tffColor2,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(
color: tffColor3,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: tffColor3,
width: 1.0,
),
),
),
onChanged: onChanged,
);
}
}
こんな形で下ごしらえして、
Padding(
padding: EdgeInsets.all(20.0),
child: TffFormat(
hintText: "year",
onChanged: (text) {
newYear = text;
},
tffColor1: Colors.black,
tffColor2: Colors.bluegGey,
tffColor3: Colors.grey,
)
),
こんな感じに食す。
問題と今後の課題
変数が増えた分、UIのfileがちょっともっさりする。色数が少ないなら、あまりメリットはない。
また、この指定法だと、選べる色数が減る。green[900]、とか書くとエラーになってしまう(なぜかなのか今の私にはわからない)。なので色調に凝りたければ、考えないといけない。それが今後の課題。
後日談
Colorsのgreen[900]はダメだけど、tffColor:Color(0xFFF0E68C)はいけると判明。これで色も自由自在\(^O^)/
Discussion