Ok I don't want to take advantage and post too many question but I have another flutter related question. I'm trying to set a background color to a card that I created that holds a ListView, but as soon as I give the container any property I repeatedly get this error:
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderColoredBox#0caae relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'
code below:
class ThisView extends StatefulWidget {
static const routeName = 'this-view';
@override
_ThisViewState createState() => _ThisViewState();
}
class _ThisViewState extends State<ThisView> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
home: Scaffold(
appBar: AppBar(
title: Text("Title"),
centerTitle: true,
backgroundColor: Colors.Green),
body: Container(
color: Colors.grey,
child: Column(
children: [
customCard1(),
Container(
// color: Colors.white,
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
left: 24, right: 24, top: 28, bottom: 14),
child: Text(
"Subtitle",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding:
EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: Text(
"23rd of Oct",
style: TextStyle(
fontWeight: FontWeight.w500,
),
),
),
Expanded(
child: ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 200,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 200,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 200,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
)
]),
))
],
))),
);
}
}
I commented out where I would like to set the color for the card. In the future I am going to dynamic render the listView so it might not take up the whole space so I want the card background color set instead of something like setting the whole background color to white and just putting a grey SizeBox in-between the cards
Does anyone know what might be causing this error when I try to add properties to the Container?
note: I took this code out of a custom card Widget I had so I could maybe debug it easier, also I didn't include customCard1 in this code snippet.
Please let me know if anymore info is needed.
CodePudding user response：
Container need the know what about the size. First check your device size with MediaQuery class later give the container size what do you want.
Sample like that
class ThisView extends StatefulWidget {
static const routeName = 'this-view';
@override
_ThisViewState createState() => _ThisViewState();
}
class _ThisViewState extends State<ThisView> {
@override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(contex).size.height,
double screenWidth = MediaQuery.of(contex).size.width,
return MaterialApp(
title: 'Title',
home: Scaffold(
appBar: AppBar(
title: Text("Title"),
centerTitle: true,
backgroundColor: Colors.Green),
body: Container(
color: Colors.grey,
child: Column(
children: [
customCard1(),
Container(
height :screenHeight/4,
width :screenWidth/2,
// color: Colors.white,
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
left: 24, right: 24, top: 28, bottom: 14),
child: Text(
"Subtitle",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding:
EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: Text(
"23rd of Oct",
style: TextStyle(
fontWeight: FontWeight.w500,
),
),
),
Expanded(
child: ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 200,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 200,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 200,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
)
]),
))
],
))),
);
}
}
CodePudding user response：
Please check, is it work for you?
import 'package:flutter/material.dart';
class ThisView extends StatefulWidget {
static const routeName = 'this-view';
@override
_ThisViewState createState() => _ThisViewState();
}
class _ThisViewState extends State<ThisView> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
home: Scaffold(
appBar: AppBar(
title: Text("Title"),
centerTitle: true,
backgroundColor: Colors.green),
body: Container(
color: Colors.grey,
child: Column(
children: [
customCard1(),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
left: 24, right: 24, top: 28, bottom: 14),
child: Text(
"Subtitle",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding:
EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: Text(
"23rd of Oct",
style: TextStyle(
fontWeight: FontWeight.w500,
),
),
),
Expanded(
child: ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 200,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 200,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 200,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
)
]),
)
],
))),
);
}
}
CodePudding user response：
instead of using a container to color the background, you can use the Card widget color property which changes the background color of the card. so something like Card(color: Colors.white).
CodePudding user response：
home: Scaffold(
backgroundColor: Color.fromRGBO(178, 186, 187, 1.0),
In fromRGBO R --> Red, G -- Green, B --> Blue, O --> opacity is alpha channel of this color as a double, with 0.0 being transparent and 1.0 being fully opaque.
https://htmlcolorcodes.com/ refer this link for color combinations.
This will set the background color. You can also use
home: Scaffold(
backgroundColor: Colors.black,
or any other color.. https://api.flutter.dev/flutter/material/Colors-class.html
Complete code:
class ThisView extends StatefulWidget {
static const routeName = 'this-view';
@override
_ThisViewState createState() => _ThisViewState();
}
class _ThisViewState extends State<ThisView> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
home: Scaffold(
backgroundColor: Color.fromRGBO(178, 186, 187, 1.0),
appBar: AppBar(
title: Text("Title"),
centerTitle: true,
backgroundColor: Colors.Green),
body: Container(
color: Colors.grey,
child: Column(
children: [
customCard1(),
Container(
// color: Colors.white,
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
left: 24, right: 24, top: 28, bottom: 14),
child: Text(
"Subtitle",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding:
EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: Text(
"23rd of Oct",
style: TextStyle(
fontWeight: FontWeight.w500,
),
),
),
Expanded(
child: ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 200,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 200,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 200,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
)
]),
))
],
))),
);
}
}