![](/img/trans.png)
[英]Flutter: Why I am getting "Vertical viewport was given unbounded height" error?
[英]error Vertical viewport was given unbounded height
我如何擁有動態列表視圖和一些靜態行? 我想創建一個關於公司產品的頁面,客戶檢查他們的產品,大約,在頁面的第一頁,我有一些詳細信息行,如目的地,重量,...。對於產品,底部有一個顯示更多細節的垂直時間線,但我有一些錯誤,我該如何解決?
Widget build(BuildContext context) {
return Scaffold(
body: new Container(
padding: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
children: <Widget>[
new Flexible(
child: new ListView(children: <Widget>[
new Container(
padding: EdgeInsets.symmetric(vertical: 20.0),
child: Column(
children: <Widget>[
new Column(
children: <Widget>[
new Text("Package Details",
style: new TextStyle(
fontWeight: FontWeight.w600,
color: Color(0xffd01818),
fontSize: 25.0,
)),
new Container(
//padding: new EdgeInsets.symmetric(vertical: 0.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffffe88e),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"Packages Count:",
style: new TextStyle(
fontWeight: FontWeight.w400,
),
),
],
))),
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffff25b43),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"istanbul (IST)",
style: new TextStyle(
fontWeight: FontWeight.w400,
),
),
],
))),
],
),
),
new Container(
padding: new EdgeInsets.symmetric(vertical: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffffe88e),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"Payment Method:",
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffff25b43),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
'2',
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
],
),
),
new Container(
// padding: new EdgeInsets.symmetric(vertical: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffffe88e),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"Origin:",
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffff25b43),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"2",
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
],
),
),
],
),
],
)),
]),
),
new Row(
children: <Widget>[
new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Stack(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(left: 50.0),
child: new Card(
margin: new EdgeInsets.all(20.0),
child: new Container(
width: double.infinity,
height: 200.0,
color: Colors.green,
),
),
),
new Positioned(
top: 0.0,
bottom: 0.0,
left: 35.0,
child: new Container(
height: double.infinity,
width: 1.0,
color: Colors.blue,
),
),
new Positioned(
top: 100.0,
left: 15.0,
child: new Container(
height: 40.0,
width: 40.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Container(
margin: new EdgeInsets.all(5.0),
height: 30.0,
width: 30.0,
decoration: new BoxDecoration(
shape: BoxShape.circle, color: Colors.red),
),
),
)
],
);
},
itemCount: 5,
)
],
)
],
),
));
}
}
[1]: https://i.stack.imgur.com/yKM8N.jpg
容器應該被賦予高度屬性。
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
class ShowDetails extends StatefulWidget {
// var res;
// ShowDetails({this.res});
@override
_ShowDetailsState createState() => _ShowDetailsState();
}
class _ShowDetailsState extends State<ShowDetails> {
// var data;
// void initState() {
// // TODO: implement initState
// super.initState();
// data = widget.res['data'];
// }
@override
Widget build(BuildContext context) {
return Scaffold(
body: new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return new Stack(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(left: 50.0),
child: new Card(
margin: new EdgeInsets.all(20.0),
child: new Container(
width: double.infinity,
height: 200.0,
color: Colors.green,
),
),
),
new Positioned(
top: 0.0,
bottom: 0.0,
left: 35.0,
child: new Container(
height: double.infinity,
width: 1.0,
color: Colors.blue,
),
),
new Positioned(
top: 100.0,
left: 15.0,
child: new Container(
height: 40.0,
width: 40.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Container(
margin: new EdgeInsets.all(5.0),
height: 30.0,
width: 30.0,
decoration: new BoxDecoration(
shape: BoxShape.circle, color: Colors.red),
),
),
)
],
);
},
itemCount: 5,
)
],
)),
new Container(
padding: EdgeInsets.symmetric(vertical: 20.0),
child: Column(
children: <Widget>[
new Column(
children: <Widget>[
new Text("Package Details",
style: new TextStyle(
fontWeight: FontWeight.w600,
color: Color(0xffd01818),
fontSize: 25.0,
)),
new Container(
//padding: new EdgeInsets.symmetric(vertical: 0.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffffe88e),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"Packages Count:",
style: new TextStyle(
fontWeight: FontWeight.w400,
),
),
],
))),
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffff25b43),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"istanbul (IST)",
style: new TextStyle(
fontWeight: FontWeight.w400,
),
),
],
))),
],
),
),
new Container(
padding: new EdgeInsets.symmetric(vertical: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffffe88e),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"Payment Method:",
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffff25b43),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
'2',
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
],
),
),
new Container(
// padding: new EdgeInsets.symmetric(vertical: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffffe88e),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"Origin:",
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
new Expanded(
child: new Container(
padding:
EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.center,
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(
Radius.circular(10.0)),
color: Color(0xffff25b43),
),
child: new Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
new Text(
"2",
style: new TextStyle(
fontWeight: FontWeight.w400),
),
],
))),
],
),
),
],
),
],
)),
],
)
],
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.