Flutter initState() not retrieving data immediately, need to do hot reload to view it

Question

class _SelectMedChallengeState extends State<SelectMedChallenge> {

List<String> categoryList;
@override
void initState() {
  super.initState();
  setState(() {
    categoryList = DatabaseService().getCategoryList();
  });
  print(categoryList);
}

createAlertDialog(BuildContext context){
return showDialog(context: context, builder: (context){
  return AlertDialog(
    content: Center (
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'CATEGORY',
            style: TextStyle(
              fontFamily: 'MuseoSans',
              fontSize: 24.0,
            ),
          ),
          SizedBox(height: 20.0,),
          ButtonTheme (
            minWidth: 288.0,
            height: 109.0,
            buttonColor: Color.fromARGB(255, 102, 199, 227),
            child: RaisedButton (
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
                side: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              child: Text(
                'BEGINNER',
                style: TextStyle(
                  color: Color.fromARGB(255, 76, 62, 62),
                  fontSize: 22.0,
                  fontFamily: 'MuseoSans',
                ),
              ),
              onPressed: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MedChallenge()),
                );
              },
            ),
          ),
          SizedBox(height: 10.0),
          ButtonTheme (
            minWidth: 288.0,
            height: 109.0,
            buttonColor: Color.fromRGBO(248, 227, 160, 1.0),
            child: RaisedButton (
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
                side: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              child: Text(
                'INTERMEDIATE',
                style: TextStyle(
                  color: Color.fromARGB(255, 76, 62, 62),
                  fontSize: 22.0,
                  fontFamily: 'MuseoSans',
                ),
              ),
              onPressed: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MedChallenge()),
                );
              },
            ),
          ),
          SizedBox(height: 10.0),
          ButtonTheme (
            minWidth: 288.0,
            height: 109.0,
            buttonColor: Color.fromRGBO(234, 135, 137, 1.0),
            child: RaisedButton (
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
                side: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              child: Text(
                'ADVANCED',
                style: TextStyle(
                  color: Color.fromARGB(255, 76, 62, 62),
                  fontSize: 22.0,
                  fontFamily: 'MuseoSans',
                ),
              ),
              onPressed: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MedChallenge()),
                );
              },
            ),
          ),
        ],
      ),
    ),
  );
});
}


@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      backgroundColor: Color.fromRGBO(248, 227, 160, 1.0),
      iconTheme: IconThemeData(
        color: Color.fromRGBO(77, 72, 91, 1.0), //#4D485B
      ),
      title: Text(
        'CATEGORIES',
        style: TextStyle(
          color: Color.fromRGBO(77, 72, 91, 1.0), //#4D485B
          fontFamily: 'MuseoSans',
          fontWeight: FontWeight.bold,
        ),

      ),
      centerTitle: true,

      actions: <Widget>[],

    ),

    body: Center(
      child: ListView.separated(
        separatorBuilder: (context, index) => Divider(
          color: Colors.lightBlue,
          thickness: 2.0,
        ),
        itemCount: categoryList.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              createAlertDialog(context);
            },
            child: Container(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                  child: Text(
                    '${categoryList[index]}',
                    style: TextStyle(
                      fontFamily: 'MuseoSans',
                      fontSize: 25.0,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    ),

 );
}
}

In my iniitState() I'm trying to initialize my categoryList to data that I'm querying from the cloud firestore by calling DatabaseService().getCategoryList() which is a function I have written to query the the database. Then I try to use the categoryList in the body of my scaffold in the ListView. When I go to that screen in my app, the body is empty and in the console it prints an empty list. The only time the data actually shows up is if I do hot reload when I'm in the category screen. I tried doing hot restart and running the app again and the body is still empty until I do a hot reload after I navigate to that screen in my app. Any help would be appreciated.

Answer 1

If DatabaseService().getCategoryList() is a Future or Stream, then you're not waiting for a response, you're trying to get it immediately over your initState.

Move your method inside a function using the async keyword or simply add:

.then((result) => // your login) at the end of your Future.

Once you're sure you are getting the result for your asynchronous call, you can call setState to update the list and display the results.

Example:

@override
void initState() {
  _fetchList();
}

_fetchList() async {
  DatabaseService().getCategoryList().then((result) {
    setState(() => categoryList = result);
  });
}

Others uses to fetch a list could be:

setState(() {
    categoryList.addAll(result);
});
// Another one
for (var item in items) {
  setState(() {
    categoryList.add(item);
  });
}