我有一个具有以下布局的Web应用程序:
我正在尝试创建一个布局相似的flutter应用程序,这是我到目前为止所拥有的:
出于复制目的,我的布局逻辑如下(在本示例中,我所有的代码都在main.dart
文件中)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Assemblers Tasks',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: MyHomePage(title: 'Assembly Tasks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownValue;
List<Map<String, dynamic>> buildItems = [];
getBuilds() {
List<Map<String, dynamic>> items = [];
items.add({"id": 10, "vehicleModel": "A10", "vehicleNumber": "TEST-00010"});
setState(() {
buildItems = items;
});
}
List<Map<String, dynamic>> buildSections = [];
getSections() {
List<Map<String, dynamic>> items = [];
items.add({
"id": 5,
"section": "Front",
});
items.add({
"id": 15,
"section": "Rear",
});
setState(() {
buildSections = items;
});
}
Future<List<Map<String, dynamic>>> getSystems(String buildSectionId) async {
List<Map<String, dynamic>> items = [];
if (int.parse(buildSectionId) == 5) {
items.add({
"id": 4,
"system": "Hydraulics",
});
items.add({
"id": 20,
"system": "High Voltage",
});
}
return items;
}
@override
void initState() {
getBuilds();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 275.0,
child: DropdownButton(
value: dropdownValue,
hint: Text("Choose Build"),
isExpanded: true,
items: buildItems
.map<Map<String, String>>((Map<String, dynamic> item) {
String id = item["id"].toString();
String name = item["vehicleModel"] + " " + item["vehicleNumber"];
return {"id": id, "name": name};
})
.toList()
.map<DropdownMenuItem<String>>((Map<String, String> item) {
return DropdownMenuItem<String>(
value: item["id"],
child: Text(item["name"]),
);
})
.toList(),
onChanged: (String newValue) {
getSections();
setState(() {
dropdownValue = newValue;
});
}),
),
],
),
Row(
children: <Widget>[
Container(
width: 150.0,
height: 60.0,
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: Text(
"SECTION",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Container(
width: 150.0,
height: 60.0,
color: Color(0xff444444),
child: Align(
alignment: Alignment.center,
child: Text(
"SYSTEM",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Expanded(
child: Container(
height: 60.0,
padding: EdgeInsets.only(left: 36.0),
margin: EdgeInsets.only(right: 72.0),
color: Color(0xff666666),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TASK",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0, style: BorderStyle.solid)),
height: MediaQuery.of(context).size.height - 225,
child: ListView.builder(
shrinkWrap: true,
itemCount: buildSections.length,
itemBuilder: (BuildContext context, int index) {
String section = buildSections[index]["section"] != null ? buildSections[index]["section"] : "";
String buildSectionId = buildSections[index]["id"].toString();
return Row(
children: <Widget>[
Container(
width: 150.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Center(
child: RotatedBox(
quarterTurns: -1,
child: Text(
section.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
FutureBuilder(
future: getSystems(buildSectionId),
builder: (BuildContext context, AsyncSnapshot systemsSnap) {
if (systemsSnap.connectionState == ConnectionState.waiting) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Please wait..."),
);
} else if (systemsSnap.hasError) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Oops! There was an error!"),
);
}
return Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width - 256.0,
child: ListView.builder(
shrinkWrap: true,
itemCount: systemsSnap.data.length,
itemBuilder: (context, index) {
Map<String, dynamic> system = systemsSnap.data[index];
String systemName = system["system"];
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
width: 150.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: RotatedBox(
quarterTurns: -1,
child: Text(
systemName.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
],
);
},
),
),
],
);
},
),
],
);
},
),
),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Container(
child: FloatingActionButton(
child: Icon(Icons.photo_library),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.library_books),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.list),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.history),
onPressed: () {
//TODO action
},
),
),
],
),
),
],
),
],
),
),
);
}
}
上面的代码已准备好粘贴到main.dart文件中并在虚拟设备(最好是平板电脑)上预览。
到目前为止,我已经尝试了在这些帖子中找到的解决方案,但无济于事:
-Make container widget fill parent vertically
-Flutter Container height same as parent height
-Flutter expand Container to fill remaining space of Row
-The equivalent of wrap_content and match_parent in flutter?
由于包含 Container 部分的 Row 行还具有由 FutureBuilder 生成的 ListView , 行的高度会自动扩展以适合 ListView 。我还希望容器部分扩展到与 Row 小部件扩展方式相同的高度;即,容器部分的底部边框,其中 FRONT ,应与高度电压系统的底部边框和右侧边框对齐 FRONT 部分 Container 的顶部,应该一直到顶部。
我已经花了3天没有解决办法。
我已经尝试过@MaadhavSharma提供的答案的建议,但出现以下异常:
════════渲染库捕获异常════════════════════════════
在performLayout()期间引发了以下断言: BoxConstraints强制将高度设为无限。
答案 0 :(得分:2)
我更改了一些结构以使其起作用,这是整个build()
方法:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 275.0,
child: DropdownButton(
value: dropdownValue,
hint: Text("Choose Build"),
isExpanded: true,
items: buildItems
.map<Map<String, String>>((Map<String, dynamic> item) {
String id = item["id"].toString();
String name = item["vehicleModel"] + " " + item["vehicleNumber"];
return {"id": id, "name": name};
})
.toList()
.map<DropdownMenuItem<String>>((Map<String, String> item) {
return DropdownMenuItem<String>(
value: item["id"],
child: Text(item["name"]),
);
})
.toList(),
onChanged: (String newValue) {
getSections();
setState(() {
dropdownValue = newValue;
});
}),
),
],
),
Row(
children: <Widget>[
Container(
width: 150.0,
height: 60.0,
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: Text(
"SECTION",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Container(
width: 150.0,
height: 60.0,
color: Color(0xff444444),
child: Align(
alignment: Alignment.center,
child: Text(
"SYSTEM",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Expanded(
child: Container(
height: 60.0,
padding: EdgeInsets.only(left: 36.0),
margin: EdgeInsets.only(right: 72.0),
color: Color(0xff666666),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TASK",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0, style: BorderStyle.solid)),
height: MediaQuery.of(context).size.height - 225,
child: ListView.builder(
shrinkWrap: true,
itemCount: buildSections.length,
itemBuilder: (BuildContext context, int index) {
String section = buildSections[index]["section"] != null ? buildSections[index]["section"] : "";
String buildSectionId = buildSections[index]["id"].toString();
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 150.0,
decoration: BoxDecoration(
color: Colors.green,
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Center(
child: RotatedBox(
quarterTurns: -1,
child: Text(
section.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
FutureBuilder(
future: getSystems(buildSectionId),
builder: (BuildContext context, AsyncSnapshot systemsSnap) {
if (systemsSnap.connectionState == ConnectionState.waiting) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Please wait..."),
);
} else if (systemsSnap.hasError) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Oops! There was an error!"),
);
}
return
Container(
width: MediaQuery.of(context).size.width - 256.0,
child: Column(
children: systemsSnap.data.map<Widget>((e) => Container(
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
width: 150.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: RotatedBox(
quarterTurns: -1,
child: Text(
e["system"].toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
)).toList(),
),
);
// Row(
// children: <Widget>[
// Container(
// width: MediaQuery.of(context).size.width - 256.0,
// child: ListView.builder(
// shrinkWrap: true,
// itemCount: systemsSnap.data.length,
// itemBuilder: (context, index) {
// Map<String, dynamic> system = systemsSnap.data[index];
// String systemName = system["system"];
// return Row(
// children: <Widget>[
//
// ],
// );
// },
// ),
// ),
// ],
// );
},
),
],
),
);
},
),
),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Container(
child: FloatingActionButton(
child: Icon(Icons.photo_library),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.library_books),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.list),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.history),
onPressed: () {
//TODO action
},
),
),
],
),
),
],
),
],
),
),
);
}
基本上,我将ListView
的第二个元素的Row
更改为Column
,因为它已经在ListView
内并且使其具有双滚动并且高度没有适当地扩大行的高度,而且我将Row
包裹在IntrinsicHeight
内,并将crossAxisAlignment: CrossAxisAlignment.stretch
放在Row
上,因此内容适合Row
的高度。
使用IntrinsicHeight
的代价很高,但是对于您构造窗口小部件的方式,我看不到其他解决方案。我建议您尝试优化所有结构,以便找到更好和最佳的解决方案。
答案 1 :(得分:1)
如果要拉伸容器以匹配其父容器,请对height和width属性使用double.infinity
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.yellowAccent,
child: Text("Hi"),
),
);
}
答案 2 :(得分:1)
我认为您将需要使用一些固定的高度,因为您正在使用ListView和FutureBuiulders。如果您可以摆脱FutureBuilders,则可能可以实现动态高度。请注意,父行的高度为320,子行的高度为160。
但是看看这个:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Assemblers Tasks',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: MyHomePage(title: 'Assembly Tasks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownValue;
List<Map<String, dynamic>> buildItems = [];
getBuilds() {
List<Map<String, dynamic>> items = [];
items.add({"id": 10, "vehicleModel": "A10", "vehicleNumber": "TEST-00010"});
setState(() {
buildItems = items;
});
}
List<Map<String, dynamic>> buildSections = [];
getSections() {
List<Map<String, dynamic>> items = [];
items.add({
"id": 5,
"section": "Front",
});
items.add({
"id": 15,
"section": "Rear",
});
setState(() {
buildSections = items;
});
}
Future<List<Map<String, dynamic>>> getSystems(String buildSectionId) async {
List<Map<String, dynamic>> items = [];
if (int.parse(buildSectionId) == 5) {
items.add({
"id": 4,
"system": "Hydraulics",
});
items.add({
"id": 20,
"system": "High Voltage",
});
}
return items;
}
@override
void initState() {
getBuilds();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 275.0,
child: DropdownButton(
value: dropdownValue,
hint: Text("Choose Build"),
isExpanded: true,
items: buildItems
.map<Map<String, String>>(
(Map<String, dynamic> item) {
String id = item["id"].toString();
String name = item["vehicleModel"] +
" " +
item["vehicleNumber"];
return {"id": id, "name": name};
})
.toList()
.map<DropdownMenuItem<String>>(
(Map<String, String> item) {
return DropdownMenuItem<String>(
value: item["id"],
child: Text(item["name"]),
);
})
.toList(),
onChanged: (String newValue) {
getSections();
setState(() {
dropdownValue = newValue;
});
}),
),
],
),
Row(
children: <Widget>[
Container(
width: 150.0,
height: 60.0,
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: Text(
"SECTION",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Container(
width: 150.0,
height: 60.0,
color: Color(0xff444444),
child: Align(
alignment: Alignment.center,
child: Text(
"SYSTEM",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Expanded(
child: Container(
height: 60.0,
padding: EdgeInsets.only(left: 36.0),
margin: EdgeInsets.only(right: 72.0),
color: Color(0xff666666),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TASK",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 1.0,
style: BorderStyle.solid)),
height: MediaQuery.of(context).size.height - 225,
child: ListView.builder(
shrinkWrap: true,
itemCount: buildSections.length,
itemBuilder: (BuildContext context, int index) {
String section = buildSections[index]["section"] != null
? buildSections[index]["section"]
: "";
String buildSectionId =
buildSections[index]["id"].toString();
return Container(
height: 320,
child: Row(
children: <Widget>[
Container(
width: 120.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.yellow,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
padding:
EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Center(
child: RotatedBox(
quarterTurns: -1,
child: Text(
section.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.orange,
child: false ? Text(" ") : FutureBuilder(
future: getSystems(buildSectionId),
builder: (BuildContext context,
AsyncSnapshot systemsSnap) {
if (systemsSnap.connectionState ==
ConnectionState.waiting) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Please wait..."),
);
} else if (systemsSnap.hasError) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Oops! There was an error!"),
);
}
return Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width -
256.0,
child: ListView.builder(
shrinkWrap: true,
itemCount: systemsSnap.data.length,
itemBuilder: (context, index) {
Map<String, dynamic> system =
systemsSnap.data[index];
String systemName = system["system"];
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
0.0, 16.0, 0.0, 16.0),
width: 50.0,
height: 160,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border(
right: BorderSide(
color: Colors.red,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
child: Column(
children: <Widget>[
Align(
alignment:
Alignment.center,
child: RotatedBox(
quarterTurns: -1,
child: Text(
systemName
.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
],
),
),
],
);
},
),
),
],
);
},
),
),
),
],
),
);
},
),
),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Container(
child: FloatingActionButton(
child: Icon(Icons.photo_library),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.library_books),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.list),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.history),
onPressed: () {
//TODO action
},
),
),
],
),
),
],
),
],
),
),
);
}
}
答案 3 :(得分:0)
诀窍是在要扩展以填充行高的某些容器中使用constraints: BoxConstraints.expand()
。
尝试这样的事情:
Scaffold(
appBar: AppBar(
title: Text("Title"),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.blue,
child: Text("box 1")),
),
Expanded(
flex: 2,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.red,
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
padding:
EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.lightGreen,
child: Text("box 2")),
),
Expanded(
flex: 2,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.lightBlue,
child: Text("box 3")),
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
padding:
EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.purple,
child: Text("box 4")),
),
Expanded(
flex: 2,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.orange,
child: Text("")),
),
],
),
),
),
],
)),
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.yellow,
child: Text("box 5")),
),
Expanded(
flex: 2,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.green,
child: Text("box 6")),
),
],
),
),
),
],
)),
);