ListView with Tiles not working in Flutter

Question

Why is my ListView not showing the expected tiles ?

class DepartureCell extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: new Text("Test"),
          onTap: () {},
        );
      }
    );
  }
}

The error says:

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performResize():
flutter: Vertical viewport was given unbounded height.
flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical
flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation
flutter: typically happens when a scrollable widget is nested inside another scrollable widget.
flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because
flutter: there will always be enough vertical space for the children. In this case, consider using a Column
flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
flutter: the height of the viewport to the sum of the heights of its children.

Since there is something going on with the unbound height, I also tried the following:

Code also not working:

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return SizedBox(
          width: double.infinity,
          height: 40.0,
          child: ListTile(
            title: Text("Test"),
            onTap: () {},
            trailing: Text("Test"),
          ),
        );
      }
    );
  }
}

How can I get this to work in Flutter ???

I also tried with Column - but same thing....not working !

Here the Column-code that is, again not working:

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListView.builder(
          padding: EdgeInsets.all(0.0),
          itemCount: 10,
          itemBuilder: (BuildContext context, int position) {
            return SizedBox(
              width: double.infinity,
              height: 40.0,
              child:ListTile(
                title: Text("Test"),
                onTap: () {},
                trailing: Text("Test"),
              ),
            );
          }
        ),
      ]
    );
  }
}

Answer 1

I had same issue .... after doing some hit and try i found that issue generates when device screen is locked or off.

unlock screen and reload/rerun app from editor may fix the issue as it does for me.

Answer 2

I don't know what was your earlier code. If you can post your earlier code than I can explain you the exception.

Here is the simplified version of the code.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("CH Station Demo"),
          ),
          body: DepartureCell()),
      //home: TrackerApp(),
    );
  }
}

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: EdgeInsets.all(8.0),
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("Test"),
            onTap: () {},
            trailing: Text("Test2"),
          );
        });
  }
}

Answer 3

Here is a working code that I have found (see below)...

However, I am sure it can be simplified. But how ?? Any suggestions ??

Here is the working entire code:

First I call DepartueCell() in main.dart....

import 'package:flutter/material.dart';
import './departures/cells/departure_cell.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("CH Station Demo"),
        ),
        body: DepartureCell()
      ),
    );
  }
}

Then I do the rest....

import 'package:flutter/material.dart';
import './../../models/ch_departure.dart';

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView.builder(
          padding: EdgeInsets.all(8.0),
          itemCount: 10,
          itemBuilder: (context, index) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  width: double.infinity,
                  height: 50.0,
                  child: ListTile(
                    title: Text("Test"),
                    onTap: () {},
                    trailing: Text("Test2"),
                  ),
                )
              ],
            );
          }
        ),
    );
  }
}

Can somebody, please, explain why it is suddenly working once I pack everything inside Center and placing the Column inside the ListView.builder ??

Is there a more simple solution to this ??