Flutter showing hasSize error when wrap container in column

Question

I am getting an error when I wrap my container in the column widget. I need 2 containers in a column but when I wrap it in column widget it's showing this error

'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

Showing this in Column line error

Here is my code

class _PlaceListState extends State<PlaceList> {
  final List _places = [
    {'name': 'Hunza', 'where': 'Gilgit Baltistan'},
    {'name': 'Skardu' ,'where': 'Gilgit Baltistan'},
    {'name': 'Murree', 'where': 'Gilgit Baltistan'},
  ];

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Container(
        margin: EdgeInsets.only(left: 40),
        width: MediaQuery.of(context).size.width * 0.5,
        child: ListView.builder(
            itemCount: _places.length,
            itemBuilder: (ctx, int index) {
              return Container(
                padding: EdgeInsets.only(top: 50),
                child: Column(
                  children: <Widget>[
                    Text(_places[index]['name'], style: TextStyle(fontSize: 20),),
                    Container(
                      padding: EdgeInsets.only(top: 20),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(20.0),
                        child: Card(
                          elevation: 40.0,
                          child: Container(
                            width: 200,
                            child: Image(image: AssetImage('assets/images/500place.jpg')),
                          ),
                        ),
                      ),
                    ),
                    Padding(
                        padding: const EdgeInsets.only(top: 7),
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.favorite_border, size: 20),
                            Spacer(),
                            Text(
                              _places[index]['where'],
                            ),
                          ],
                        )
                    ),

                  ],
                ),
              );
            }),
      )
    ],);
  }
}

The screen output i use Navigation rale so that's why I set the width and its working fine without Column widget

Answer 1

You can copy paste run full code below
Step 1: Provide height when use PlaceList() , you can use Expanded(child: PlaceList())
Step 2: add shrinkWrap: true for ListView
Step 3: Use Expaneded flex to provide height for Container() 1 and 2

Column(
      children: <Widget>[
        Expanded(
          flex: 3,
      ...
      Expanded(
        flex: 1,
        child: Center(child: Container(child: Text("Second Container"))))

working demo

full code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: PlaceList()),
          ],
        ),
      ),
    );
  }
}

class PlaceList extends StatefulWidget {
  @override
  _PlaceListState createState() => _PlaceListState();
}

class _PlaceListState extends State<PlaceList> {
  final List _places = [
    {'name': 'Hunza', 'where': 'Gilgit Baltistan'},
    {'name': 'Skardu', 'where': 'Gilgit Baltistan'},
    {'name': 'Murree', 'where': 'Gilgit Baltistan'},
    {'name': 'abc', 'where': 'def'},
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Container(
            margin: EdgeInsets.only(left: 40),
            width: MediaQuery.of(context).size.width * 0.5,
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: _places.length,
                itemBuilder: (ctx, int index) {
                  return Container(
                    padding: EdgeInsets.only(top: 50),
                    child: Column(
                      children: <Widget>[
                        Text(
                          _places[index]['name'],
                          style: TextStyle(fontSize: 20),
                        ),
                        Container(
                          padding: EdgeInsets.only(top: 20),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(20.0),
                            child: Card(
                              elevation: 40.0,
                              child: Container(
                                width: 200,
                                child: Image(
                                    image: AssetImage(
                                        'assets/images/500place.jpg')),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                            padding: const EdgeInsets.only(top: 7),
                            child: Row(
                              children: <Widget>[
                                Icon(Icons.favorite_border, size: 20),
                                Spacer(),
                                Text(
                                  _places[index]['where'],
                                ),
                              ],
                            )),
                      ],
                    ),
                  );
                }),
          ),
        ),
        Expanded(
            flex: 1,
            child: Center(child: Container(child: Text("Second Container"))))
      ],
    );
  }
}

Answer 2

try adding height: // define height in double to your container