skip to Main Content

Can I add a CircularProgressIndicator() to the end of the GridView every time the bool isLoadingPosts is true?

Widget imagePostsWidget = imagePosts != null
          ? GridView.builder(
              physics: BouncingScrollPhysics(),
              controller: ProfileScreen.scrollController,
              padding: EdgeInsets.only(top: 3),
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              itemCount: imagePosts.length,
              itemBuilder: (BuildContext context, int index) => PostCard(
                imagePost: imagePosts[index],
                imageUrl: imagePosts[index].imageUrl,
              ),
            )
          : SizedBox();

This is my code currently for fetching the posts with infinite scroll. The only thing I need is an CircularProgressIndicator()added to the end of the GridView, but I just cant figure out a way to achieve that.


I want to have something like this:

Widget imagePostsWidget = imagePosts != null
          ? GridView.builder(
              physics: BouncingScrollPhysics(),
              controller: ProfileScreen.scrollController,
              padding: EdgeInsets.only(top: 3),
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              itemCount: imagePosts.length,
              itemBuilder: (BuildContext context, int index) => PostCard(
                imagePost: imagePosts[index],
                imageUrl: imagePosts[index].imageUrl,
              ),
              if(isLoadingPosts) {
                return CirularProgressIndicator();
              }
            )
          : SizedBox();

2

Answers


  1. Yes,
    you can achieve, Please check the below is code. Please try that code and inform me, is it works for you?

    class MyWidget extends StatefulWidget {
      @override
      _MyWidgetState createState() => _MyWidgetState();
    }
    
    class _MyWidgetState extends State<MyWidget> {
      ScrollController _scrollController = new ScrollController();
      bool isLoadingPosts = false;
      List<ImagePost> imagePosts = [];
    
      @override
      void initState() {
        super.initState();
    
        // Add a listener to the scroll controller to detect when the user has reached the end of the list
        _scrollController.addListener(() {
          if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
            // The user has reached the end of the list, so load more posts
            _loadMorePosts();
          }
        });
      }
    
      @override
      void dispose() {
        // Dispose the scroll controller when the widget is removed from the widget tree
        _scrollController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return GridView.builder(
          physics: BouncingScrollPhysics(),
          controller: _scrollController,
          padding: EdgeInsets.only(top: 3),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemCount: imagePosts.length + (isLoadingPosts ? 1 : 0), // Add 1 item for the progress indicator if isLoadingPosts is true
          itemBuilder: (BuildContext context, int index) {
            if (index < imagePosts.length) {
              return PostCard(
                imagePost: imagePosts[index],
                imageUrl: imagePosts[index].imageUrl,
              );
            } else {
              // Return the progress indicator at the end of the list if isLoadingPosts is true
              return Center(child: CircularProgressIndicator());
            }
          },
        );
      }
    
      // Load more posts
      void _loadMorePosts() async {
        if (!isLoadingPosts) {
          setState(() {
            isLoadingPosts = true;
          });
    
          // Load more posts here
    
          setState(() {
            isLoadingPosts = false;
          });
        }
      }
    }
    

    In the above code, We have used the ScrollController That Listens for when the user reaches at the end of the list. When the user reaches at the end of the list, we set the isLoadingPosts flag to true and load more. we show the CircularProgressIndicator at the end of the list/post. we set the isLoadingPosts false to update the widget tree to show the new post

    Login or Signup to reply.
  2. You can try this approach:

      ListView(
        children: [
          GridView.builder(
            physics: BouncingScrollPhysics(),
            controller: ProfileScreen.scrollController,
            padding: EdgeInsets.only(top: 3),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3),
            itemCount: imagePosts.length,
            itemBuilder: (BuildContext context, int index) => PostCard(
              imagePost: imagePosts[index],
              imageUrl: imagePosts[index].imageUrl,
            ),
          ),
          AnimatedSwitcher(
            duration: const Duration(milliseconds: 400),
            child: isLoadingPosts
                ? Container(
                    height: 72,
                    child:
                        const Center(child: CircularProgressIndicator()),
                  )
                : const SizedBox(),
          ),
        ],
      ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search