Flutter textfield如何定位浮动标签和错误标签答案

【问题标题】：Flutter textfield how to position floating label and error labelFlutter textfield如何定位浮动标签和错误标签
【发布时间】：2022-01-17 01:38:31
【问题描述】：

我有一个颤振设计

当用户选择文本字段时，应使用蓝色填充，然后浮动标签填充在边框上方，文本字段内容填充应更改。
当文本字段出现错误时，浮动标签和错误标签都会改变颜色，我必须定位它们。

谁能帮我实现这个作为可重用的文本字段

请参考图片。

带动画的图像

【问题讨论】：

你能包含你的代码-sn-p吗？
我没有任何可用的代码 sn-p 我是 Flutter 的新手，还在学习中
下面的答案让你满意吗？希望他能提供更新
是的，但不完全可以参考 gif 并帮助我。我需要实现类似 gif 的东西
我认为问题更新打破了他的回答，

标签： flutter dart flutter-layout textfield

【解决方案1】：

而不是使用label 文本，我会考虑在TextFormField() 上方使用Text()。你可以试试下面的代码来得到你的结果

FocusNode _focus = FocusNode();
  bool _isValidate = true;

  GlobalKey<FormState> _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: EdgeInsets.all(15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                  padding: EdgeInsets.only(bottom: 5, left: 11),
                  child: Text("Field Value",
                      style: TextStyle(
                          color:
                              _focus.hasFocus ? Colors.blue : Colors.white))),
              TextFormField(
                focusNode: _focus,
                onTap: () {
                  FocusScope.of(context).requestFocus();
                },
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(50)),
                    filled: true,
                    fillColor:
                        _focus.hasFocus ? Colors.blue : Colors.transparent),
              ),
              Divider(),
              Padding(
                  padding: EdgeInsets.only(bottom: 5, left: 11),
                  child: Text("Field Value",
                      style: TextStyle(
                          color: _isValidate ? Colors.white : Colors.red))),
              Form(
                key: _key,
                child: TextFormField(
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(50)),
                      errorStyle:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.w400)),
                  validator: (val) {
                    if (val!.length >= 5) {
                      setState(() {
                        _isValidate = false;
                      });
                      return "Field Value";
                    } else {
                      setState(() {
                        _isValidate = true;
                      });
                      return null;
                    }
                  },
                ),
              ),
              Divider(),
              ElevatedButton(
                  onPressed: () {
                    final form = _key.currentState;
                    form!.validate();
                  },
                  child: Text("Submit"))
            ],
          )),
    );
  }

【讨论】：

有点对，但它应该动画我已经添加了 gif，请你看看并帮助我
您的第一个要求可以满足，但在第二个要求中，如果您使用标签，那么角边框将被隐藏。
我能够完成第一个要求但需要动画
正如我告诉你的，你可以得到带有背景颜色的动画，但如果有边框，它看起来就不一样了。