如何像下面的模拟一样在 Flutter 教科书中对文本框提示进行分层？

Question

我正在为我正在开发的 Flutter 移动应用程序制作引导屏幕，我想让我的文本框看起来像下面的模拟： The desired goal

我已经创建了大部分文本框，但我不知道如何在文本框中输入文本时将提示移动到文本框的顶部。到目前为止，我有以下表示，有人知道我该怎么做吗？ My current implementation

Answer 1

如果我没有正确理解你的问题。你想要的叫 labelText 和 floatingLabelBehavior: FloatingLabelBehavior.auto

示例

    TextField(
              decoration: InputDecoration(
              labelText: "Username *",
              floatingLabelBehavior: FloatingLabelBehavior.auto,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(8.0))
                ),
            )
          )

Answer 2

你可以通过

Container(
  margin: EdgeInsets.all(20),
  child: TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Full Name',
    ),
  ),
),

样本：

如何像下面的模拟一样在 Flutter 教科书中对文本框提示进行分层？

How do I layer the text box hint in a Flutter text book like in the mock below?

mobile

user-interface

frontend

dart

flutter