Flutter 未在 TextField 小部件上显示 BLoC 流值

Question

I am trying to make a screen where the user can add a person's birthday in one moment, but in another moment the same screen should load the data from Firebase and display in the TextFields the value loaded. I am using BLoC with stream to perform this. I can load the data from Firebase correctly and pass it to the screen with StreamBuilders in each TextField , but the values are not showing, even though the streams contains the correct value. In the same page I use some DropdownButtons for selectable data and they receive and show the value just fine. I'm not sure what am I doing wrong.

This is the code for each TextField :

class InputField extends StatelessWidget {

  final IconData icon;
  final String hint;
  final bool obscure;
  final TextInputType type;
  final Stream<String> stream;
  final Function(String) onChanged;

  InputField({this.icon, this.hint, this.obscure, this.type, this.stream, this.onChanged});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<String>(
      stream: stream,
      builder: (context, snapshot) {
        return TextField(
          onChanged: onChanged,
          keyboardType: type != null ? type : null,
          decoration: InputDecoration(
            icon: icon == null ? null : Icon(icon, color: Colors.white,),
            hintText: hint,
            hintStyle: TextStyle(color: Colors.white),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Theme.of(context).primaryColor)
            ),
            contentPadding: EdgeInsets.only(
              left: 5,
              right: 30,
              bottom: 30,
              top: 30
            ),
            errorText: snapshot.hasError ? snapshot.error : null
          ),
          style: TextStyle(color: Colors.white),
          obscureText: obscure,
        );
      }
    );
  }
}

This is where I initialize the input types:

                  return Padding(
                    padding: EdgeInsets.all(16.0),
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          InputField(
                            icon: Icons.person_outline,
                            hint: "Nome do aniversariante",
                            obscure: false,
                            type: TextInputType.text,
                            stream: _birthdayBloc.outName,
                            onChanged: _birthdayBloc.changeName,
                          ),
                          InputField(
                            icon: Icons.phone,
                            hint: "Telefone",
                            obscure: false,
                            type: TextInputType.text,
                            stream: _birthdayBloc.outPhone,
                            onChanged: _birthdayBloc.changePhone,
                          ),
                          InputField(
                            icon: Icons.email,
                            hint: "E-mail",
                            obscure: false,
                            type: TextInputType.text,
                            stream: _birthdayBloc.outEmail,
                            onChanged: _birthdayBloc.changeEmail,
                          ),
                          DropdownWidget(
                            isCenter: false,
                            icon: Icons.list,
                            arrowIcon: Icons.keyboard_arrow_down,
                            hint: "Selecione uma categoria",
                            items: _birthdayBloc.getCategoryList(),
                            stream: _birthdayBloc.outCategory,
                            onChanged: _birthdayBloc.changeCategory,
                          ),
                          DropdownWidget(
                            isCenter: false,
                            icon: Icons.notifications,
                            arrowIcon: Icons.keyboard_arrow_down,
                            hint: "Selecione a notificação",
                            items: _birthdayBloc.getNotificationList(),
                            stream: _birthdayBloc.outNotification,
                            onChanged: _birthdayBloc.changeNotification,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Expanded(
                                flex: 5,
                                child: DropdownWidget(
                                  isCenter: false,
                                  label: "Mês",
                                  icon: Icons.calendar_today,
                                  arrowIcon: Icons.keyboard_arrow_down,
                                  hint: "Selecione o mês",
                                  items: _birthdayBloc.getMonthsList(),
                                  stream: _birthdayBloc.outMonth,
                                  onChanged: _birthdayBloc.changeMonth,
                                ),
                              ),
                              Expanded(
                                flex: 5,
                                child: DropdownWidget(
                                  isCenter: false,
                                  label: "Dia",
                                  arrowIcon: Icons.keyboard_arrow_down,
                                  hint: "Selecione o dia",
                                  items: _birthdayBloc.getDaysList(),
                                  stream: _birthdayBloc.outDay,
                                  onChanged: _birthdayBloc.changeDay,
                                ),
                              ),
                            ],
                          ),
                          DropdownWidget(
                              isCenter: false,
                              label: "Ano de nascimento",
                              icon: Icons.perm_contact_calendar,
                              arrowIcon: Icons.keyboard_arrow_down,
                              hint: "Selecione o ano",
                              items: _birthdayBloc.getYearsList(),
                              stream: _birthdayBloc.outYear,
                              onChanged: _birthdayBloc.changeYear,
                              valueController: 'Não sei'
                          ),

Here is the code that retrieves the data from Firebase when the screen is loaded:

  Future<void> _loadSelectedBirthday(personId) async {
    String _userUid = await _getCurrentUserUid();

    await _firestore.collection('birthdays').document(_userUid).collection('birthdays').document(personId).get()
      .then((document) {
        _nameController.add(document.data["name"]);
        _phoneController.add(document.data["phone"]);
        _emailController.add(document.data["email"]);
        _categoryController.add(document.data["category"]);
        _notificationController.add(document.data["notification"]);
        _monthController.add(document.data["month"]);
        _dayController.add(document.data["day"]);
        _yearController.add(document.data["year"]);

        print(_nameController.value);
        print(_phoneController.value);
        print(_emailController.value);
        print(_categoryController.value);
        print(_notificationController.value);
        print(_monthController.value);
        print(_dayController.value);
        print(_yearController.value);

        _stateController.add(BirthdayState.READY);
      }).catchError((error) {
        print('ERROR => $error');
      });
  }

The output I get from the prints above is:

I/flutter (10907): Person Name
I/flutter (10907): 62999991234
I/flutter (10907): someemail@gmail.com
I/flutter (10907): Familiar
I/flutter (10907): No dia
I/flutter (10907): 3
I/flutter (10907): 25
I/flutter (10907): 1996

And here is the print from the app screen:

Answer 1

Looks like you missed TextField initialization with value, that is why field is missing data. TextField can be initialized via its controller property:

...
          return TextField(
            controller: TextEditingController(text: snapshot.data), // <--
            keyboardType: type != null ? type : null,
            onChanged: onChanged,
...

Therefore it could be not the best way to init text field this way in StreamBuilder. Depending on your requirements it could be better to:

1. make InputField widget stateful
2. declare TextEditingController field in InputField's State class
3. subscribe for stream in State and update controller's value or text properties every time stream emits data.