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,
),
),
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 -
How to make flutter ListView.builder without a specific height(dynamic or not declare the height)
I want to make a list of item, and then when the item going to full height it will wrapped
When i run this code, it returns error because it need height and width
I want to make the list of item like this
Wrap(
spacing: 12,
runSpacing: 10,
children: [
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: movieDetail['genre'].length,
itemBuilder: (context, index) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
color: darkGrayColor,
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 4, horizontal: 12),
child: Text('Testing', style: secondaryInfoText),
),
),
);
},
),
],
),
Use GridView.builder
GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: movieDetail['genre'].length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 1),
itemBuilder: (context, index) {
...
}
In the following code, all items are displayed on a separate line i.e. each item spans over the entire row. How can I change the code so that multiple items can appear on the same line?
Thanks in Advance :)
Expanded(
child: SizedBox(
child: new ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: filterStatus == false
? allDeals.length
: filteredDeals.length,
itemBuilder: (BuildContext ctx, int index) {
return Container(
margin: EdgeInsets.only(top: 20.0),
child: ListTile(...)
);
}
),
),
),
If you want to do something like this:
You can use the GridView.builder.
Here is the code that built the example from the screenshot.
GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100, // the size of item
crossAxisSpacing: 10, // margin of 10px top and bottom
mainAxisSpacing: 10, // margin of 10px left and right
// the spacing is not applicable on the GridView margins.
),
itemCount: 30,
itemBuilder: (_, index) {
return Container(
color: Colors.blue,
child: Center(
child: Text(
'Item $index',
),
),
);
},
),
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,
)
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(),
),
),
),