Android 之类的 Flutter 中的文本字段验证？答案

【问题标题】：Android like Textfield Validation in Flutter?Android 之类的 Flutter 中的文本字段验证？
【发布时间】：2019-09-14 10:49:45
【问题描述】：

我想在Flutter 中实现类似TextField 验证的Android。

我尝试了Flutter 的TextField 文档，InputDecoration 的属性为errorText，但在textfield 的底部显示错误。我想在 Flutter 中实现类似下面的东西

【问题讨论】：

见this
@Sniffer 我知道如何在原生 Android 中做到这一点。我的问题是如何在 Flutter 中做到这一点？
stackoverflow.com/a/53426227/8101634
Textfield validation in Flutter的可能重复
@Sniffer 不，它不是重复的

标签： android flutter textfield

【解决方案1】：

您可以在Stack 中使用TextFormField 和自定义Tooltip 来实现此效果。在TextFormField 的decoration 属性中，您可以使用InputDecoration 类的suffixIcon 属性来传递错误图标。

当验证错误发生时，您可以使用bool 变量来显示/隐藏工具提示消息。

TextFormField 的示例代码：

  TextFormField(
    decoration: InputDecoration(
      //Set the different border properties for a custom design
      suffixIcon: IconButton(
        icon: Icon(Icons.error, color: Colors.red),
        onPressed: () {
          setState(() {
            showTooltip = !showTooltip; //Toggles the tooltip
          });
        },
      ),
    ),
    validator: (String value) {
      if(value.isEmpty) {
        setState(() {
          showTooltip = true; //Toggles the tooltip
        });
        return "";
      }
    }
  );

您可以将上述代码与您的自定义工具提示小部件代码一起使用Stack 包装，以实现错误工具提示效果。

下面是一个快速工作的例子。您可以设计自己的自定义工具提示小部件并在代码中使用它。

例子：

class LoginAlternate extends StatefulWidget {
  @override
  _LoginAlternateState createState() => _LoginAlternateState();
}

class _LoginAlternateState extends State<LoginAlternate> {

  GlobalKey<FormState> _formKey = GlobalKey();
  bool showTooltip = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Container(
        padding: EdgeInsets.symmetric(
          horizontal: 100,
          vertical: 100
        ),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              Stack(
                alignment: Alignment.topRight,
                overflow: Overflow.visible,
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      border: OutlineInputBorder(
                        borderSide: BorderSide.none
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(Icons.error, color: Colors.red,),
                        onPressed: () {
                          setState(() {
                            showTooltip = !showTooltip;
                          });
                        },
                      ),
                      hintText: "Password"
                    ),
                    validator: (value) {
                      if(value.isEmpty) {
                        setState(() {
                          showTooltip = true;
                        });
                        return "";
                      }
                    },
                  ),
                  Positioned(
                    top: 50,
                    right: 10,
                    //You can use your own custom tooltip widget over here in place of below Container
                    child: showTooltip
                    ? Container(
                      width: 250,
                      height: 50,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all( color: Colors.red, width: 2.0 ),
                        borderRadius: BorderRadius.circular(10)
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: Center(
                        child: Text(
                          "Your passwords must match and be 6 characters long.",
                        ),
                      ),
                    ) : Container(),
                  )
                ],
              ),
              RaisedButton(
                child: Text("Validate"),
                onPressed: () {
                  _formKey.currentState.validate();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

我想你说的是ToolTip

你可以使用这个library 或者通过 Flutter doc

new Tooltip(message: "Hello ToolTip", child: new Text("Press"));

你可以使用库 super_tooltip #

【讨论】：

【解决方案3】：

您可以使用覆盖小部件自定义此类错误。可以使用覆盖小部件显示错误，并且可以使用 TextField 的 inputDecoration 更改错误图标。

这里是理解叠加小部件的链接—— https://medium.com/saugo360/https-medium-com-saugo360-flutter-using-overlay-to-display-floating-widgets-2e6d0e8decb9

【讨论】：

会试一试，让你知道