ListView taking all the vertical space - flutter

Question

I am working on a website using Flutter, but I have encountered a problem with ListView.builder. It's working fine until I try to scroll it down, then it takes all the possible space on screen. I also tried to create a ListView.builder in column and I had the same issue that the ListView was showing on the whole possible height.
main.dart:
import 'package:flutter/material.dart';
import 'package:kakadu_web/pages/shop.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Welcome to Flutter',
home: Builder(
builder: (BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(body: ShopPage(width, height));
},
));
}
}
shop.dart:
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:google_fonts/google_fonts.dart';
import '../resources/values/colors.dart';
import '../widgets/buttons.dart';
Widget ShopPage(var width, var height) {
return Container(
alignment: Alignment.center,
child: Row(children: [
SizedBox(
width: 80,
height: height,
child: Container(
decoration: BoxDecoration(
color: AppColors.primaryBackgroundColor,
),
child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
Padding(
padding: const EdgeInsets.only(top: 15),
child: RichText(
text: TextSpan(
style: GoogleFonts.josefinSans(
fontWeight: FontWeight.w700,
fontSize: 60,
color: AppColors.primaryIconColor),
children: [TextSpan(text: "M")])),
),
Container(
height: 200,
),
PageSelectionButton(
text: "Sklepik ",
icon: Icon(Icons.shopping_cart_outlined),
),
PageSelectionButton(
text: "Sklepik ",
icon: Icon(Icons.shopping_cart_outlined),
),
PageSelectionButton(
text: "Sklepik ",
icon: Icon(Icons.shopping_cart_outlined),
),
]),
),
),
Expanded(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(children: [
Expanded(child: Container()),
Flexible(
child: ListTile(
minVerticalPadding: 8,
selectedTileColor: Colors.indigoAccent,
selected: true,
title: Center(
child: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 16, fontWeight: FontWeight.w500),
text: "Wszystko"),
)),
tileColor: Colors.indigo,
),
),
Flexible(
child: ListTile(
minVerticalPadding: 8,
contentPadding: EdgeInsets.only(left: 16),
selectedTileColor: Colors.indigoAccent,
selected: true,
title: Center(
child: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 16, fontWeight: FontWeight.w500),
text: "Wszystko"),
)),
tileColor: Colors.indigo,
),
),
Expanded(child: Container()),
]),
),
Divider(),
Expanded(
child: Container(
child: ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.only(
top: 8,
),
itemBuilder: (context, index) => Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: ListTile(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(60))),
leading: SvgPicture.asset(
"assets/drink.svg",
),
title: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 20, fontWeight: FontWeight.w400),
text: "Tymbark Jabłkowy 2L",
)),
subtitle: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 16, fontWeight: FontWeight.w300),
text: "20.00 zł",
)),
onTap: () => debugPrint("Przycisnął"),
tileColor: AppColors.primaryBackgroundColor,
trailing: Container(
width: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SvgPicture.asset(
"assets/sweets.svg",
semanticsLabel: "Vege",
width: 50,
),
SvgPicture.asset("assets/cold.svg",
semanticsLabel: "Vege", width: 50)
]),
),
),
),
),
],
),
),
),
),
],
),
),
]),
);
}
These are screens how it looks like:
ListView after adding SizedBox
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:google_fonts/google_fonts.dart';
import '../resources/values/colors.dart';
import '../widgets/buttons.dart';
Widget ShopPage() {
return Expanded(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(children: [
Expanded(child: Container()),
Flexible(
child: ListTile(
minVerticalPadding: 8,
selectedTileColor: Colors.indigoAccent,
selected: true,
title: Center(
child: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 16, fontWeight: FontWeight.w500),
text: "Wszystko"),
)),
tileColor: Colors.indigo,
),
),
Flexible(
child: ListTile(
minVerticalPadding: 8,
contentPadding: EdgeInsets.only(left: 16),
selectedTileColor: Colors.indigoAccent,
selected: true,
title: Center(
child: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 16, fontWeight: FontWeight.w500),
text: "Wszystko"),
)),
tileColor: Colors.indigo,
),
),
Expanded(child: Container()),
]),
),
Divider(),
Expanded(
child: SizedBox( // Here is created SizedBox
height: 500,
child: ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.only(
top: 8,
),
itemBuilder: (context, index) => Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: ListTile(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(60))),
leading: SvgPicture.asset(
"assets/drink.svg",
),
title: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 20, fontWeight: FontWeight.w400),
text: "Tymbark Jabłkowy 2L",
)),
subtitle: RichText(
text: TextSpan(
style: GoogleFonts.rubik(
fontSize: 16, fontWeight: FontWeight.w300),
text: "20.00 zł",
)),
onTap: () => debugPrint("Przycisnął"),
tileColor: AppColors.primaryBackgroundColor,
trailing: Container(
width: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SvgPicture.asset(
"assets/sweets.svg",
semanticsLabel: "Vege",
width: 50,
),
SvgPicture.asset("assets/cold.svg",
semanticsLabel: "Vege", width: 50)
]),
),
),
),
),
],
),
),
),
),
],
),
);
}

Answer 1

Listview is expected to take all the possible height given by its parent. So if you expect to have a Listview with finite height you should create a SizedBox() with specific height and make Listview its child.
Here is a youtube video from Flutter team explaining this: https://www.youtube.com/watch?v=jckqXR5CrPI