ListView.builder items still appear out of the scroll - flutter

Question

I have a ListView.builder inside a PageView.builder. When ListView elements reach the end of the scroll, colors of items still appear out of the scroll. I may not have explained myself, I added images of it.
This is the initial state
When I start scrolling it becomes like that
I also add my codes. What is the reason beyond it?
class NewBookingPage extends StatefulWidget {
const NewBookingPage({Key? key}) : super(key: key);
#override
_NewBookingPageState createState() => _NewBookingPageState();
}
class _NewBookingPageState extends State<NewBookingPage> with SingleTickerProviderStateMixin {
late final AnimationController animationController;
final pageController = PageController();
#override
void initState() {
super.initState();
animationController = AnimationController(vsync: this, value: 0.25);
animationController.addListener(() {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Padding(
padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
child: IconButton(
onPressed: () {
if (pageController.page != 0) {
animationController.animateTo(
animationController.value - 0.25,
curve: Curves.easeOut,
duration: Duration(milliseconds: 300),
);
pageController.previousPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeOut,
);
} else {
Navigator.of(context).pop();
}
},
icon: SvgPicture.asset(
"assets/icons/arrow_back.svg",
color: text900,
),
),
),
title: Text(
"Reservation",
style: Theme.of(context).appBarTheme.titleTextStyle,
),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: LinearProgressIndicator(
color: primary500,
backgroundColor: text300,
value: animationController.value,
),
),
),
SizedBox(height: 24),
Expanded(
child: PageView.custom(
controller: pageController,
scrollBehavior: NoGlowingScrollBehavior(),
physics: NeverScrollableScrollPhysics(),
childrenDelegate: SliverChildListDelegate.fixed(
[DateTab(), HoursTab()],
),
),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0xFF204C3C0A).withOpacity(0.04),
offset: Offset(0, -4),
spreadRadius: 2,
blurRadius: 12,
),
],
),
child: Padding(
padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
child: ElevatedButton(
onPressed: () async {
animationController.animateTo(
0.5,
curve: Curves.easeOut,
duration: Duration(milliseconds: 300),
);
pageController.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeOut,
);
},
child: Text("Next"),
),
),
),
],
),
);
}
}
class HoursTab extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Choose hour",
style: Theme.of(context).textTheme.headline3,
),
SizedBox(height: 16),
Expanded(
child: ScrollConfiguration(
behavior: NoGlowingScrollBehavior(),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
var isFull = index % 2 == 0;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: text200, width: 1),
borderRadius: BorderRadius.circular(8),
),
child: ListTile(
enabled: !isFull,
tileColor: isFull ? text100 : null,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
leading: Radio<bool>(
activeColor: primary500,
value: index == 3,
groupValue: true,
onChanged: (a) {},
),
horizontalTitleGap: 0,
contentPadding: EdgeInsets.only(right: 20),
trailing: isFull
? Chip(
labelStyle: Theme.of(context).textTheme.subtitle2?.copyWith(color: text700),
label: Text("Full"),
backgroundColor: text200,
)
: null,
title: Text(
"15:00 - 16:00",
style: Theme.of(context).textTheme.bodyText1?.copyWith(color: isFull ? text500 : text900),
),
),
),
);
},
),
),
)
],
),
);
}
}
class NoGlowingScrollBehavior extends ScrollBehavior {
#override
Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
return child;
}
}

Answer 1

The problem seems to be a bug caused by ListTile Color. so instead of tileColor use the color property of BoxDecoration:
itemBuilder: (context, index) {
var isFull = index % 2 == 0;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade200, width: 1),
borderRadius: BorderRadius.circular(8),
color: isFull ? Colors.grey.shade100 : null // add it here
),
child: ListTile(
enabled: !isFull,
// tileColor: isFull ? Colors.grey.shade100 : null, remove this line
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
leading: Radio<bool>(
value: index == 3,
groupValue: true,
onChanged: (a) {},
),
horizontalTitleGap: 0,
contentPadding: EdgeInsets.only(right: 20),
trailing: isFull
? Chip(
labelStyle: Theme.of(context).textTheme.subtitle2,
label: Text("Full"),
)
: null,
title: Text(
"15:00 - 16:00",
style: Theme.of(context).textTheme.bodyText1?.copyWith(color: isFull ? Colors.grey.shade500 : Colors.grey.shade900),
),
),
),
);
}