FadeTransition while using PageView

I'm trying to do something that should be simple, but it proved to be very hard!!

I'm trying to make a fade transition when the user scrolls to the next page on flutter web.

I tried to use many codes I found on stackoverflow, but nothing worked!

The last thing I tried is the following code. It gives me a white blank screen. And when I used ..repeat(reverse: false) in _animationController, the screen keeps blinking.

Here's my final code (the blank white screen):

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';


class TestLayout extends StatefulWidget {
  const TestLayout({Key? key}) : super(key: key);

  @override
  _TestLayoutState createState() => _TestLayoutState();
}

class _TestLayoutState extends State<TestLayout> with TickerProviderStateMixin {

  int _index = 0;
  late PageController pageController = PageController();

  late final AnimationController _animationController = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );

  late final Animation<double> _fadeInFadeOut = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);

  final List<String> _sectionsName = [
    "Home",
    // "heeeey",
    "Services"
  ];

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: MediaQuery.of(context).size.width > 760
      ? null
      : AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent
      ),
      body: Stack(
        children: [
          NotificationListener(
            onNotification: (notification) {
              if(notification is UserScrollNotification){
                if (notification.direction == ScrollDirection.forward) {
                  print('down');
                  setState(() {
                    _animationController.forward();
                    pageController.nextPage(
                      curve: Curves.easeIn, duration: const Duration(milliseconds: 500)
                    );
                  });
                }
                if (notification.direction == ScrollDirection.idle) {
                  print('Idle');
                }

                if (notification.direction == ScrollDirection.reverse) {
                  print('up');
                  setState(() {
                    _animationController.forward();
                    pageController.previousPage(
                      curve: Curves.easeIn, duration: const Duration(milliseconds: 500)
                    );
                  });
                }
              }
              return false;
            },
            child: PageView(
              controller: pageController,
              scrollDirection: Axis.vertical,
              physics: const NeverScrollableScrollPhysics(),
              children: [
                FadeTransition(
                  opacity: _fadeInFadeOut,
                  child: Container(
                    color: Colors.red,
                    child: const Center(child: Text("Hi"))
                  )
                ),
                // Opacity(
                //   opacity: opacityHelper - (panPosition / screenHeight),
                //   child: Container(
                //     color: Colors.green,
                //     child: Center(child: Text("There"))
                //   )
                // ),
                FadeTransition(
                  opacity: _fadeInFadeOut,
                  child: Container(
                    color: Colors.yellow,
                    child: Center(child: Text("Welcome"))
                  )
                )
              ],
              onPageChanged: (index) {
                _index = index;
              }
            )
          )
        ]
      )
    );
  }
}

Any help is appreciated... Thanks in advance...