Flutter: Custom widget with PageView physics and interactions - flutter

Question

I need to make a screen on which the interaction is similar to PageView, but with something very different on the screen. I don't want to deal with separate pages. I only need the current scroll position to place my widgets as I desire.
I succeeded in achieving this by placing PageView with empty pages at the bottom of the Stack and placing my widgets inside AnimatedBuilder above PageView. The only problem is that my widgets have their own GestureDetectors and that's why PageView doesn't scroll when I start scrolling gestures over my widget.
Here is a sample. I need the same behavior but without scroll problems when I start dragging over my top widgets.
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _pageController = PageController(viewportFraction: 0.7, initialPage: 5);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
PageView.builder(
controller: _pageController,
itemBuilder: (context, index) => Container(),
itemCount: 10,
),
for (double angleOffset in [0.25, 0.5, 0.75, 1])
AnimatedBuilder(
animation: _pageController,
builder: (context, child) {
return Center(
child: Transform.rotate(
angle: (_pageController.page ?? 5) + pi * angleOffset,
child: Transform.translate(
offset: const Offset(0, 150),
child: const ColorContainer(),
),
),
);
},
),
],
),
);
}
}
class ColorContainer extends StatefulWidget {
const ColorContainer({Key? key}) : super(key: key);
#override
State<ColorContainer> createState() => _ColorContainerState();
}
class _ColorContainerState extends State<ColorContainer> {
double hue = 30;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(() => hue = (hue + 80.0) % 360),
child: Container(
width: 100,
height: 100,
decoration: ShapeDecoration(
shape: const CircleBorder(),
color: HSLColor.fromAHSL(1, hue, 1, 0.5).toColor(),
),
),
);
}
}