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


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.


    void 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(); async {
      QuerySnapshot ds = await usersReference.where("id", isEqualTo:; {
        User eachUser = User.fromDocument(docu);
        UserResult userResult = UserResult(eachUser);

    setState(() {
      followersResults = searchFollowersResult;
        if( != 0)
          startAfter =[];

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


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 =;
        return ListView.builder(
          itemCount: posts.length,
          itemBuilder: (context, index) {
          ProjectModel post =[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)

Leave a Reply

Your email address will not be published. Required fields are marked *