Staggered Grid View is not scrolling upwards in Flutter

Issue

Guys I am trying to build an Instagram search-like page but with few changes using the Staggered Grid view package. but when I try to scroll it doesn’t scroll but images are visible.

and I am getting this error when I try to scroll.

D/ColorViewRootUtil( 1284): nav gesture mode swipeFromBottom ignore false downY 1776 mScreenHeight 2340 mScreenWidth 1080 mStatusBarHeight 54 globalScale 1.125 nav mode 3 event MotionEvent { action=ACTION_DOWN, actionButton=0, id[0]=0, x[0]=866.0, y[0]=1776.0, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, classification=NONE, metaState=0, flags=0x0, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=36924392, downTime=36924392, deviceId=6, source=0x1002, displayId=0 } rotation 0

my profile page contains a search bar inside the app bar, then below a listview of titles and below that again a listView of categories with images in a container of height about 70*70 and below that I want Staggered Grid View. everything is working but the Staggered Grid view does not scroll

code is below can anyone tell me what I am doing wrong.

Full code here ——-> https://github.com/prajesh9921/Problem-Repo-for-Stack.git

class GridList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
      child: StaggeredGridView.countBuilder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        crossAxisCount: 2,
        itemCount: imageList.length,
        itemBuilder: (context, index) {
          return ImageCard(
            imageData: imageList[index],
          );
        },
        staggeredTileBuilder: (index) =>
            StaggeredTile.count(1,1),
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
    );
  }
}


class ImageCard extends StatelessWidget {
  const ImageCard({this.imageData});

  final ImageData imageData;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
        child: Image.network(imageData.imageUrl, fit: BoxFit.cover));
  }
}


class ImageData {
  final String id;
  final String imageUrl;

  const ImageData({
    @required this.id,
    @required this.imageUrl,
  });
}

  List<ImageData> imageList = [
  ImageData(
    id: 'id-001',
    imageUrl: 'https://picsum.photos/seed/image001/500/500',
  ),
  ImageData(
    id: 'id-002',
    imageUrl: 'https://picsum.photos/seed/image002/500/800',
  ),
  ImageData(
    id: 'id-003',
    imageUrl: 'https://picsum.photos/seed/image003/500/300',
  ),
  ImageData(
    id: 'id-004',
    imageUrl: 'https://picsum.photos/seed/image004/500/900',
  ),
  ImageData(
    id: 'id-005',
    imageUrl: 'https://picsum.photos/seed/image005/500/600',
  ),
  ImageData(
    id: 'id-006',
    imageUrl: 'https://picsum.photos/seed/image006/500/500',
  ),
  ImageData(
    id: 'id-007',
    imageUrl: 'https://picsum.photos/seed/image007/500/400',
  ),
  ImageData(
    id: 'id-008',
    imageUrl: 'https://picsum.photos/seed/image008/500/700',
  ),
  ImageData(
    id: 'id-009',
    imageUrl: 'https://picsum.photos/seed/image009/500/600',
  ),
  ImageData(
    id: 'id-010',
    imageUrl: 'https://picsum.photos/seed/image010/500/900',
  ),
  ImageData(
    id: 'id-011',
    imageUrl: 'https://picsum.photos/seed/image011/500/900',
  ),
  ImageData(
    id: 'id-012',
    imageUrl: 'https://picsum.photos/seed/image012/500/700',
  ),
  ImageData(
    id: 'id-013',
    imageUrl: 'https://picsum.photos/seed/image013/500/700',
  ),
  ImageData(
    id: 'id-014',
    imageUrl: 'https://picsum.photos/seed/image014/500/800',
  ),
  ImageData(
    id: 'id-015',
    imageUrl: 'https://picsum.photos/seed/image015/500/500',
  ),
  ImageData(
    id: 'id-016',
    imageUrl: 'https://picsum.photos/seed/image016/500/700',
  ),
  ImageData(
    id: 'id-017',
    imageUrl: 'https://picsum.photos/seed/image017/500/600',
  ),
  ImageData(
    id: 'id-018',
    imageUrl: 'https://picsum.photos/seed/image018/500/900',
  ),
  ImageData(
    id: 'id-019',
    imageUrl: 'https://picsum.photos/seed/image019/500/800',
  ),
];

Solution

I just reproduced your issue with the code, the issue is you already have the list view, in which there’s StaggeredGridView, what StaggeredGridView returns is another ListView.

Here is the solution,

• Your Scaffold in ExploreView.

  return Scaffold(
    appBar: AppBar(
      elevation: 2.0,
      title: TextField(
        decoration: InputDecoration(
          hintText: 'Search',
          prefixIcon: Icon(Icons.search_rounded),
          border: InputBorder.none,
        ),
      ),
    ),
    body: GridList(),
  );
  

• GridList should return following,

  return Container(
    child: StaggeredGridView.countBuilder(
      addAutomaticKeepAlives: true,
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      crossAxisCount: 2,
      itemCount: imageList.length + 1,
      itemBuilder: (context, index) {
        if (index == 0) {
          return Column(
            children: [
              Explore_list(),
              Explore_catagories(),
              divider(),
            ],
          );
        }
        return Container(
          padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
          child: ImageCard(
            imageData: imageList[index - 1],
          ),
        );
      },
      staggeredTileBuilder: (index) =>
          index == 0 ? StaggeredTile.count(2, 1) : StaggeredTile.count(1, 1),
      // crossAxisSpacing: 8.0,
      mainAxisSpacing: 8.0,
    ),
  );
  

What I did is, return just GridView from your class, include all other components, i.e. Explore_list(), Explore_catagories(), divider() in StaggeredGridView as a single widget at the top of it.

Answered By – Pathik Patel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0