how to code a PageView to scroll a normal list while the background also scrolls?

I want to build a screen, with a list of items, which I can scroll, these items have a unique background, which should also be scrolling (look like scrolling), when I keep scrolling. Here is an example, as you can see, here when I scroll the items, the background changes very smoothly as if it was part of it.

Till now, I have tried manipulating PageViews to achieve this, but the best I have right now, is a single PageView on the items, where I have written code for, when the page changes, move the background one-by-one. Here is the code:

PageView:

Column(
              children: [
                Container(
                  width: sizes.width(context, 414),
                  height: sizes.height(context, 100),
                  decoration: topImage == null ? BoxDecoration(color: Colors.blue) : BoxDecoration(
                    image: DecorationImage(
                      image: FileImage(topImage),
                      fit: BoxFit.fitWidth
                    )
                  ),
                ), // first image

                Container(
                  width: sizes.width(context, 414),
                  height: sizes.height(context, 696),
                  decoration: mainImage == null ? BoxDecoration(color: colours.black()) : BoxDecoration(
                      image: DecorationImage(
                          image: FileImage(mainImage),
                          fit: BoxFit.fitHeight
                      )
                  ),
                  child: Stack(
                    children: [
                      // a widget here
                      PageView.builder(
                        itemCount: (allModes.length + 1),
                        onPageChanged: (index) {
                          setState(() {
                            topImage = index == 0 ? null : File(allModes[index-1].wallpaperPath);
                            mainImage = index == allModes.length ? null : File(allModes[index].wallpaperPath);
                            bottomImage = index >= (allModes.length-1) ? null : File(allModes[index+1].wallpaperPath);
                          });
                        },
                        itemBuilder: (context, index) {

                          if(index == allModes.length) {
                            return Text(
                              "add + " + " :: " + index.toString(),
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: colours.white(),
                                  fontFamily: 'ProductSans',
                                  fontWeight: FontWeight.bold,
                                  fontSize: _pageController.page.toInt() == index ? 36 : 24
                              ),
                            );
                          }
                          else {
                            return Text(
                              allModes[index].title + " :: " + index.toString(),
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: colours.white(),
                                  fontFamily: 'ProductSans',
                                  fontWeight: FontWeight.bold,
                                fontSize: _pageController.page.toInt() == index ? 36 : 24
                              ),
                            );
                          }
                        },
                        scrollDirection: Axis.vertical,
                        controller: _pageController,
                      ),
                    ],
                  ),
                ), // main image

                Container(
                  width: sizes.width(context, 414),
                  height: sizes.height(context, 100),
                  decoration: bottomImage == null ? BoxDecoration(color: Colors.greenAccent) : BoxDecoration(
                      image: DecorationImage(
                          image: FileImage(bottomImage),
                          fit: BoxFit.fitWidth
                      )
                  ),
                ), // last image
              ],
            )

Please help me out with what else I can do, one of my friends suggested me to use a ScrollView as a wrapper and an expandable widget as its child but I didn't understand how to actually do it.

EDIT: Here is an image of the example:

enter image description here