Unable to render list view builder even when using expanded - flutter

Question

I have the following where when I run it, I get the following error:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded. RenderBox was not laid out: RenderRepaintBoundary#ad336
NEEDS-LAYOUT NEEDS-PAINT
The issue seems to be coming from my ListView.builder.
The general suggestion from past questions such as ListView.builder gives error: RenderBox was not laid out
has been to wrap it in an Expanded widget which I have done. But I am still seeing above error.
Could I please get some advice as to what I am doing wrong please. Thanks.
Pasting the whole file here in case there is some red herring going on.
The Expanded and ListView.builder section is at the end.
import 'package:flutter/material.dart';
import 'account_details.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color(0xff020B2A),
appBar: AppBar(
backgroundColor: Color(0xff020B2A),
centerTitle: true,
title: Column(
children: [
Text(
'Account',
style: TextStyle(
fontSize: 12,
),
),
Text(
'Card Ending - 00000',
style: TextStyle(
fontSize: 9,
letterSpacing: 1.1,
),
),
],
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 8),
child: Icon(Icons.messenger_outline),
),
],
),
body: Column(
children: [
Center(
child: Column(
children: [
SizedBox(height: 30),
Text('Good Evening', style: TextStyle(
color: Colors.white,
fontSize: 12,
),),
SizedBox(height: 18),
Text('NAME', style: TextStyle(
color: Colors.white,
fontSize: 28,
),),
SizedBox(height: 18),
Text('Member Since \'18\'', style: TextStyle(
color: Colors.white70,
fontSize: 10,
),),
],
),
),
Column(
children: [
SizedBox(height: 30),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 16.0, bottom: 16.0),
child: Text('Account', style: TextStyle(
color: Colors.white70,
fontSize: 16,
),),
),
),
Expanded(
child: ListView.builder(
shrinkWrap: true, // added after suggestion. same error
itemCount: accountTitles.length,
itemBuilder: (context, index) {
return ListTile(
onTap: (){},
leading: Icon(accountTitles[index].leadingIcon),
title: Text(accountTitles[index].title),
trailing: Icon(accountTitles[index].trailingIcon),
);
},
),
),
],
),
],
),
),
);
}
}
The test data accountTitles coming from following:
import 'package:flutter/material.dart';
class Info {
final String title;
final IconData leadingIcon;
final IconData trailingIcon;
Info({this.title, this.leadingIcon, this.trailingIcon});
}
List<Info> accountTitles = [
Info(title: 'A', leadingIcon: Icons.chevron_left, trailingIcon: Icons.chevron_right),
Info(title: 'B', leadingIcon: Icons.chevron_left, trailingIcon: Icons.chevron_right),
Info(title: 'C', leadingIcon: Icons.chevron_left, trailingIcon: Icons.chevron_right),
];

Answer 1

Your scrollable (ListView in this case) is rendered inside two nested Column so the general advice (use Expanded) is correct but you need to do it twice: both for the inner column and the list view. See it in action here https://dartpad.dev/855cbaf9d055104a04824b0f3bb5413d?null_safety=true