Listbuilder in separate widget not working

Question

I tried the listbuilder demo from Flutter.io. That works great, however I would like to add the page a textview, so I moved the listbuilder into a separate Widget, that throws the following error:

Exception has occurred. FlutterError (Cannot hit test a render box that has never been laid out. The hitTest() method was called on this RenderBox: RenderStack#894cd NEEDS-LAYOUT NEEDS-PAINT Unfortunately, this object's geometry is not known at this time, probably because it has never been laid out. This means it cannot be accurately hit-tested. If you are trying to perform a hit test during the layout phase itself, make sure you only hit test nodes that have completed layout (e.g. the node's children, after their layout() method has been called).)

The full code:

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

void main() {
  runApp(MyApp(
    items: List<String>.generate(10, (i) => "Item $i"),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: body(),
      ),
    );
  }

  Widget body() {
    return Container(
        child: Column(children: <Widget>[
      ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${items[index]}'),
          );
        },
      )
    ]));
  }
}

librajt librajt · Accepted Answer · 2019-01-30T08:16:53

Try to remove the Column in body():

  Widget body() {
    return Container(
        child: /* Column(children: <Widget>[ */
      ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${items[index]}'),
          );
        },
      )
    /* ]) */);
  }

It is because the Column seems have no specific size to render children widgets. More info: https://flutter.io/docs/development/ui/layout/box-constraints#flex

update @ 2019.02.18:

To add siblings for the List, you can try wrapping it with Expanded, and then add the siblings.

  Widget body() {
    return Container(
      child: Column(children: <Widget>[
        Text('DropdownButton'),
        Expanded(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${items[index]}'),
              );
            },
          ),
        ),
      ])
    ),
  }

Listbuilder in separate widget not working

2 Answers