🧩

Flutter--下ごしらえして冷凍して解凍して食べる(UIのclass化)

2023/01/31に公開

個人開発でTextFormFieldをたくさん使うので

フォーマットをあらかじめ作って使い回すという記事を以前書いた。
https://qiita.com/dongri727/items/18b0261cbce6b2e81455
その後、入力内容によって色違いを作りたくなって、最初は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^)/

Flutter大学

Discussion