How can I manage alignment with multiple rows and columns? - flutter

Question

I'm trying to make a card with some elements.
However it is hard to locate elements in right place with multiple rows and columns.
I tried with mainAxisAlignment, crossAxisAlignment, SizedBox, Expanded and so on.
Especially using Expanded make my widget disappear unlike my expectation.
How can I locate element to right place?
What I did
What I want
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Column(
children:[
Row(
children:[
Text('2'),
Text('3'),
Text('4'),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Text('7'),
Text('8'),
Text('9'),
Text('10'),
],
),
],
),
],
),
),
],
),
),

Answer 1

Here you go, this should be work as you wanted. i've tried to run it and yep it work
Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('1'),
Row(
children: [
Flexible(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
width: 70,
height: 70,
color: const Color(0xffD9D9D9),
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "2"),
PaddingText(text: "3")
],
),
Row(
children: [
PaddingText(text: "4"),
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "5"),
PaddingText(text: "6")
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "7"),
PaddingText(text: "8")
],
),
Row(
children: [
PaddingText(text: "9"),
PaddingText(text: "10")
],
),
],
),
],
),
),
],
),
],
),
),
and dont forget to add this to your project
class PaddingText extends StatelessWidget {
PaddingText({Key? key, required this.text}) : super(key: key);
String text;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Text(text),
);
}
}

Answer 2

This must work
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Expanded(
child: Column(
children:[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
Expanded(
child: Row(
children: [
Text('2'),
Text('3'),
],
),
),
Expanded(child: Row(
children: [
Text('4')
],
)),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Expanded(child: Row(
children: [
Text('7'),
Text('8'),
],
)),
Expanded(child: Row(
children: [
Text('9'),
Text('10'),
],
))
],
),
],
),
),
],
),
),
],
),
)