Trying to implement a woven staggered grid view UI

Question

I want to implement a woven grid view using the flutter staggered grid view package.

Although any time I use the code sample guide provided in the documentation, nothing shows up on my Scaffold body at all.

This is the part of my code implementing the Woven staggered grid view.

GridView.custom(
                gridDelegate: SliverWovenGridDelegate.count(
                  crossAxisCount: 2,
                  mainAxisSpacing: 8,
                  crossAxisSpacing: 8,
                  pattern: [
                    const WovenGridTile(1),
                    const WovenGridTile(
                      5 / 7,
                      crossAxisRatio: 0.9,
                      alignment: AlignmentDirectional.centerEnd,
                    ),
                  ],
                ),
                childrenDelegate: SliverChildBuilderDelegate(
                  ((context, index) {
                    return ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image.network(
                        'https://source.unsplash.com/random?sig=$index',
                        fit: BoxFit.cover,
                      ),
                    );
                  }),
                ),
              ),

And the code below is the code example provided in the documentation

GridView.custom(
  gridDelegate: SliverWovenGridDelegate.count(
    shrinkWrap: true,
    semanticChildCount: 8,
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    pattern: [
      WovenGridTile(1),
      WovenGridTile(
        5 / 7,
        crossAxisRatio: 0.9,
        alignment: AlignmentDirectional.centerEnd,
      ),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

This is the run error I receive although it still builds with only the AppBar.

<RenderBox was not laid out: RenderPadding#5c3fd relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE>

And finally, this is the full code of the page. I'm just starting out so it's not much.

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        titleSpacing: 30,
        title: const Text(
          'Hebron Eats',
          style: TextStyle(
            fontSize: 25,
          ),
        ),
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 30.0),
            child: Icon(
              Icons.shopping_basket_outlined,
              size: 25,
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              TextField(
                style: const TextStyle(fontSize: 16, color: Colors.black54),
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(16),
                    borderSide: const BorderSide(
                      width: 0,
                      style: BorderStyle.none,
                    ),
                  ),
                  prefixIcon: const Icon(
                    Icons.search_rounded,
                    size: 30,
                    color: Colors.black45,
                  ),
                  filled: true,
                  fillColor: const Color(0xFFF3F3F3),
                  hintText: 'Search',
                ),
              ),
              const SizedBox(
                height: 30,
              ),
              SingleChildScrollView(
                physics: const BouncingScrollPhysics(),
                scrollDirection: Axis.horizontal,
                child: Wrap(
                  spacing: 12,
                  children: [
                    buildMenuCategory(
                      categoryName: 'Fast Food',
                      iconUrl: 'assets/images/fastfood.png',
                      isSelected: false,
                    ),
                    buildMenuCategory(
                      categoryName: 'Drinks',
                      iconUrl: 'assets/images/drinks.png',
                      isSelected: false,
                    ),
                    buildMenuCategory(
                      categoryName: 'Snacks',
                      iconUrl: 'assets/images/snacks.png',
                      isSelected: false,
                    ),
                    buildMenuCategory(
                      categoryName: 'Soup',
                      iconUrl: 'assets/images/soup.png',
                      isSelected: false,
                    ),
                    buildMenuCategory(
                      categoryName: 'Rice & Pasta',
                      iconUrl: 'assets/images/rice.png',
                      isSelected: false,
                    ),
                    buildMenuCategory(
                      categoryName: 'Dessert',
                      iconUrl: 'assets/images/dessert.png',
                      isSelected: false,
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 26,
              ),
              Container(
                alignment: Alignment.centerLeft,
                child: const Text(
                  'Vendors',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF0E191A),
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              GridView.custom(
                shrinkWrap: true,
                semanticChildCount: 8,
                gridDelegate: SliverWovenGridDelegate.count(
                  crossAxisCount: 2,
                  mainAxisSpacing: 8,
                  crossAxisSpacing: 8,
                  pattern: [
                    const WovenGridTile(1),
                    const WovenGridTile(
                      5 / 7,
                      crossAxisRatio: 0.9,
                      alignment: AlignmentDirectional.centerEnd,
                    ),
                  ],
                ),
                childrenDelegate: SliverChildBuilderDelegate(
                  ((context, index) {
                    return ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image.network(
                        'https://source.unsplash.com/random?sig=$index',
                        fit: BoxFit.cover,
                      ),
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Include childCount:x and you will get a result.

childrenDelegate: SliverChildBuilderDelegate(
  (context, index) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Image.network(
        'https://source.unsplash.com/random?sig=$index',
        fit: BoxFit.cover,
      ),
    );
  },
  childCount: 44, //here
),