在Flutter中，如何在表单外部即，在“提交”按钮下方输出TextFormField验证器文本？

问题描述

我编写了示例代码，当TextFormField中没有字符串时，如果用户单击登录按钮，则会显示一条消息。它将在TextFormField下面显示一条消息，提醒用户输入电子邮件。我想做的就是在其他地方（可能位于登录按钮下方）显示该消息。

理想情况下，我有一个登录名和密码文本字段，而不是在每个文本字段下方显示消息，而是要在登录按钮下方显示消息。任何帮助，将不胜感激！我研究了文本控制器，但不知道如何实现，因此，如果验证器通过而没有消息，它将使小部件保持相同的高度，但仅在验证器显示消息失败时才扩展高度。

import 'package:Flutter/material.dart';

final Color darkBlue = Color.fromARGB(255,18,32,47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
        body: Center(
          child: TextFieldExample(),),);
  }
}

class TextFieldExample extends StatefulWidget {
  @override
  _TextFieldExampleState createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State<TextFieldExample> {
  final _formKey = GlobalKey<FormState>();
  String email = '';

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 5),padding: EdgeInsets.symmetric(horizontal: 15),decoration: Boxdecoration(borderRadius: BorderRadius.circular(29)),child: Form(
        key: _formKey,child: Column(children: <Widget>[
          TextFormField(
            validator: (value) => value.isEmpty ? 'Enter an email' : null,onChanged: (value) {
              setState(() => email = value);
            },decoration:
                Inputdecoration(icon: Icon(Icons.person),hintText: "Email"),Container(
              margin: EdgeInsets.symmetric(vertical: 5),child: ClipRRect(
                  borderRadius: BorderRadius.circular(29),child: RaisedButton(
                      padding: EdgeInsets.symmetric(vertical: 10),onpressed: () async {
                        if (_formKey.currentState.validate()) {
                          //sign in;
                        }
                      },child: Text("Login")))),]),);
  }
}

解决方法

考虑使用Row代替Column

import 'package:flutter/material.dart';
    
    final Color darkBlue = Color.fromARGB(255,18,32,47);
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
            body: Center(
              child: TextFieldExample(),),);
      }
    }
    
    class TextFieldExample extends StatefulWidget {
      @override
      _TextFieldExampleState createState() => _TextFieldExampleState();
    }
    
    class _TextFieldExampleState extends State<TextFieldExample> {
      final _formKey = GlobalKey<FormState>();
      String email = '';
    
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.symmetric(vertical: 5),padding: EdgeInsets.symmetric(horizontal: 15),decoration: BoxDecoration(borderRadius: BorderRadius.circular(29)),child: Form(
            key: _formKey,child: Row(children: <Widget>[
              Flexible(
    
                child: TextFormField(
                  validator: (value) => value.isEmpty ? 'Enter an email' : null,onChanged: (value) {
                    setState(() => email = value);
                  },decoration:
                  InputDecoration(icon: Icon(Icons.person),hintText: "Email"),Expanded(
                flex: 0,child: Container(
                  margin: EdgeInsets.symmetric(vertical: 5),child: ClipRRect(
                      borderRadius: BorderRadius.circular(29),child: RaisedButton(
                          padding: EdgeInsets.symmetric(vertical: 10),onPressed: () async {
                            if (_formKey.currentState.validate()) {
                              //sign in;
                            }
                          },child: Text("Login")))),)
    
            ]),);
      }
    }

,

借助LOfG（In Flutter,I'm trying to dynamically update my column widget based on Text Controller. How do I do this?）的帮助，我得到了答案的启发。

以下代码执行以下操作：

• 使用StreamBuilder重建每个新事件
• 仅当验证失败时，才在登录按钮下方显示消息，否则返回空容器
• 当用户单击用户名或密码时，如果不为空，则消息消失
• 使用snapshot.data登录用户（可以在此处将Provider与FirebaseAuth一起使用）

之所以需要此功能，是为了在特定位置而不是在文本字段中显示错误消息。

import React,{ useState } from 'react';
import './Parent.css';


const Parent = () => {
    const [show,hide] = useState(true)

    const hideButton = () => {
        hide(false)
    }
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='one'>
                        <button show ={show} onClick={hideButton} className='btn btn-primary'>Click here</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Parent