How to use StaggeredGridView inside Column in flutter?

Question

I have a code that is working fine without using StaggeredGridView.count() inside Column . Can anyone help me out? I'm totally new in flutter!

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'smooth_star_rating.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() => runApp(MaterialApp(
      theme: ThemeData(primaryColor: Colors.black),
      home: Home(),
    ));

class Home extends StatelessWidget {
  Container TopArtist(String imageVal, String heading, double count) {
    return Container(
      width: 200,
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(15.0))),
        color: Color(0xFFf2630a),
        child: Wrap(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipOval(
                child: Center(
                  child: Material(
                    elevation: 4.0,
                    shape: CircleBorder(),
                    clipBehavior: Clip.hardEdge,
                    color: Colors.transparent,
                    child: Ink.image(
                      image: AssetImage(imageVal),
                      padding: const EdgeInsets.all(8.0),
                      fit: BoxFit.cover,
                      width: 160.0,
                      height: 160.0,
                      child: InkWell(
                        onTap: () {},
                      ),
                    ),
                  ),
                ),
              ),
            ),
            ListTile(
              title: Text(
                heading,
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontFamily: 'Mulish'),
              ),
              subtitle: Center(
                child: SmoothStarRating(
                  allowHalfRating: true,
                  starCount: 5,
                  rating: count,
                  size: 20,
                  color: Colors.black,
                  borderColor: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Material MyItems(IconData icon, String heading, int color) {
    return Material(
      color: Colors.white,
      elevation: 14.0,
      shadowColor: Color(0x802196F3),
      borderRadius: BorderRadius.circular(24.0),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      heading,
                      style: TextStyle(color: new Color(color), fontSize: 20),
                    ),
                  ),
                  Material(
                    color: new Color(color),
                    borderRadius: BorderRadius.circular(24.0),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Icon(
                        icon,
                        color: Colors.white,
                        size: 30.0,
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Project Title", style: TextStyle(color: Color(0xFFf2630a))),
        backgroundColor: Colors.white,
      ),
      body: Column(
        children: [
          Container(
            color: Colors.grey[300],
            child: Column(
              children: [
                Container(
                  color: Color(0xFFf2630a),
                  child: Padding(
                    padding: const EdgeInsets.all(18.0),
                    child: TextField(
                      decoration: InputDecoration(
                          fillColor: Colors.white,
                          filled: true,
                          border: InputBorder.none,
                          suffixIcon: Icon(Icons.search),
                          hintText: 'What are you looking for ?'),
                    ),
                  ),
                ),
                Container(
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Text(
                      "Top Artist",
                      style: TextStyle(color: Color(0xFFf2630a), fontSize: 25),
                    ),
                  ),
                ),
                Container(
                  child: Divider(
                    color: Colors.black,
                    height: 20,
                    thickness: 3,
                    indent: 180,
                    endIndent: 180,
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(vertical: 20),
                  height: 300,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: [
                      TopArtist("assets/avatar.jpg", "Heading", 3),
                      TopArtist("assets/avatar.jpg", "Heading", 4),
                      TopArtist("assets/avatar.jpg", "Heading", 5),
                      TopArtist("assets/avatar.jpg", "Heading", 1),
                      TopArtist("assets/avatar.jpg", "Heading", 2),
                      TopArtist("assets/avatar.jpg", "Heading", 5),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            child: Column(
              children: [
                Container(
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Text(
                      "Categories",
                      style: TextStyle(color: Color(0xFFf2630a), fontSize: 25),
                    ),
                  ),
                ),
                Container(
                  child: Divider(
                    color: Colors.black,
                    height: 20,
                    thickness: 3,
                    indent: 180,
                    endIndent: 180,
                  ),
                ),
                Container(
                  child: Expanded(
                    child: StaggeredGridView.count(
                      crossAxisCount: 2,
                      crossAxisSpacing: 12.0,
                      mainAxisSpacing: 12.0,
                      padding:
                          EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                      children: [
                        MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b),
                        MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b),
                        MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b),
                        MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b),
                        MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b),
                        MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b),
                      ],
                      staggeredTiles: [
                        StaggeredTile.extent(1, 130),
                        StaggeredTile.extent(1, 130),
                        StaggeredTile.extent(1, 130),
                        StaggeredTile.extent(1, 130),
                        StaggeredTile.extent(1, 130),
                        StaggeredTile.extent(1, 130),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

You have to put Column inside a Material() widget and also add the very important properties shrinkWrap: true, and physics: NeverScrollableScrollPhysics(),

Full example below:

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Future<List<String>> _getPictures() async {
  /// replace with your async query to your REST api.
  return [
    'https://apod.nasa.gov/apod/image/0708/hh49_spitzer_c29.jpg',
    'https://apod.nasa.gov/apod/image/1507/trifid_spitzerR1024.jpg',
    'https://apod.nasa.gov/apod/image/1409/rippledsky_dai_960.jpg'
  ];
}

class StaggeredInsideColumn extends StatefulWidget {
  const StaggeredInsideColumn({
    Key? key,
  }) : super(key: key);

  @override
  _StaggeredInsideColumnState createState() => _StaggeredInsideColumnState();
}

class _StaggeredInsideColumnState extends State<StaggeredInsideColumn> {
  late final Future<List<String>> _pictureUrlList;

  @override
  void initState() {
    super.initState();
    _pictureUrlList = _getPictures();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Material(
            child: Column(children: [
      Text('hello world'),

      /// ... your other column items

      FutureBuilder<List<String>>(
          future: _pictureUrlList,
          builder: (context, AsyncSnapshot<List<String>> snapshot) {
            if (snapshot.connectionState == ConnectionState.done &&
                snapshot.hasData) {
              List<String> pictures = snapshot.data!;
              return StaggeredGridView.countBuilder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                crossAxisCount: 3,
                itemCount: snapshot.data!.length,
                itemBuilder: (BuildContext context, int index) => Container(
                  child: Image.network(
                    pictures[index],
                    fit: BoxFit.fitWidth,
                  ),
                ),
                staggeredTileBuilder: (int index) {
                  int tileCount = index % 7 == 0 ? 2 : 1;
                  return StaggeredTile.count(tileCount, tileCount);
                },
                mainAxisSpacing: 8.0,
                crossAxisSpacing: 8.0,
              );
            } else
              return CircularProgressIndicator();
          })
    ])));
  }
}

Answer 2

Simple as per official docs:

SingleChildScrollView(child:
      Material(
          child: Column(
              children: [
                Container(
                  child: new StaggeredGridView.countBuilder(
                    crossAxisCount: 4,
                    itemCount: 8,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (BuildContext context, int index) => new Container(
                        color: Colors.green,
                        child: new Center(
                          child: new CircleAvatar(
                            backgroundColor: Colors.white,
                            child: new Text('$index'),
                          ),
                        )),
                    staggeredTileBuilder: (int index) =>
                    new StaggeredTile.count(2, index.isEven ? 2 : 1),
                    mainAxisSpacing: 4.0,
                    crossAxisSpacing: 4.0,
                  ),
                )
              ]
          )
        )
      )