I am trying to build my first Flutter app.
I am using visual studio code for development
The following code is from my main.dart:
class mySamplePage3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(“Some title text here"),
),
body: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(32),
height: 400,
width: 300,
child: Column(
children: [
ElevatedButton(
child: const Text("Back!", style: TextStyle(fontSize: 20)),
onPressed: () => Navigator.pop(context),
),
///////////////////////////////////////////////////////////////////// the code for the ListView
ListView(
children: <Widget>[
const SizedBox(height: 10,),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Divider(color: Colors.black, height: 30,),
),
Card(
margin: const EdgeInsets.all(10),
elevation:20,
color: Colors.purple[200],
child: const ListTile(
title: Text("Kadriye Macit"),
subtitle: Text("Ankara"),
trailing: Icon(Icons.call),
),
),
],
)
///// the end of the ListView code
]
)
)
);
}
When I remove the ListView code block (which I put /// at the beginning and the end of the code), the code works without any problem. But when I keep this block, it hangs and visual studio core, and a red notification appears at CALL STACK window.
(I checked this ListView code but it works at the other debug-test web sites.)
After spending almost a day with dealing this problem, I asked my question here.
Thank you for any support.
2
Answers
You’ve enclosed the ListView within Columns, but the issue arises because the Columns have an infinite height, causing the ListView to occupy the entire available space.
The solution to this problem is:
You just need to set one property on the ListView to:
By adding this property, the ListView will adapt its height to match the space required by its children, ensuring it doesn’t take up unnecessary space.
Wrape your listview in Expanded widget.
like this: