Unable to scroll view when staggered grid is displayed

[gastonche]

I have this code

_videosSection(){
    return new Column(
      children: <Widget>[
        new Padding(
          padding: const EdgeInsets.only(top: 8.0),
          child: Text(
            "Top Video Picks",
            style: Theme.of(context).textTheme.title,
          ),
        ),
        Container(
            child:  StaggeredGridView.countBuilder(
              crossAxisCount: 4,
              itemCount: videos == null ? 0: videos.length,
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) => GraphicPreview(videos.elementAt(index)),
              staggeredTileBuilder: (int index) => new StaggeredTile.count(2, index.isEven ? 2 : 1),
              mainAxisSpacing: 0.0,
              crossAxisSpacing: 0.0,
            )
        ),
      ],
    );
  }

but once the view is rendered, the page is no scrollable anymore. When i try to scroll, it shows an accent showing as if it's trying to scroll inside the staggered grid. Any idea what's wrong with my code?

[letsar]

Hi @gastonche, I think you should use a CustomScrollView with two slivers here: A SliverPadding (to replace the Padding widget) A SliverStaggeredGrid(to replace the StaggeredGridView). The issue here is because the Columndoes not let you to scroll.

[aydinfatih]

i have same issue.

StaggeredGridView.countBuilder(
      crossAxisCount: 2,
      staggeredTileBuilder: (index) => new StaggeredTile.fit(2),
      itemCount: data.results.length,
      itemBuilder: (context, index) {
        return Card(
          color: Colors.transparent,
          clipBehavior: Clip.antiAlias,
          elevation: 0,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            child: Column(
              children: <Widget>[
                CachedNetworkImage(
                  imageUrl: data.results[index].image,
                ),
                Container(
                  color: Colors.white,
                  padding: EdgeInsets.all(10),
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            data.results[index].channel.name,
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.black54,
                            ),
                          ),
                          Text(
                            data.results[index].publishDate.toIso8601String(),
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.black54,
                            ),
                          )
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text(
                          data.results[index].title,
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: Colors.black87),
                        ),
                      ),
                      Text(
                        data.results[index].description,
                        style: TextStyle(
                          color: Colors.black54,
                          fontSize: 14,
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      },
    );

[arutkayb]

I'm having the same problem but SliverStaggeredGrid.count inside CustomScrollView is not solving my problem. Can you have a look? Reproduce: https://github.com/arutkayb/FlutterMovies/blob/f17c2fb3c85275ccf87f25d89b834dedc5ce13fe/flutter_movies/lib/module/list_movies.dart

[khalidsaleh]

StaggeredGridView and SliverStaggeredGrid not scrolling !!!!!!!!

[letsar]

Closing as it resolved or will not be fixed in the current version (a new version, completely refactored is on its way). Let me know If you can test under the feature/renaissance branch, and it's not resolved.

[lucasjinreal]

Still can not scrolling....

I am not sure why a popular gridView can not be scrolled default....