I have gridView builder which is displaying 2 items in a row. like below image
I want to display like this image
\n
Please help me to achieve this in flutter
GridView.builder(
gridDelegate:
SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 2.5 / 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10),
shrinkWrap: true,
primary: false,
itemCount: nListLevels.modules.length,
itemBuilder: (context, j) {
// displaying contents here
}
));
I guess you can return "column" and inside the "column", you can add "Row" widget to suit your UI
for different size of grid items, you need flutter_staggered_grid_view:
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
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,
)
Related
I have set up a GridView.builder to scroll horizontally with 2 rows.
However, I want the grid cells to be built out from Left to Right, Top to Bottom (e.g. the top row would build 1,2,3,4 then the remaining 5,6,7 on the second row.).
I tried a Wrap widget but that doesn't have a scroll function and can't seem to get this working.
final times = [1, 2, 3, 4, 5, 6, 7];
...
SizedBox(
height: size.height * 0.25,
child: GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: times.length,
itemBuilder: (context, index) => Container(
color: Colors.blue,
child: Center(child: Text(times.elementAt(index).toString())),
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisSpacing: 6, mainAxisSpacing: 6),
),
),
Change scrollDirection to scrollDirection: Axis.vertical, and update crossAxisCount: 4.
Updated code :
SizedBox(
height: MediaQuery.of(context).size.height / 2,
child: GridView.builder(
scrollDirection: Axis.vertical,
itemCount: 8,
itemBuilder: (context, index) => Container(
color: Colors.blue,
child: SizedBox(child: Center(child: Text("Hey $index"))),
),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, crossAxisSpacing: 6, mainAxisSpacing: 6),
),
),
Result will be -
i trying to make the height of column into dynamically because the more product i have i need more height for the column, down there was my code
Container(
width: double.infinity,
height: 1000,
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: productsList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 22 / 30,
mainAxisSpacing: 5,
crossAxisSpacing: 3),
itemBuilder: (ctx, i) {
return ChangeNotifierProvider.value(
value: productsList[i],
child: FeedsProduct(),
);
},
),
),
how can i set the container height dynamically?
There is a property inside GridView called : shrinkWrap, see shrinkWrap property
Here you can find simple example
class SimpleExample extends StatelessWidget {
const SimpleExample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: SingleChildScrollView(
child: Column(
children: [
GridView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 30,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 22 / 30,
mainAxisSpacing: 5,
crossAxisSpacing: 3),
itemBuilder: (ctx, i) {
return Container(
color: Colors.grey,
child: Center(
child: Text("Item $i"),
),
);
},
),
],
),
),
);
}
}
I don't know how your code works exactly but you can wrap the Expanded() widget on GridView() instead of a container:
Expanded(
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: productsList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 22 / 30,
mainAxisSpacing: 5,
crossAxisSpacing: 3),
itemBuilder: (ctx, i) {
return ChangeNotifierProvider.value(
value: productsList[i],
child: FeedsProduct(),
);
},
),
);
I need to design like this Grid View using Flutter
try this, flutter_staggered_grid_view:
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
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,
)
I have tried using Flutter_staggered_grid_view, but it seems as though that its built better for vertical scrolling.
My goal is to have a horizontal gridview with dynamic widths to make the grid feel natural and not so spread apart
This is what I have (I removed some of the UI code, but its essentially the same)
GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: sourceList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: .3),
itemBuilder: (context, i) {
final e = sourceList[i];
return Text(
e.name,
);
},
);
And this is what I am looking for
This is the max I could achieve by using ternary operator to adjust mainAxisCellCount. You can adjust the the count according to the length of you shortest and longest string.
Container(
height: 180.0,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) => Container(
child: Center(child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
child: Chip(
label: Text('${fruits[index]}', overflow: TextOverflow.visible, maxLines: 1, style: TextStyle(),)))),
),
staggeredTileBuilder: (int index) => StaggeredTile.count(2, fruits[index].length > 3 ? fruits[index].length > 8 ? fruits[index].length > 2 ? 4 : 3 : 2 : 1),
mainAxisSpacing: 0.0,
crossAxisSpacing: 0.0,
),
),
i'm trying to make gif pictures gallery.
I wanna wrap gridview with container but container need to setting height.
how can I set Container()'s height relatively??
i wanna make to gridview.items grows, container height grows too.
red line is current container height i set.
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.symmetric(horizontal: 10),
height: 1000,
width: double.infinity,
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 6,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// childAspectRatio: 3 / 2,
// crossAxisSpacing: 10.0,
// mainAxisSpacing: 10.0,
),
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: videos[index],
child: VideoGifItem(),
)),
),
If you need your GridView widget to take up space based on the number of items it has.
You can set the shinkWrap property of the GridView widget to true.
I added a demo using your code as an example:
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
child: GridView.builder(
// set the shrinkWrap property to true
shrinkWrap: true, // new line
physics: NeverScrollableScrollPhysics(),
itemCount: 6,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// childAspectRatio: 3 / 2,
// crossAxisSpacing: 10.0,
// mainAxisSpacing: 10.0,
),
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: videos[index],
child: VideoGifItem(),
),
),
),