List 如何对页面视图进行编码，以便在后台也滚动时滚动普通列表？

我想建立一个屏幕，有一个项目列表，我可以滚动，这些项目有一个独特的背景，也应该滚动（看起来像滚动），当我保持滚动，正如你所看到的，当我在这里滚动项目时，背景变化非常平稳，好像它是其中的一部分

到目前为止，我一直试图通过操纵页面视图来实现这一点，但目前我所能做的最好的事情是在项目上创建一个页面视图，在页面发生变化时，我为其编写代码，逐个移动背景。代码如下：

页面视图：

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
              ],
            )

我的一个朋友建议我使用ScrollView作为包装器，使用可扩展的小部件作为其子部件，但我不知道如何真正做到这一点

编辑：以下是示例的图像：