How to make grid view item screen width Flutter - flutter

Question

How to create a grid view where each item is in the center of the screen and width fits to given screen ? Whatever I do, in horizontal scroll my items are big and I can't scale them to the center of the screen. I want to scroll one item per screen.
I was trying ListView, Padding, Wrap, Align all the time the same.
What I have:
What I want:
My code:
class NewestView extends StatelessWidget {
const NewestView({Key? key, required this.state}) : super(key: key);
final TestState state;
#override
Widget build(context) {
return BlocBuilder<NavigationCubit, NavigationState>(
builder: (context, state) {
return Builder(builder: (context) {
return GridView.count(
padding: const EdgeInsets.all(25),
crossAxisCount: 1,
children: _generateGrid(15, context),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
);
});
});
}
List<Widget> _generateGrid(int number, BuildContext context) {
List<Widget> gridResult = [];
for (int i = 0; i < number; i++) {
IconData genIcon = RandomIconData.randomIcon();
Image image = Image(image: Picsum().randomPic().image);
gridResult.add(
Builder(
builder: (BuildContext context) => InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () {
_onTapAction(context, genIcon, image);
},
child: Card(
child: Column(
children: [
Flexible(
flex: 1
child: Center(
// color: Colors.deepOrangeAccent,
child: Text(
'Test',
style: Theme.of(context)
.textTheme
.caption
?.copyWith(fontWeight: FontWeight.bold),
),
),
),
Flexible(
flex: 4,
child: Builder(builder: (context) {
return Container(
color: Colors.transparent,
child: image,
);
}),
),
Flexible(
flex: 2,
child: Container(
color: Colors.transparent,
child: const Icon(
Icons.monetization_on,
color: Colors.amber,
),
),
)
],
),
),
),
),
);
}
return gridResult;
}

Answer 1

You essentially want to make a ListView. But you went with GridView with crossAxisCount = 1. GridView children have aspect ratio of 1:1 unless you say otherwise. So change the GridView to ListView. Give the Card a child with size relative to viewport using MediaQuery so it doesn't get squeezed look.
class NewestView extends StatelessWidget {
const NewestView({
Key? key,
}) : super(key: key);
// final TestState state;
#override
Widget build(context) {
return ListView(
children: _generateGrid(15, context),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
);
}
List<Widget> _generateGrid(int number, BuildContext context) {
List<Widget> gridResult = [];
for (int i = 0; i < number; i++) {
IconData genIcon = Icons.ac_unit_outlined;
Image image = Image.network('https://via.placeholder.com/450x800.png');
gridResult.add(
Card(
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Flexible(
flex: 1,
child: Center(
// color: Colors.deepOrangeAccent,
child: Text(
'Test',
style: Theme.of(context)
.textTheme
.caption
?.copyWith(fontWeight: FontWeight.bold),
),
),
),
Flexible(
flex: 4,
child: Builder(builder: (context) {
return Container(
color: Colors.transparent,
child: image,
);
}),
),
Flexible(
flex: 2,
child: Container(
color: Colors.transparent,
child: const Icon(
Icons.monetization_on,
color: Colors.amber,
),
),
)
],
),
),
),
);
}
return gridResult;
}
}