Flutter scrolling Row - flutter

Question

i have a Row inside a listview that it does not scroll with the rest of listview content i wanted to be scrollable, by the wat the cards inside the listView scrolls fine but not the row, i tried to put it inside a Stack , but still same problem
here is my code
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar()
body: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context, route.Prochaines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1),
),
child: Container(
child: Text(
"Prochianes",
style: TextStyle(
color: Color(0xFF30a6ca),
),
),
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, route.EnCours_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("En cours"),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, route.Termines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("Terminés"),
),
),
],
),
Container(width: 300, height: 200, color: Colors.black),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.yellow),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.green),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.brown),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
],
),
);
i have a Row inside a listview that it does not scroll with the rest of listview content i wanted to be scrollable, by the wat the cards inside the listView scrolls fine but not the row, i tried to put it inside a Stack , but still same problem
Thanks for your help.

Answer 1

Please try this:
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
// Navigator.pushNamed(context, route.Prochaines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1),
),
child: Container(
child: Text(
"Prochianes",
style: TextStyle(
color: Color(0xFF30a6ca),
),
),
),
),
),
GestureDetector(
onTap: () {
// Navigator.pushNamed(context, route.EnCours_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("En cours"),
),
),
GestureDetector(
onTap: () {
// Navigator.pushNamed(context, route.Termines_route);
},
child: Container(
padding: EdgeInsets.all(17.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Text("Terminés"),
),
),
],
),
Expanded(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Container(width: 300, height: 200, color: Colors.black),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.yellow),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.green),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.brown),
SizedBox(
height: 30,
),
Container(width: 300, height: 200, color: Colors.red),
],
),
),
],
),

Answer 2

You can change the widget row to a ListView and do the following:
Widget myWidget() {
return SizedBox(
height: 100, // Important to set a high
child: ListView(
scrollDirection: Axis.horizontal, // Set the scroll direction
shrinkWrap: true, // Set the shrinkWrap to true
children: <Widget>[
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
Container(width: 100, height: 100, color: Colors.red),
// You can add as many as you want ...
],
),
);
}