Firestore data change results is null in flutter

Question

Collection name is userInfo & the data I want to update is name. But when I do that using textfield onChanged value, then the update method changes the value in the collection document to null value.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:hindusofindia/model/user.dart';
import 'package:hindusofindia/screens/user/UserProfile.dart';

class EditName extends StatefulWidget {
  EditName({this.email});

  final String email;

  @override
  _EditNameState createState() => _EditNameState();
}

class _EditNameState extends State<EditName> {
  void _changeName(String value) async {
    Firestore.instance
        .collection("userInfo")
        .document(widget.email)
        .updateData({"name": value});
  }

  @override
  Widget build(BuildContext context) {
    String nameChange='6767';

    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Name'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[
                Colors.orange,
                Colors.red,
              ],
            ),
          ),
        ),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Edit Name',
            ),
            onChanged: (text) {
              setState(() {
                nameChange = text;
              });
            },
          ),
          FlatButton(
            onPressed: () {
              if (nameChange != '6767') {
                _changeName(nameChange);
              }
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => UserScreen(
                    currentUser: User(email: widget.email),
                  ),
                ),
              );
            },
            child: Text('Apply changes'),
          )
        ],
      ),
    );
  }
}

But what is supposed to happen is that the textfield name changes results in updating the name value in firebase document collection to the textfield value. Changes will occur after flatbutton is pressed later.

Answer 1

onChanged: (text) {
  setState(() {
    nameChange = text;
});

setState() will call the build() method again to rebuild the widget tree, but since you declared nameChange inside the build() method it will have the same initial value when clicking FlatButton . You should declare as an instance variable under the class:

class _EditNameState extends State<EditName> {
String nameChange = "6767";
//...