Flutter TextFieldのカスタマイズ
Published on May 24, 2020
FlutterのTextFieldを色々カスタマイズするメモ。
ラベルを表示
TextField(
decoration: InputDecoration(
labelText: 'Title'
),
),
ヘルパーテキストを表示
TextField(
decoration: InputDecoration(
hintText: 'ヘルパーテキスト'
),
),
キーボードを数字入力形式に
TextField(
keyboardType: TextInputType.number,
),
複数行入力形式に
TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
),
右寄せ
TextField(
textAlign: TextAlign.right,
),
数字入力に限定
import 'package:flutter/services.dart';
TextField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
WhitelistingTextInputFormatter.digitsOnly,
],
),
入力文字数を制限
import 'package:flutter/services.dart';
TextField(
inputFormatters: <TextInputFormatter>[
LengthLimitingTextInputFormatter(3),
],
),
TextFieldに外枠をつける
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.greenAccent, width: 1),
),
),
),
TextFieldフォーカス時に外枠をつける
TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.greenAccent, width: 1),
),
),
),
参考 URL
api.flutter.dev - TextInputFormatter class
stackoverflow - How to use InputFormatter on Flutter TextField?
If you like it, share it!