I have ListView.builder inside scrollable Column. But The content inside ListView.builder is not scrolling.

final List<String> entries = <String>[
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5',
  'Item 6',
  'Item 7',
  'Item 8',
  'Item 9',
  'Item 10',
  'Item 11',
  'Item 12',
  'Item 13',
  'Item 14',
  'Item 15',
  'Item 16',
  'Item 17',
  'Item 18',
  'Item 19',
  'Item 20',
];
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: [
        Text(
          'Heading',
          style: TextStyle(fontSize: 24),
        ),
        ListView.builder(
          shrinkWrap: true,
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 150,
              width: 150,
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.red),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Center(child: Text('${entries[index]}')),
            );
          },
        ),
        Text(
          'Footer',
          style: TextStyle(fontSize: 24),
        ),
      ],
    ),
  );
}

CodePudding user response：

Add this line of code

physics: NeverScrollableScrollPhysics(),

CodePudding user response：

I'd like to suggest a different approach. The ListView is entirely unnecessary. You can just loop over the entries inside the column directly. This will also respect the width of 150 that you indicated in the Container, which it doesn't do in the ListView

Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: [
        Text(
          'Heading',
          style: TextStyle(fontSize: 24),
        ),
        for (String entry in entries) Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 150,
            width: 150,
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Colors.red),
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
            child: Center(child: Text(entry)),
          ),
        ),
        Text(
          'Footer',
          style: TextStyle(fontSize: 24),
        ),
      ],
    ),
  );
}

CodePudding user response：

Add this to your ListView.builder()

physics: const ScrollPhysics(),
padding: EdgeInsets.zero,

CodePudding user response：

Simply add a scroll direction to your ListView.builder()

ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.vertical, <- This is what you need
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 150,
              width: 150,
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.red),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Center(child: Text('${entries[index]}')),
            );
          },
        ),

More informations here

CodePudding user response：

this is working for me

Column(
mainAxisSize: MainAxisSize.max, //Add this 
line onyour column
children:[
    SomeWidget(),
    Expanded(child:ListView.builder())
  ]
)