How to extend the full width of the child in Flutter? - flutter

Question

I have a next markup:
The red block is ListView with a horizontal orientation.
The purple block is just Container for all content.
The white is Container as well but with paddings.
I want to expand the width of the red block on full width. How can I do it? It should look like this:
Code of the markup:
class FifaApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: Container(
padding: EdgeInsets.symmetric(
vertical: 60.0,
horizontal: 30.0,
),
color: Color(0xFFffffff),
alignment: Alignment.topLeft,
child: Container(
color: Colors.purple,
margin: EdgeInsets.symmetric(vertical: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Math Reports"),
Container(
color: Colors.red,
padding: EdgeInsets.symmetric(vertical: 10.0),
height: 170.0,
child: ListView(
scrollDirection: Axis.horizontal,
// children: renderItems(), // the example of code without green blocks
),
),
],
),
),
),
);
}
}

Answer 1

You can use Stack as below
class FifaApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: Container(
padding: EdgeInsets.symmetric(
vertical: 60.0,
),
color: Color(0xFFffffff),
alignment: Alignment.topLeft,
child: Stack(
children: <Widget>[
Container(
color: Colors.purple,
margin: EdgeInsets.symmetric(horizontal: 30),
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text(
"Math Reports",
style: TextStyle(color: Colors.white),
),
),
Container(
height: 170,
color: Colors.red,
margin: EdgeInsets.only(top: 30),
child: ListView(
scrollDirection: Axis.horizontal,
),
)
],
),
),
);
}
}