web-dev-qa-db-ja.com

アニメーション化されたヒント/ラベルを持つTextField

TextFieldを含むフォームを実装したい。各フィールドにはラベル/ヒントがあります。ヒントをアニメーション化して、ユーザーが入力を開始したときにラベルになるようにしたい。これは標準のマテリアルデザインパターンなので、標準のウィジェットで実装されることを期待していました。

このようなもの： - enter image description here

flutterflutter-layoutflutter-animation
10
Frank Harper

それは非常に単純であることがわかりました。

InputDecorationにはlabelTextパラメータがあります。

例えば。

TextField(decoration: InputDecoration(labelText: 'Full name')),
12
Frank Harper

Flutterでは、ヒントとラベルの両方が2つの異なる方法で動作しますhintTextは固定として表示されますがlabelTextは（複動）になりますアニメーション化するヒントとして表示されますカーソルがフォーカスされているときの上部。

TextField(decoration: InputDecoration(
                          labelText: "Animatable hint",
                           hintText: "Inanimate hint")
                      )
)
4
Deva