Flutter question: How to insert a column inside a row in Flutter - flutter

Question

My aim is to reproduce this UI layout in Flutter:
So far I have produced a layout with the below code which is missing the green square below the yellow square in the middle of the screen. How can i include the green square below the yellow square and center them? Can this be done by inserting a column inside a row? Thanks.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 100.0,
color: Colors.red,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
color: Colors.blue,
),
],
),
),
),
);
}
}

Answer 1

Simply wrap the inner container with a Column widget.
Here you go
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 100.0,
color: Colors.red,
),
Column(
mainAxisAlignment:MainAxisAlignment.center ,
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
],
),
Container(
width: 100.0,
color: Colors.blue,
),
],
),
),
),
);
}
}

Answer 2

import 'package:flutter/material.dart';
void main() => runApp(DiceApp());
class DiceApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
appBar: AppBar(
title: Text('Dice App'),
backgroundColor: Colors.teal,
centerTitle: true,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: 100,
color: Colors.red,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
width: 100,
child: Text('2'),
color: Colors.yellow,
),
Container(
height: 100,
width: 100,
child: Text('2'),
color: Colors.green,
),
],
),
Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Container(
width: 100,
// alignment: Alignment.center,
child: Text('1'),
color: Colors.blue,
),
])
],
),
),
);
}
}

Answer 3

This code gives you the same layout shown in this example
// Scroll Area
child: ListTile(
// Horizontal Row
title: Row(
children: <Widget>[
// First element in Row
ImageIcon(
AssetImage("assets/images/my_photo.png"),
),
// Second element in Row
Column(
children: [
child: Text('My name'),
Row(
children: [
child: Text('My title'),
],
Image.asset(
'assets/images/more.png',
),
),
], // End of Column children
), // End of Column
], // End of Row children
), // End of Row
), // End of Scroll

Answer 4

remember to add infinite height to the containers in red and blue
here is my flutter code that I made .
Create 04 containers and wrap the middle one in a column.
body: SafeArea(
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text(' Container 1'),
color: Colors.red,
width: 100.0,
height: double.infinity,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text(' Container 2'),
color: Colors.yellow,
width: 100.0,
height:100.0,
),
Container(
child: Text(' Container 3'),
color: Colors.green,
width: 100.0,
height:100.0,
),
],
),
Container(
child: Text('Container 4'),
color: Colors.blue,
width: 100.0,
height: double.infinity,
)
],
)),
),
);
}
}