Flutter TextFieldのカスタマイズ


Published on May 24, 2020

FlutterのTextFieldを色々カスタマイズするメモ。


ラベルを表示


TextField(
  decoration: InputDecoration(
    labelText: 'Title'
  ),
),

labelText


ヘルパーテキストを表示


TextField(
  decoration: InputDecoration(
    hintText: 'ヘルパーテキスト'
  ),
),

labelText


キーボードを数字入力形式に


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),
    ),
  ),
),

focusedBorder



参考 URL


api.flutter.dev - TextInputFormatter class

stackoverflow - How to use InputFormatter on Flutter TextField?


If you like it, share it!