I'm trying to create a horizontally scrollable grid of containers in Flutter using GridView, but I'm only able to display one item. I want to show multiple items (containers) side by side in a scrollable horizontal grid. Here's the code I tried:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
//color: Colors.blue,
child: IconButton(
// Use the EvaIcons class for the IconData
icon: weatherIcon, onPressed: () {},
),
),
Text(
sTemprature + " \u2103",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14.sp,
color: AppTheme.grey,
),
),
],
)
],
),
children: [
Padding(
padding: EdgeInsets.only(top: 0.0, left: 10.w, right: 10.w),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: Colors.white,
elevation: 10,
child:
Row(
children: [
Padding(padding: EdgeInsets.only(
top: 5.h, left: 10.w, right: 0.w),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 70.w,
height: 70.h,
//color: Colors.red,
child: weatherIconInside
),
Text(
'$weatherDesc',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
letterSpacing: 0.2,
color: AppTheme.grey,
),
),
],
)
),
Padding(padding: EdgeInsets.only(
top: 5.h, left: 20.w, right: 0.w),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Min',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.sp,
letterSpacing: 0.2,
color: AppTheme.grey,
),
),
Text(
'18 ' + '\u2103',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 24.sp,
letterSpacing: 0.2,
color: AppTheme.grey,
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.black, width: 10.0),
),
),
),
Text(
'Max',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.sp,
letterSpacing: 0.2,
color: AppTheme.grey,
),
),
Text(
'28 ' + '\u2103',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 24.sp,
letterSpacing: 0.2,
color: AppTheme.grey,
),
),
SizedBox(height: 10.h,)
],
)
),
],
)
),
)
],
),
);
}
- I was fetching a 5-day weather forecast from an API and wanted to display it in a horizontally scrollable grid view within a list.
