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

Question

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

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

Answer 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();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}