具有动画提示/标签的TextField

Question

我想实现一个包含TextFields的表单。每个字段都有一个标签/提示。我希望提示动画并在用户开始键入时成为标签。这是标准的Material设计模式，因此我希望它可以由标准的Widgets实现。

像这样：

Answer 1

在 Flutter 中，hint 和 label 都以两种不同的方式运行，hintText 将显示为固定的，但labelText 将（双作用）显示为提示，当光标获得焦点时，它会动画到顶部。

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

Answer 2

labelText 和 HintText 之间的区别。

labelText：如果输入字段为空或未聚焦，则显示输入字段顶部的标签。当获得焦点时，labelText 移动到输入字段上方。

hintText：仅向用户显示提示。

TextField(decoration: InputDecoration(labelText: 'labelText'),),
TextField(decoration: InputDecoration(hintText: 'hintText'),),
TextField(decoration:InputDecoration(hintText: 'both', labelText: 'both'),),

更多信息 - TextFormField 占位符

Answer 3

事实证明这很简单。

InputDecoration 有一个labelText参数，它可以满足我的需求。

例如

TextField(decoration: InputDecoration(labelText: 'Full name')),