Parallax effect for landing page

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ParallaxEffectScreen(),
    );
  }
}

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

  @override
  State<ParallaxEffectScreen> createState() => _ParallaxEffectScreenState();
}

class _ParallaxEffectScreenState extends State<ParallaxEffectScreen> {
  String? asset;
  double divOne = 0;
  double divFive = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NotificationListener(
        onNotification: (notify) {
          if (notify is ScrollUpdateNotification) {
            setState(() {
              divOne += notify.scrollDelta! / 1;
              divFive += notify.scrollDelta! / 5;
            });
          }
          return true;
        },
        child: Stack(
          children: <Widget>[
            ListView(
              children: <Widget>[
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment(0.5, 0.0),
                        colors: [
                          Color.fromRGBO(130, 0, 94, 1),
                          Colors.lightBlue
                        ],
                        tileMode: TileMode.mirror),
                  ),
                  height: 1200,
                ),
              ],
            ),
            ParallaxText(
              colour: Colors.white,
              left: 170 - divOne * 3,
              top: 120 + divFive,
              text: "Demo of",
            ),
            ParallaxText(
              colour: Colors.white,
              left: 20 + divOne * 2,
              top: 400 + divFive / 2,
              text: "Parallex\n  Scrolling",
            ),
            ParallaxImage(
              left: 20,
              top: 100 - divOne,
              height: 200,
              width: 200,
              asset: "photo6",
              widget: ParallaxText(
                colour: const Color.fromRGBO(130, 0, 94, 1),
                left: 150 - divOne * 3,
                top: 20 + divOne + divFive,
                text: "Demo of",
              ),
            ),
            ParallaxImage(
              left: 200 - divOne,
              top: 350 - divOne,
              height: 300,
              width: 300,
              asset: "photo7",
              widget: ParallaxText(
                colour: const Color.fromRGBO(130, 0, 94, 1),
                left: -180 + divOne * 3,
                top: 50 + divOne + divFive / 2,
                text: "Parallax\n  Scrolling",
              ),
            ),
            ParallaxText(
              colour: Colors.white,
              left: divFive,
              top: 720 - divOne,
              text: "Be creative",
            ),
            ParallaxImage(
              left: 95,
              top: 700 - divOne,
              height: 400,
              width: 230,
              asset: "photo3",
              widget: ParallaxText(
                colour: const Color.fromRGBO(130, 0, 94, 1),
                left: -95 + divFive,
                top: 20,
                text: "Be creative",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ParallaxText extends StatelessWidget {
  const ParallaxText({
    Key? key,
    required this.left,
    required this.top,
    required this.text,
    required this.colour,
  }) : super(key: key);

  final double left;
  final double top;
  final String text;
  final Color colour;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: left,
      top: top,
      child: Text(
        text,
        style: TextStyle(
          color: colour,
          fontWeight: FontWeight.w900,
          fontSize: 60.0,
          fontFamily: "Helvetica",
        ),
      ),
    );
  }
}

class ParallaxImage extends StatelessWidget {
  const ParallaxImage({
    Key? key,
    required this.left,
    required this.top,
    required this.asset,
    required this.height,
    required this.width,
    required this.widget,
  }) : super(key: key);

  final double left;
  final double top;
  final String asset;
  final double height;
  final double width;
  final Widget widget;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: left,
      top: top,
      child: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: ExactAssetImage("assets/images/$asset.png")),
            borderRadius: BorderRadius.circular(12.0)),
        height: height,
        width: width,
        child: Stack(
          children: <Widget>[widget],
        ),
      ),
    );
  }
}