how to add multiple containers inside a container in flutter - flutter

Question

I'm a student learning flutter. How do I add multiple containers to my flutter code. as shown in the right side picture. I was tried multiple times but alignments went wrong. can someone tell me where do I start to add another container set? I want to add 5 containers that display with xs, s, m,l, xl sizes texts. can someone explain how to do this?
import 'package:flutter/material.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
),
body: Column(
children: <Widget> [
Expanded(
child: Container(height: MediaQuery.of(context).size.height*.8,
padding: EdgeInsets.all(10.0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image23.png"),
//fit: BoxFit.fitHeight,
),
),
),
),
Stack(
alignment: Alignment.bottomRight,
children: <Widget> [
// Max Size
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
alignment: const Alignment (1,1),
height: 400,
width: 350,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(10, 40, 100, 40),
child: Text(
"Summer Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 270, 100),
child: Text(
"Sizes",
style: TextStyle(
fontSize: 12,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 40),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Add to Cart ",
),
style: ElevatedButton.styleFrom(
primary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20))),
padding: const EdgeInsets.all(15)),
),
),
]
),
],
),
);
}
}

Answer 1

Try below code hope its helpful to you.
body: Column(
children: <Widget>[
Expanded(
child: Container(
height: MediaQuery.of(context).size.height * .8,
padding: EdgeInsets.all(10.0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image23.png"),
//fit: BoxFit.fitHeight,
),
),
),
),
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
// Max Size
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
alignment: const Alignment(1, 1),
height: 400,
width: 350,
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 40, 100, 40),
child: Text(
"Summer Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 270, 100),
child: Text(
"Sizes",
style: TextStyle(
fontSize: 12,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XS');
},
child: Text('XS'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('X');
},
child: Text('S'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('M');
},
child: Text('M'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('L');
},
child: Text('L'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XL');
},
child: Text('XL'),
),
],
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 40),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Add to Cart ",
),
style: ElevatedButton.styleFrom(
primary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20),
),
),
padding: const EdgeInsets.all(15),
),
),
),
],
),
],
),
Result screen->

Answer 2

In your case, since none of the widgets overlap, you find it easier to use Row and Column Widget. These widgets allow you to add and arrange multiple child widgets. For example, to lay out the sizes:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//ADD YOUR SIZES HERE
//e.g., Text('XS'), Text('S')...
],
)
I strongly recommend you start by reading the layout guide for flutter. There is a section that answers your question directly titled laying out multiple widgets.

Answer 3

Good to see that you are trying to make it on your own. I see that you are already using a Column widget, so putting the sizes in shouldn't be much of a problem for you.
To put Container widgets next to each other, use a Row widget, explained here: https://api.flutter.dev/flutter/widgets/Row-class.html

Answer 4

Use Row() and Column() for arrangements item in the row and column.