ListView.separated returns Null check used on a null value Error-CodePudding

I'm trying to create a list of tiles. I've used ListView.separated. but it keeps giving out errors.

════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: _RenderScrollSemantics#aa680 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': package:flutter/…/rendering/box.dart:1 Failed assertion: line 1982 pos 12: 'hasSize'

════════ Exception caught by rendering library ═════════════════════════════════ Null check operator used on a null value

Here is the code

class _NewtilesState extends State<Newtiles> {

  @override
  Widget build(BuildContext context) {
    
    return Container(
      child: Expanded(
        child: ListView(
          children: [
            ListView.separated(
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Person $index'),
                    subtitle: Text("Your Message"),
                    trailing: Text("11:10 PM"),
                  );
                },
                separatorBuilder: (BuildContext context, int index) {
                  return Divider();
                },
                itemCount: 30)
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

The problem occurs because you put a Scrollable without a shrinkWrap (the ListView.separated into another Scrollable - ListView. In your particular example you should skip the outer ListView and put the ListView.separated straight into the Container.

Expanded serves a purpose when you put it as a direct child of a flexible widget (so either Column or Row), making it take up all of the remaining space.

Your Container is also redundant, as you don't pass any parameters to it other than child.

If you want to have few variable-height widgets in a column like this, you may want to use a CustomScrollView with SliverList.

CodePudding user response：

This should work :

  return Container(
  child: ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text('Person $index'),
          subtitle: const Text("Your Message"),
          trailing: const Text("11:10 PM"),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider();
      },
      itemCount: 30),
);

CodePudding user response：

return Container(
  child: Expanded(
    child: ListView.separated(
      shrinkWrap: true,  // <--- add this line
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Person $index'),
            subtitle: Text("Your Message"),
            trailing: Text("11:10 PM"),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return Divider();
        },
        itemCount: 30),
  ),
);