I placed a ListView in a Container with a certain height and I want the scrollable area to remain within this Container. In other words, scrolling will only be done within that Container and the rest will not be visible when scrolled. However, as can be seen in the picture, the scrolled widgets extend outside the Container and are visible very clearly.
Where could I be making a mistake?
<code>import 'package:complete_app/util/styles.dart';
import 'package:complete_app/view/base/title_block.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import '../../../util/images.dart';
import '../../base/setting_button.dart';
class MeditationScreen extends StatelessWidget {
final List<String> meditationMusicList = [
"Meditasyon Müziği 1",
"Meditasyon Müziği 2",
"Meditasyon Müziği 3",
"Meditasyon Müziği 4",
"Meditasyon Müziği 5",
"Meditasyon Müziği 6",
"Meditasyon Müziği 7",
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: [
Positioned(
top: 80,
right: 16,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'14 Mart 2024',
style: poppinsSemiBold.copyWith(
fontSize: 14, color: Colors.white),
),
Text(
'Bugün',
style: poppinsMedium.copyWith(
fontSize: 14, color: Theme.of(context).primaryColor),
),
],
)),
),
Opacity(
opacity: 0.4,
child: Container(
height: 180,
width: double.infinity,
child: Image.asset(Images.meditationDarkBackground,
fit: BoxFit.cover),
),
),
],
),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TitleBlock(title: "Günün Meditasyonu"),
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text("Meditasyon zamanını ve konunuzu girerek istediğiniz meditasyon müziği eşliğinde konunuz üzerinde odaklanabilirsiniz", textAlign: TextAlign.center, style: poppinsRegular.copyWith(fontSize: 14, color: Colors.white),),
),
Spacer(),
Container(
height: 265,
width: double.infinity,
color: Colors.amber,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: ClipRect(
child: ListView.separated(
clipBehavior: Clip.hardEdge,
shrinkWrap: true,
physics: ScrollPhysics(),
padding: const EdgeInsets.all(0),
itemCount: meditationMusicList.length,
separatorBuilder: (context, index) => SizedBox(height: 10),
itemBuilder: (context, index) {
return SettingButton(
buttonTitle: meditationMusicList[index],
iconPath: Images.playIcon,
onTap: () {
print('${meditationMusicList[index]} oynatılıyor...');
},
hasArrow: false,
);
},
),
),
),
],
));
}
}
</code>
<code>import 'package:complete_app/util/styles.dart';
import 'package:complete_app/view/base/title_block.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import '../../../util/images.dart';
import '../../base/setting_button.dart';
class MeditationScreen extends StatelessWidget {
final List<String> meditationMusicList = [
"Meditasyon Müziği 1",
"Meditasyon Müziği 2",
"Meditasyon Müziği 3",
"Meditasyon Müziği 4",
"Meditasyon Müziği 5",
"Meditasyon Müziği 6",
"Meditasyon Müziği 7",
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: [
Positioned(
top: 80,
right: 16,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'14 Mart 2024',
style: poppinsSemiBold.copyWith(
fontSize: 14, color: Colors.white),
),
Text(
'Bugün',
style: poppinsMedium.copyWith(
fontSize: 14, color: Theme.of(context).primaryColor),
),
],
)),
),
Opacity(
opacity: 0.4,
child: Container(
height: 180,
width: double.infinity,
child: Image.asset(Images.meditationDarkBackground,
fit: BoxFit.cover),
),
),
],
),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TitleBlock(title: "Günün Meditasyonu"),
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text("Meditasyon zamanını ve konunuzu girerek istediğiniz meditasyon müziği eşliğinde konunuz üzerinde odaklanabilirsiniz", textAlign: TextAlign.center, style: poppinsRegular.copyWith(fontSize: 14, color: Colors.white),),
),
Spacer(),
Container(
height: 265,
width: double.infinity,
color: Colors.amber,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: ClipRect(
child: ListView.separated(
clipBehavior: Clip.hardEdge,
shrinkWrap: true,
physics: ScrollPhysics(),
padding: const EdgeInsets.all(0),
itemCount: meditationMusicList.length,
separatorBuilder: (context, index) => SizedBox(height: 10),
itemBuilder: (context, index) {
return SettingButton(
buttonTitle: meditationMusicList[index],
iconPath: Images.playIcon,
onTap: () {
print('${meditationMusicList[index]} oynatılıyor...');
},
hasArrow: false,
);
},
),
),
),
],
));
}
}
</code>
import 'package:complete_app/util/styles.dart';
import 'package:complete_app/view/base/title_block.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import '../../../util/images.dart';
import '../../base/setting_button.dart';
class MeditationScreen extends StatelessWidget {
final List<String> meditationMusicList = [
"Meditasyon Müziği 1",
"Meditasyon Müziği 2",
"Meditasyon Müziği 3",
"Meditasyon Müziği 4",
"Meditasyon Müziği 5",
"Meditasyon Müziği 6",
"Meditasyon Müziği 7",
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: [
Positioned(
top: 80,
right: 16,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'14 Mart 2024',
style: poppinsSemiBold.copyWith(
fontSize: 14, color: Colors.white),
),
Text(
'Bugün',
style: poppinsMedium.copyWith(
fontSize: 14, color: Theme.of(context).primaryColor),
),
],
)),
),
Opacity(
opacity: 0.4,
child: Container(
height: 180,
width: double.infinity,
child: Image.asset(Images.meditationDarkBackground,
fit: BoxFit.cover),
),
),
],
),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TitleBlock(title: "Günün Meditasyonu"),
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text("Meditasyon zamanını ve konunuzu girerek istediğiniz meditasyon müziği eşliğinde konunuz üzerinde odaklanabilirsiniz", textAlign: TextAlign.center, style: poppinsRegular.copyWith(fontSize: 14, color: Colors.white),),
),
Spacer(),
Container(
height: 265,
width: double.infinity,
color: Colors.amber,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: ClipRect(
child: ListView.separated(
clipBehavior: Clip.hardEdge,
shrinkWrap: true,
physics: ScrollPhysics(),
padding: const EdgeInsets.all(0),
itemCount: meditationMusicList.length,
separatorBuilder: (context, index) => SizedBox(height: 10),
itemBuilder: (context, index) {
return SettingButton(
buttonTitle: meditationMusicList[index],
iconPath: Images.playIcon,
onTap: () {
print('${meditationMusicList[index]} oynatılıyor...');
},
hasArrow: false,
);
},
),
),
),
],
));
}
}
I tried using ClipRect, I tried placing SingleChildScrollView in Column instead of ListView, I tried shrinkWrap, no matter what I did, I couldn’t eliminate the problem.