how to use grid in column?

Question

I am developing a flutter app and I need to use grid in the column, but without using a container or sized box,

I keep getting this error

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#b8f58 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
TabBarView
lib\screens\home_screen.dart:13
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#0725a NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
TabBarView
lib\screens\home_screen.dart:13
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 544 pos 12: 'child.hasSize': is not true.

any idea???

note: I need to do it without a container or sized box.

That's my grid view

class ProductsGrid extends StatelessWidget {
  const ProductsGrid({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<Products>(context).products;
    return GridView.builder(
      padding: const EdgeInsets.all(5.0),
      itemCount: productsData.length,
      itemBuilder: (ctx, i) => ProductItem(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 3 / 3,
        crossAxisSpacing: 1,
        mainAxisSpacing: 1,
      ),
    );
  }
}

and that's my column

Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: ImageSlideshow(
              width: double.infinity,
              height: 150,
              initialPage: 0,
              indicatorColor: Theme.of(context).primaryColor,
              indicatorBackgroundColor: Colors.grey,
              onPageChanged: (value) {
                debugPrint('Page changed: $value');
              },
              autoPlayInterval: 0,
              isLoop: false,
              children: [
                Image.asset(
                  'assets/shopping_online.jpg',
                  fit: BoxFit.fill,
                ),
                Image.asset(
                  'assets/shopping_online.jpg',
                  fit: BoxFit.fill,
                ),
                Image.asset(
                  'assets/shopping_online.jpg',
                  fit: BoxFit.fill,
                ),
              ],
            ),
          ),
          Divider(),
          Expanded(
            child: ProductsGrid(),
          )
        ],
      )

any idea???

note: I need to do it without a container or sized box.

Answer 1

Please note that the title of the question does not match properly with the error. But try this.

Grid view should be like this

class ProductsGrid extends StatelessWidget {
  const ProductsGrid({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<Products>(context).products;
    return GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.all(5.0),
      itemCount: productsData.length,
      itemBuilder: (ctx, i) => ProductItem(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 3 / 3,
        crossAxisSpacing: 1,
        mainAxisSpacing: 1,
      ),
    );
  }
}

Column should be like this

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 50),
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: ImageSlideshow(
              width: double.infinity,
              height: 150,
              initialPage: 0,
              indicatorColor: Theme.of(context).primaryColor,
              indicatorBackgroundColor: Colors.grey,
              onPageChanged: (value) {
                debugPrint('Page changed: $value');
              },
              autoPlayInterval: 0,
              isLoop: false,
              children: [
                Image.asset(
                  'assets/shopping_online.jpg',
                  fit: BoxFit.fill,
                ),
                Image.asset(
                  'assets/shopping_online.jpg',
                  fit: BoxFit.fill,
                ),
                Image.asset(
                  'assets/shopping_online.jpg',
                  fit: BoxFit.fill,
                ),
              ],
            ),
          ),
          Divider(),
          ProductsGrid(),
        ],
      )
        ),
      ),
    );
  }

Answer 2

This is what you missed --> shrinkWrap: true,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 50),
        child: Column(
          children: [
            Expanded(
              child: GridView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.all(5.0),
                itemCount: 8,
                itemBuilder: (context, i) => Container(
                  color: Colors.blue,
                  height: 50,
                  width: 50,
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 1,
                  crossAxisSpacing: 20,
                  mainAxisSpacing: 20,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

Also you will need this --> physics: NeverScrollableScrollPhysics(),

I am not going to explain this. Wrap your Column with SingleChildScrollView and see what happens.

Answer 3

I think this should work out:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: //array length,
              ),
              itemBuilder: (BuildContext context, int index) => 
               YourWidget(),
            ),
          ),
        ],
      ),
    );
  }