Flutter ListView inside a Columns is not working

Question

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

Arsh Shaikh Arsh Shaikh · Accepted Answer · 2020-02-20T13:14:18

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:

and give it a fixed height.
if you want dynamic height then check out the MediaQuery Widget

Flutter ListView inside a Columns is not working

1 Answers