Reputation: 53
I am trying to add a list view inside a column but it crashes
I have got the following Errors:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
RenderBox was not laid out: RenderFlex#e1a1e relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize'
The method '>' was called on null. Receiver: null
This is my Code:
import 'package:flutter/material.dart';
class CheckinAccessories extends StatefulWidget {
@override
_CheckinAccessoriesState createState() => _CheckinAccessoriesState();
}
class _CheckinAccessoriesState extends State<CheckinAccessories> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0XFF3a6fd8),
body: Container(
padding: EdgeInsets.only(top: 30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[backButton(), welcomeText(), mainContent()],
),
),
bottomNavigationBar: Container(
height: 60.0,
child: FlatButton(
onPressed: () {},
color: Color(0XFF3a6fd8),
textColor: Colors.white,
child: Text('Next', style: TextStyle(fontSize: 20.0)),
),
),
);
}
Container backButton() {
return Container(
margin: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton.icon(
color: Color(0XFF265abf),
onPressed: () {
Navigator.of(context).pop(true);
},
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
label: Text('Back',
style: TextStyle(
color: Colors.white,
))),
],
),
);
}
Container welcomeText() {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg_car.png"),
fit: BoxFit.contain)),
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Accessories',
style: TextStyle(
fontSize: 40.0,
color: Colors.white,
fontWeight: FontWeight.bold,
height: 1.3)),
],
));
}
Container mainContent() {
return Container(
padding: EdgeInsets.all(30.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50), topRight: Radius.circular(50)),
color: Color(0XFFedeff1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Accessories List',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Color(0XFF132758)),
),
Row(
children: <Widget>[
CheckboxWidget()
],
)
],
),
);
}
}
class CheckboxWidget extends StatefulWidget {
@override
CheckboxWidgetState createState() => new CheckboxWidgetState();
}
class CheckboxWidgetState extends State {
Map<String, bool> values = {
'Apple': false,
'Banana': false,
'Cherry': false,
'Mango': false,
'Orange': false,
};
var tmpArray = [];
getCheckboxItems() {
values.forEach((key, value) {
if (value == true) {
tmpArray.add(key);
}
});
// Printing all selected items on Terminal screen.
print(tmpArray);
// Here you will get all your selected Checkbox items.
// Clear array after use.
tmpArray.clear();
}
@override
Widget build(BuildContext context) {
// return Column(
// children: <Widget>[
// Text('test')
// ],
// );
return Column(children: <Widget>[
Text('test'),
Expanded(
child: ListView(
children: values.keys.map((String key) {
return new CheckboxListTile(
title: new Text(key),
value: values[key],
activeColor: Colors.pink,
checkColor: Colors.white,
onChanged: (bool value) {
setState(() {
values[key] = value;
});
},
);
}).toList(),
),
),
]);
}
}
Upvotes: 0
Views: 1658
Reputation: 1231
There's a few things you need to understand first.
Column takes as much height as it can get. Since in your case Column doesn't have a height neither does it have a parent to constrain it's height. So your column takes INFINITE height.
Further more Expanded has similar functionality as that of column in regards to the feature that Expanded is supposed to take up all the space remaining out the height of it's parent. For e.g. if you have
Container(
height: 400,
child: Column(children: <Widget>[
Text('test'),
Expanded(
child: ...
),
]),
)
If the Text takes up 50 then the rest of the height will be assigned to Expanded
And since in your case Column already takes INFINITE height Expanded will get the remaining except Text which again is INFINITE.
The Solution:
Wrap your Column with a container and then use any one of the two:
Upvotes: 3