Flutter : Grid View inside list view

Question

I have tried :

ListView.builder(
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
  return GridView.count(
  crossAxisCount: 5,
  children: List.generate(10, (index) {
    return Center(
      child: Text(
        '$index AM',
      ),
    );
  }),
);
},
itemCount: partnerArr.length,
)

I want to make this type of list view in my Scaffold body, how can I do so?

Solution 1

You can try this Code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.separated(
      separatorBuilder: (context, int) {
        return Divider(color: Colors.black,);
      },
     // shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return GridView.count(
          shrinkWrap: true,
          crossAxisCount: 3,
          childAspectRatio: 2.0,
          children: List.generate(6, (index) {
            return Center(
              child: RaisedButton(
                onPressed: (){},
                color: Colors.greenAccent,
                child: Text(
                  '$index AM',
                ),
              ),
            );
          }),
        );
      },
      itemCount: 4,
    ));
  }

Output:

Solution 2

use CustomScrollView

CustomScrollView(
  slivers: List.generate(
      10,
      (item) => SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 150.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.amber[100 * (index % 9)],
                  child: Text('grid item $index'),
                );
              },
              childCount: 6,
            ),
          )),
)

Comments

[Paras Dhawan]

can you please explain and how can it slow my specific problem?

[Aravindhan Gs]

how to irritate different value to each grid row item?