I wanted to add a green box below the yellow box. So please help me add that below. I got it mostly done. But don't know how to proceed with the rest. I am new to this and don't know what to do. I am just learning to code in Dart.
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(
height: double.infinity,
width: 100.0,
color: Colors.red,
),
Container(
height: 100,
width: 100.0,
color: Colors.yellow,
),
Container(
height: double.infinity,
width: 100.0,
color: Colors.blue,
),
],
),
),
),
debugShowCheckedModeBanner: false,
);
}
}```
To add a green box under the yellow box, wrap your yellow box with a Column
widget and put your yellow box below it.
Check the code below: It works perfectly:
MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: double.infinity,
width: 100.0,
color: Colors.red,
),
// your column widget here
Column(
children: <Widget>[
// your yellow box here
Container(
height: 100,
width: 100.0,
color: Colors.yellow,
),
// your green box here
Container(
height: 100,
width: 100.0,
color: Colors.green,
),
],
),
Container(
height: double.infinity,
width: 100.0,
color: Colors.blue,
),
],
),
),
),
debugShowCheckedModeBanner: false,
);
I hope this helps.
I think this App Brewery's challenge, isn't it? Here's a hint, to add a green box below yellow, wrap the yellow box container with column widget and add it to the recently created column widget.
import 'package:flutter/material.dart';
void main() {
runApp(Myapp());
}
class Myapp extends StatelessWidget {
// const ({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: double.infinity,
width: 100.0,
color: Colors.red,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// your yellow box here
Container(
height: 100,
width: 100.0,
color: Colors.yellow,
),
// your green box here
Container(
height: 100,
width: 100.0,
color: Colors.green,
),
],
),
Container(
height: double.infinity,
width: 100.0,
color: Colors.blue,
),
],
),
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.