Во Flutter я пытаюсь динамически обновить виджет столбца на основе текстового контроллера. Как мне это сделать?

Question

Я пытаюсь показать сообщение, только если текстовый контроллер не проверен, в противном случае показывать пустой контейнер. Как мне перерисовать виджет на основе того, что выводит текстовый контроллер?

Требуемое поведение:

• Когда пользователь нажимает кнопку входа в систему, flutter проверяет, пусто ли поле имени пользователя.
• Если пусто, отобразить сообщение под кнопкой входа.
• Когда пользователь снова щелкает текстовое поле и вводит хотя бы один символ, сообщение исчезает и возвращает пустой контейнер.

Код:

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> {
  @override
  void initState() {
    super.initState();
    _username.addListener(() {
      setState(() {});
    });
  }

  final _username = TextEditingController();
  bool hasMessage = false;
  String email = '';
  String validatorMessage;

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 5),
      padding: EdgeInsets.symmetric(horizontal: 15),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(29)),
      child: Column(children: <Widget>[
        TextField(
          controller: _username,
          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 (_username.text.isNotEmpty) {
                        //do sign in
                      } else {
                        hasMessage = true;
                        validatorMessage = 'Check username or password';
                      }
                    },
                    child: Text("Login")))),
        //Change something here, in order to dynamically check and update
        if (hasMessage == false)
          Container()
        else
          Container(
              alignment: Alignment.center,
              child:
                  Text(validatorMessage, style: TextStyle(color: Colors.red))),
      ]),
    );
  }
}


 

Answer 1

Чтобы динамически изменять виджет, отображающий текст, вам необходимо использовать StreamBuilder, который перестраивается для каждого нового события:

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

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      margin: EdgeInsets.symmetric(vertical: 5),
      padding: EdgeInsets.symmetric(horizontal: 15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(29),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextField(
            onChanged: _usernameController.add, //everytime the text changes a new value will be added to the stream
            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: () {
                  setState(() {
                    validate = true; 
                  });
                },
                child: Text("Login"),
              ),
            ),
          ),
          StreamBuilder<String>(
            initialData: '',
            stream: _usernameController.stream,
            builder: (context, snapshot) {
              if (snapshot.data.isEmpty && validate == true) { //checking the stream and if the user clicked in the button
                return Container(
                  alignment: Alignment.center,
                  child: Text(
                    'Check your e-mail and password.',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                );
              } else {
                return Container();
              }
            },
          ),
        ],
      ),
    ),
  );
}

@override
void dispose() {
  _usernameController.close();
  super.dispose();
}