Firebase data retrieval in flutter returns a null string

Question

I have created 2 variables (nameUserDisplay & aboutUserDisplay), when data is retrieved using _getName() & _getAbout() method. A null string is returned.

It is required in the project that the data in the document should be shown instead of any default data.

Please help.

Below is the full code

class UserScreen extends StatefulWidget {
  final User currentUser;

  UserScreen({this.currentUser});

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

class _UserScreenState extends State<UserScreen> {
  String nameUserDisplay;
  String aboutUserDisplay;

  void _getName() async {
    Firestore.instance
        .collection("userInfo")
        .document(widget.currentUser.email)
        .get()
        .then((value) {
      nameUserDisplay = value.data["name"].toString();
      print(nameUserDisplay);
    });
  }

  void _getAbout() async {
    Firestore.instance
        .collection("userInfo")
        .document(widget.currentUser.email)
        .get()
        .then((value) {
      aboutUserDisplay = value.data["about"].toString();
      print(aboutUserDisplay);
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getAbout();
    _getName();
  }

  @override
  Widget build(BuildContext context) {
//    if (nameUserDisplay == null) nameUserDisplay = 'Sanatani';

//    if (aboutUserDisplay == null)
//      aboutUserDisplay = 'A Sanatana Dharma Follower';

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.white,
            ),
            onPressed: () {
              // do something
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => BlogScreen(
                    currentUser: widget.currentUser,
                  ),
                ),
              );
            },
          )
        ],
        title: Text('You'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[Colors.orange, Colors.red],
            ),
          ),
        ),
      ),
      body: WillPopScope(
        onWillPop: () async {
          return Future.value(false);
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 20),
              Flexible(child: Image.asset('assets/images/hoilogo.png')),
              SizedBox(height: 40),
              Container(
                child: Text(
                  nameUserDisplay,
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
              SizedBox(height: 20),
              Container(
                padding: EdgeInsets.only(left: 8, right: 8),
                child: Text(
                  aboutUserDisplay,
                  style: TextStyle(fontSize: 15),
                  textAlign: TextAlign.center,
                ),
              ),
              Flexible(child: SizedBox(height: 940)),
              FlatButton(
                child: Text(
                  'Add/Edit your profile Details',
                  style: TextStyle(
                      color: Colors.orange, fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => UserEditDetails(
                        currentUser: widget.currentUser,
                      ),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Firebase is a platform for creating mobile and web applications developed by Google. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development. I have used it as the Database.

Answer 1

You need to call setState when you get name and about to force widgets to be rebuilt with the new state values.

Also, It seems that you could do both things in the same method to avoid calling setState twice since it's not free.

void _getData() {
    Firestore.instance
        .collection("userInfo")
        .document(widget.currentUser.email)
        .get()
        .then((value) =>
            setState((){
                aboutUserDisplay = value.data["about"].toString();
                nameUserDisplay = value.data["name"].toString();
            }));
}