grouped_list
grouped_list copied to clipboard
Dimibe
Display items within a grid
Hi, I was wondering if there was a way to have the itemBuilder display the items within a GridView instead of a ListView? If not, maybe there's a workaround to have the items appear side by side instead of on top of each other?
import 'package:flutter/material.dart'; import 'package:flutter/src/foundation/key.dart'; import 'package:flutter/src/widgets/framework.dart';
class gridviewList extends StatefulWidget { const gridviewList({Key? key}) : super(key: key);
@override State<gridviewList> createState() => _gridviewListState(); }
class _gridviewListState extends State<gridviewList> { List myList = [ [1, 2, 3, 4, 5, 6, 11, 33, 44, 55, 66, 77, 78], [3, 4, 2, 6, 7, 44, 45, 56, 77], [4, 6, 8, 3, 9, 7] ]; // instead 2d array we can also use json objects listUi( int _index, ) { return Container( height: 200.0, child: GridView.builder( scrollDirection: Axis.horizontal, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: (1 / 0.85)), itemCount: myList[_index].length, itemBuilder: (BuildContext context, int index2) { return Card( color: Colors.blueGrey, child: Center(child: Text(myList[_index][index2].toString())), ); }), ); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Horizontal Gridview Inside List '), ), body: ListView.builder( shrinkWrap: true, itemCount: myList.length, physics: const ScrollPhysics(), itemBuilder: (context, index) { return Column( children: [ Padding( padding: const EdgeInsets.all(4.0), child: Container( color: Colors.white70, child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: Row( // mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Padding(padding: EdgeInsets.only(right: 5.0)), Text('data' //color: Colors.white, ), ], ), ), listUi( index, ), ], ), ), ), ], ); }, ), ); } }
