In my flutter app, the content of the page is loaded only when we touch the screen. Why?

Issue

I had used stateful Widget for this page.

First I run the function in initState to store data into variable as List and then I output the data in the form of listview.

Also I had used async and await for the function in the initState.

I am using firebase to load data into by flutter app.
So the content of the page is loaded when I touch the screen, before touching the screen it is just black blank screen. But as soon as I touch the screen, suddenly the data is loaded in the form of ListView. So I want that data should loaded even without first touching the screen.

So any one can explain me that why this is happening, and how to stop this. I want to load data as soon as the data is downloaded and processed in background.

code:-

    void initState(){
    super.initState();
    findFollowers();  }
    findFollowers({bool clearCachedData = false}) async
  {
    if(clearCachedData) {
      setState(() {
        followersResults = null;
      });
    }
    List<UserResult> searchFollowersResult = [];
    QuerySnapshot allFollowers = await followersRefrence.doc(widget.userProfileId).collection("userFollowers").limit(limit).get();

    allFollowers.docs.forEach((document) async {
      QuerySnapshot ds = await usersReference.where("id", isEqualTo: document.id).get();
      ds.docs.forEach((docu) {
        User eachUser = User.fromDocument(docu);
        UserResult userResult = UserResult(eachUser);
        searchFollowersResult.add(userResult);
      });
    });

    setState(() {
      followersResults = searchFollowersResult;
      if(allFollowers!=null)
      {
        if(allFollowers.docs.length != 0)
        {
          startAfter = allFollowers.docs[allFollowers.docs.length-1];
        }
      }
    });
  }

    return ListView(children: followersResults, controller: scrollController,
        physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),);

Solution

A good approach to asynchronously reading and displaying data is to use FutureBuilder with ListView.builder, e.g.

  Widget build(BuildContext context) {
    log.v('build called');
    final postService = Provider.of<PostService>(context);
    return FutureBuilder(
      future: postService.getPosts(),
      builder: (ctx, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting)
          return Center(child: CircularProgressIndicator());
        final List<Post> posts = snapshot.data;
        return ListView.builder(
          itemCount: posts.length,
          itemBuilder: (context, index) {
          ProjectModel post = posts.data[index];
          return Column(

Here the postService.getPosts() is an async method to read and return a list of posts. The FutureBuilder invokes its builder with the state of the access, we display a progress indicator while it is loading, then display a ListView when it is loaded. Note that ListView.builder is a more efficient way of rendering widgets in a scrollable list.

Answered By – Patrick O'Hara

Answer Checked By – Mildred Charles (FlutterFixes Admin)