Sakutech blog

Privacy PolicyArchive

Tech Topics

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!