Add parallax effect to home screen background (demo)

lib/src/screens/dashboard/dashboard_page.dart

@@ -197,22 +197,22 @@ class _DashboardPageView extends BasePage {
 
   @override
   Widget body(BuildContext context) {
-    final controller = PageController(initialPage: initialPage);
+    parallaxController = PageController(initialPage: initialPage);
 
     reaction(
       (_) => dashboardViewModel.shouldShowMarketPlaceInDashboard,
       (bool value) {
         if (!dashboardViewModel.shouldShowMarketPlaceInDashboard) {
-          controller.jumpToPage(0);
+          parallaxController.jumpToPage(0);
         }
         pages.clear();
         _isEffectsInstalled = false;
         _setEffects(context);
 
         if (value) {
-          controller.jumpToPage(1);
+          parallaxController.jumpToPage(1);
         } else {
-          controller.jumpToPage(0);
+          parallaxController.jumpToPage(0);
         }
       },
     );
@@ -230,7 +230,7 @@ class _DashboardPageView extends BasePage {
                 builder: (context) {
                   return PageView.builder(
                     key: ValueKey('dashboard_page_view_key'),
-                    controller: controller,
+                    controller: parallaxController,
                     itemCount: pages.length,
                     itemBuilder: (context, index) => pages[index],
                   );
@@ -247,7 +247,7 @@ class _DashboardPageView extends BasePage {
                     hint: 'Swipe to change page',
                     excludeSemantics: true,
                     child: SmoothPageIndicator(
-                      controller: controller,
+                      controller: parallaxController,
                       count: pages.length,
                       effect: ColorTransitionEffect(
                         spacing: 6.0,

lib/src/widgets/gradient_background.dart

@@ -1,30 +1,81 @@
 import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:flutter/material.dart';
 
-class GradientBackground extends StatelessWidget {
+late PageController parallaxController;
+
+class GradientBackground extends StatefulWidget {
   const GradientBackground({required this.scaffold});
 
   final Widget scaffold;
 
+  @override
+  State<GradientBackground> createState() => _GradientBackgroundState();
+}
+
+class _GradientBackgroundState extends State<GradientBackground> {
+  late double _pageOffset;
+
+  @override
+  void initState() {
+    super.initState();
+    _pageOffset = 0;
+    parallaxController = PageController(initialPage: 0);
+    parallaxController.addListener(
+          () => setState(() => _pageOffset = parallaxController.page ?? 0),
+    );
+  }
+
+  @override
+  void dispose() {
+    parallaxController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container(
-        decoration: BoxDecoration(
-            gradient: LinearGradient(
-          colors: [
-            Theme.of(context)
-                .extension<DashboardPageTheme>()!
-                .firstGradientBackgroundColor,
-            Theme.of(context)
-                .extension<DashboardPageTheme>()!
-                .secondGradientBackgroundColor,
-            Theme.of(context)
-                .extension<DashboardPageTheme>()!
-                .thirdGradientBackgroundColor,
-          ],
-          begin: Alignment.topRight,
-          end: Alignment.bottomLeft,
-        )),
-        child: scaffold);
+    return Stack(
+      children: [
+        DataImage(
+          pageCount: 4,
+          screenSize: MediaQuery.of(context).size,
+          offset: _pageOffset,
+        ),
+        widget.scaffold,
+      ],
+    );
+  }
+}
+
+class DataImage extends StatelessWidget {
+  const DataImage({
+    Key? key,
+    required this.pageCount,
+    required this.screenSize,
+    required this.offset,
+  }) : super(key: key);
+
+  final Size screenSize;
+  final int pageCount;
+  final double offset;
+
+  @override
+  Widget build(BuildContext context) {
+    int lastPageIdx = pageCount - 1;
+    int firstPageIdx = 0;
+    int alignmentMax = 1;
+    int alignmentMin = -1;
+    int pageRange = (lastPageIdx - firstPageIdx) - 1;
+    int alignmentRange = (alignmentMax - alignmentMin);
+    double alignment = (((offset - firstPageIdx) * alignmentRange) / pageRange) + alignmentMin;
+
+    return SizedBox(
+      height: screenSize.height,
+      width: screenSize.width,
+      child: Image(
+        image: const AssetImage('assets/images/background_test.png'),
+        alignment: Alignment(alignment, 0),
+        fit: BoxFit.fitHeight,
+      ),
+    );
   }
 }