Android 喜欢 Flutter 中的文本字段验证？

Question

我想在 Flutter 中实现 Android 等 TextField 验证。

我尝试了 Flutter 的 TextField 文档，InputDecoration 的属性为 errorText，但在 [=] 的底部显示错误17=]。我想在 Flutter

中实现类似下面的东西

Answer 1

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

这里是 link 用于理解覆盖小部件的-- https://medium.com/saugo360/https-medium-com-saugo360-flutter-using-overlay-to-display-floating-widgets-2e6d0e8decb9

Answer 2

我认为你在谈论 ToolTip

你可以使用这个library or Go through Flutter doc

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

你可以使用库 super_tooltip #

Answer 3

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

并且您可以使用 bool 变量来 show/hide 发生验证错误时的工具提示消息。

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

Android 喜欢 Flutter 中的文本字段验证？

Android like Textfield Validation in Flutter?

android

textfield

flutter