I'm trying to create columns of widgets. So, something like
Hello0 Hello1
Hello2 Hello3
When I try
GridView.count(
padding: const EdgeInsets.all(10.0),
crossAxisCount: 2,
crossAxisSpacing: 20,
physics: const NeverScrollableScrollPhysics(),
// mainAxisSpacing: 20,
children: const [
Text('Hello0'),
Text('Hello1'),
Text('Hello2'),
Text('Hello3'),
])
I get the output below
Is there a way to tighten the spacing between the rows or does GridView put everything in a square?
GridView.count calculate its height based on aspect ratio which is 1.0 by default, so its children has extra space.
Instead you can use gridDelegate
GridView(
padding: const EdgeInsets.all(10.0),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 20,
mainAxisExtent: 80,
),
physics: const NeverScrollableScrollPhysics(),
// mainAxisSpacing: 20,
children: const [
Text('Hello1'),
Text('Hello2'),
Text('Hello3'),
])
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'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(),
),
),
),
I am using the SliverGrid feature to build my gridView. I trying to have the text placed below the image but the text isn't aligning with the image and its showing a Bottom Overflowed error. This is the code:
SliverPadding(
padding: const EdgeInsets.only(left: 8, right: 8),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int i) {
return GestureDetector(
onTap: () {},
child: Column(
children: <Widget>[
GridTile(
child: Image.network(
'https://images.unsplash.com/photo-1562176566-73c303ac1617?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
fit: BoxFit.cover,
),
),
Text(
'Sammy the Pup',
style: khomeStyle.copyWith(
color: kOrange, fontSize: 14),
),
],
),
);
},
childCount: 200,
),
),
),
And this is what the gridview looks like(Output of the above):
And this is what I want to achieve:
The height of GridView is determined by the AspectRatio
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
crossAxisCount: 2,
childAspectRatio: 1 / 1,<---
),
As the AspectRatio gets smaller the height gets larger and as the ratio gets larger the heights gets smaller
By default GridView puts items in row until crossAxisCount will not reach
GridView.count(
crossAxisCount: 5,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
padding: EdgeInsets.all(10.0),
children: hours
)
Is there way to change build direction from horizontal to vertical?
Changing the scroll direction should do what you want:
GridView.count(
crossAxisCount: 5,
mainAxisSpacing: 10,
scrollDirection: Axis.vertical,
crossAxisSpacing: 10,
padding: EdgeInsets.all(10.0),
children: hours
)