okaryo.log

FlutterのTextFieldのラベルを常に上部表示にしたり位置を変えたりする | okaryo.log

FlutterのTextFieldのラベルを常に上部表示にしたり位置を変えたりする

    #Flutter

やりたいこと

以下を実現したい場合のFlutter側の実装を紹介する。

  • TextFieldにフォーカスが当たってなくてもラベルを上部に表示させる
  • ラベル位置を変える

以下のようなUIを組むことができる。

目標成果物

ラベルを上部に表示させる

InputDecorationクラスのfloatingLabelBehaviorプロパティにFloatingLabelBehavior.alwaysを指定することで実現できる。

const TextField(
  decoration: InputDecoration(
    floatingLabelBehavior: FloatingLabelBehavior.always,
    labelText: 'Label Name 1',
    hintText: 'Hint Text 1',
    hintStyle: TextStyle(color: Colors.grey),
    border: OutlineInputBorder(),
  ),
),

FloatingLabelBehaviorenumであり、他の値としてはデフォルトのautoneverがある。

ラベル位置を変える

InputDecorationクラスのfloatingLabelAlignmentプロパティにFloatingLabelAlignment.centerを指定することで実現できる。

const TextField(
  decoration: InputDecoration(
    floatingLabelAlignment: FloatingLabelAlignment.center,
    labelText: 'Label Name 2',
    hintText: 'Hint Text 2',
    hintStyle: TextStyle(color: Colors.grey),
    border: OutlineInputBorder(),
  ),
),

FloatingLabelAlignmentenumではないが、定数にcenterstartがあるのでenumっぽく使うことができる。


関連記事
最新記事
プロモーション

This site uses Google Analytics.