[英]I want to add a green box below the yellow one
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.
但不知道如何继续使用 rest。 I am new to this and don't know what to do.
我是新手,不知道该怎么做。 I am just learning to code in Dart.
我只是在 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.要在黄色框下方添加一个绿色框,请使用
Column
小部件包裹黄色框并将黄色框放在其下方。
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?我认为这个 App Brewery 的挑战,不是吗? 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,
),
],
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.