Flutterのテキストフィールドをカスタマイズしたいなと思い、
いろいろ調べてみたときの備忘録(*´ω｀*)
背景や枠のデザインはInputDecorationでするっぽい
サンプル
TextFormField( controller: controller, // オートフォーカスさせるか autofocus: true, // テキストの揃え(上下) textAlignVertical: TextAlignVertical.center, // テキストの揃え(左右) textAlign: TextAlign.center, // カーソルの色 cursorColor: ..., // カーソルの先の太さ cursorWidth: 2, // 入力するテキストのstyle style: const TextStyle(fontSize: 40), // 行数の制約 minLines: 1, maxLines: 1, // 最大文字数の制約 maxLength: 20, // 枠や背景などのデザイン decoration: InputDecoration( // テキストの余白 contentPadding: const EdgeInsets.only(top: 80, left: 40), // 表示するラベルのテキスト labelText: "らべる", // 入力中のフローティングラベルのstyle floatingLabelStyle: const TextStyle( fontSize: ..., color: ..., fontWeight: FontWeight.bold, ), // 枠線: 入力中/フォーカス時 focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: ..., width: 1) ), // 枠線: 非フォーカス時 border: OutlineInputBorder(...), // 枠線: エラー時 errorBorder: OutlineInputBorder(...), // 枠線: enabled=true時 enabledBorder: OutlineInputBorder(...), // 枠線: enabled=false時 disabledBorder: OutlineInputBorder(...), // カウンターのスタイル counterStyle: const TextStyle(fontSize: 32), // テキスト右側のアイコン suffixIcon: Padding( // contentPaddingの影響を受けないので、余白を追加 padding: const EdgeInsets.only(right: 20), child: IconButton( onPressed: () => controller.clear(), icon: const Icon(Icons.clear, size: 32, color: ...), ), ), // テキスト左側のアイコン prefixIcon: ..., ), );
以上!!
