Setting a color on a container that container a ListView

user_16228564 0
Viewed 315

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.

dart flutter listview
4 Answers

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')),
                                ),
                              ],
                            ),
                          )
                        ]),
                  ))
                ],
              ))),
    );
  }
}
user_154622980

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')),
                                ),
                              ],
                            ),
                          )
                        ]),
                  )
                ],
              ))),
    );
  }
}
user_150492640 
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')),
                                ),
                              ],
                            ),
                          )
                        ]),
                  ))
                ],
              ))),
    );
  }
}
user_166735570

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).

user_132122640
Related