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

Question

I've written sample code that displays a message if user clicks on login button, when there is no string inside the TextFormField. It will display a message below the TextFormField alerting the user to enter an email. What I want to be able to do is display that message, somewhere else, perhaps below the login button.

Ideally, I have a login and password text field, and instead of displaying the message below each text field, I want to display the message below the login button. Any help would be appreciated! I looked into text controllers, but don't know how to implement so that if the validator passes with no message, it keeps the widgets the same heights, but only expands the height when validator fails displays message.

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

Answer 1

Thanks to the help of LOfG ( In Flutter, I'm trying to dynamically update my column widget based on Text Controller. How do I do this? ), I got inspired with the answer.

The following code does the following:

• Uses StreamBuilder to rebuild with every new event
• Displays message underneath the login button only if validation fails, otherwise return empty container
• When user clicks on the username or password, the message disappears if not empty
• Uses snapshot.data to log in user (can use Provider with FirebaseAuth here)

The reason why I wanted this functionality, is to display error messages at a certain location, rather than in the text fields.

import 'package:flutter/material.dart';
import 'dart:async';

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> {
  @override
  void dispose() {
    _username.close();
    _password.close();
    super.dispose();
  }

  String validatorMessage;
  bool validate = false; //will be true if the user clicked in the    login button
  final _username = StreamController<String>(); //stream to   validate   the text
  final _password = StreamController<String>();

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          margin: EdgeInsets.symmetric(vertical: 5),
          padding: EdgeInsets.symmetric(horizontal: 15),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(29),
          ),
          //expose streambuilder to the column widget to use on multiple widgets
          child: StreamBuilder<String>(
              initialData: '',
              stream: _username.stream,
              builder: (context, usernameSnapshot) {
                return StreamBuilder<String>(
                    initialData: '',
                    stream: _password.stream,
                    builder: (context, passwordSnapshot) {
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          TextField(
                            onChanged: _username.add, //everytime the text changes a new value will be added to the stream
                            decoration: InputDecoration(
                              icon: Icon(Icons.person),
                              hintText: "Email",
                            ),
                          ),
                          TextField(
                            obscureText: true,
                            onChanged: _password.add, //everytime the text changes a new value will be added to the stream
                            decoration: InputDecoration(
                              icon: Icon(Icons.visibility),
                              hintText: "Password",
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.symmetric(vertical: 5),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(29),
                              child: RaisedButton(
                                padding: EdgeInsets.symmetric(vertical: 10),
                                //when user presses button, validate turns to true and we check snapshots to get the data for the entries
                                onPressed: () async {
                                  if (usernameSnapshot.data.isNotEmpty && passwordSnapshot.data.isNotEmpty) {
                                    try {
                                      //sign in with usernameSnapshot.data and passwordSnapshot.data
                                    } catch (e) {
                                      print(e);
                                    }
                                    validate = true;
                                  } else {
                                    setState(() {
                                      validate = true;
                                    });
                                  }
                                },
                                child: Text("Login"),
                              ),
                            ),
                          ),
                          if (usernameSnapshot.data.isEmpty &&validate == true) //checking the stream and if the user clicked in the button
                            Container(
                              alignment: Alignment.center,
                              child: Text(
                                'Check your e-mail and password.',
                                style: TextStyle(
                                  color: Colors.red,
                                ),
                              ),
                            )
                          else
                            Container()
                        ],
                      );
                    });
              })),
    );
  }
}

Answer 2

Consider using a Row instead of 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")))),)
    
            ]),
          ),
        );
      }
    }