I want my row to be scrollable and this row has multiple columns. Each column has a container. How to implement this in a flutter. Placing the row in SingleChildSCrollView, my entire screen becomes blank. Can anyone please suggest me a good option to make my row scrollable?
The actual code I'm facing this problem with is too big. So I am rendering the sample first column of my row. Here is my code:
Row(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xfff1f1f1),
),
child: SizedBox(
width: 140.0,
height: 150.0,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
SizedBox(
width: 150.0,
height: 80.0,
child: const Image(
width: 150,
image: AssetImage(
"images/golf_shoe.png",
),
),
),
]),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('Golf Shoe in\nBlackkk',
style: GoogleFonts.lato(
fontSize: 17,
color: Color(0xff5a5a5a),
fontWeight: FontWeight.w400,
letterSpacing: 0.5)),
]),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('\$568.00',
style: GoogleFonts.lato(
fontSize: 17,
fontWeight: FontWeight.w500,
letterSpacing: 0.5)),
Padding(
padding: const EdgeInsets.only(
top: 0, left: 25),
child: Icon(Icons.add_shopping_cart,
size: 20),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('In stock',
style: GoogleFonts.lato(
fontSize: 14,
color: Color(0xff1e76b2),
fontWeight: FontWeight.w500,
letterSpacing: 0.5)),
],
),
),
])]))]),
Remove the Row wrapped with SingleChildScrollView, and set MainAxisSize.min for inner Column
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xfff1f1f1),
),
child: SizedBox(
width: 140.0,
height: 150.0,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
SizedBox(
width: 150.0,
height: 80.0,
child: const Image(
width: 150,
image: AssetImage(
"images/golf_shoe.png",
),
),
),
]),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('Golf Shoe in\nBlackkk',
style: GoogleFonts.lato(
fontSize: 17,
color: Color(0xff5a5a5a),
fontWeight: FontWeight.w400,
letterSpacing: 0.5)),
]),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('\$568.00',
style: GoogleFonts.lato(
fontSize: 17,
fontWeight: FontWeight.w500,
letterSpacing: 0.5)),
Padding(
padding: const EdgeInsets.only(
top: 0, left: 25),
child: Icon(Icons.add_shopping_cart,
size: 20),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('In stock',
style: GoogleFonts.lato(
fontSize: 14,
color: Color(0xff1e76b2),
fontWeight: FontWeight.w500,
letterSpacing: 0.5)),
],
),
),
])]))