Firebase data doesn't load without hot reload in flutter

Question

This is the method which retrieves blog data from firebase. "blogs" is the list for storing blog data in listview & Blog is the blog model class.

void getBlogs() async{
              var blogsFromDatabase =
                  await Firestore.instance.collection('blogsDatabase').getDocuments();
              for (var blog in blogsFromDatabase.documents) {
                if (blog.data["accept"] != 0) {
                  blogs.add(
                    Blog(
                      title: blog.data["title"],
                      content: blog.data["content"],
                      author: blog.data["author"],
                      pic1: blog.data["picture1"],
                      pic2: blog.data["picture2"],
                    ),
                  );
                }
              }
          }

This is Listview builder which build blogs from retrieved data. It consists of a flat button which contains title & "picture1". This is not loading until hot reload is pressed. Please help.

ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          padding: const EdgeInsets.all(8),
          itemCount: blogs.length,
          itemBuilder: (BuildContext context, int index) {
            return WillPopScope(
              onWillPop: () async {
                return Future.value(false);
              },
              child: Container(
                child: Center(
                  child: Column(
                    children: [
                      Container(
                        height: 350,
                        width: double.infinity,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Colors.orange,
                              Colors.red,
                            ],
                          ),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: FlatButton(
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => BlogExpanded(
                                  title: blogs[index].title,
                                  content: blogs[index].content,
                                  pic1: blogs[index].pic1,
                                  pic2: blogs[index].pic2,
                                  author: blogs[index].author,
                                ),
                              ),
                            );
                          },
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Flexible(
                                child: Text(
                                  blogs[index].title.toUpperCase(),
                                  textAlign: TextAlign.center,
                                  style: kTitleHeadingBlogCard.copyWith(
                                      fontSize: 18),
                                ),
                              ),
                              SizedBox(height: 20),
                              FutureBuilder(
                                builder: (context, snapshot) {
                                  switch (snapshot.connectionState) {
                                    case ConnectionState.none:
                                      return Text('No Data');
                                      break;
                                    case ConnectionState.waiting:
                                      return Container(
                                        width: 200,
                                        height: 200,
                                        child: CircularProgressIndicator(),
                                      );
                                      break;
                                    case ConnectionState.active:
                                      return Container(
                                        width: 200,
                                        height: 200,
                                        child: CircularProgressIndicator(),
                                      );
                                      break;
                                    case ConnectionState.done:
                                      return Container(
                                        width: 200,
                                        height: 200,
                                        child: Image.network(
                                          snapshot.data.toString(),
                                          fit: BoxFit.contain,
                                        ),
                                      );
                                      break;
                                  }
                                  return Container(
                                    width: 200,
                                    height: 200,
                                    child: CircularProgressIndicator(),
                                  );
                                },
                                future: _getImage(blogs[index].pic1),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),

user_2060725 · Answer

void getBlogs() async{

Do not write an async function that does not return a Future. I can tell this won't work, because you cannot await this or give it to a FutureBuilder.

Even if you do not return something, use a Future:

Future getBlogs() async {

This future you will have to use with a FutureBuilder so you can wait for your data to actually arrive. You are already using one later on for your images, so I assume you know how to do that.

In case you need to freshen up your knowledge, feel free to read What is a Future and how do I use it?

user_11224260 · Answer

You need to set state after adding items to the list.

void getBlogs() async{
              var blogsFromDatabase =
                  await Firestore.instance.collection('blogsDatabase').getDocuments();
              for (var blog in blogsFromDatabase.documents) {
                if (blog.data["accept"] != 0) {
                  blogs.add(
                    Blog(
                      title: blog.data["title"],
                      content: blog.data["content"],
                      author: blog.data["author"],
                      pic1: blog.data["picture1"],
                      pic2: blog.data["picture2"],
                    ),
                  );

                  if(mounted){           
                  setState(() {            // Add these lines to your code
          
                       });
                  }
  
                }
              }
          }

Firebase data doesn't load without hot reload in flutter

2 Answers