AnimatedGradient - Flutter

main.dart

import 'package:flutter/material.dart';

// https://dartpad.dev/6ff26f35a86f70855a10ef3a83cb721a

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Gradient Example'),
      ),
      body: const Center(
        child: AnimatedGradient(
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class AnimatedGradient extends StatefulWidget {
  const AnimatedGradient({super.key, required this.child});

  final Widget child;

  @override
  State<AnimatedGradient> createState() => _AnimatedGradientState();
}

class _AnimatedGradientState extends State<AnimatedGradient>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2500),
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
    _controller.repeat(reverse: false);
  }

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

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        final v = 0.1 + _animation.value * 0.8;
        return SizedBox(
          width: width,
          child: OverflowBox(
            maxWidth: width * 1.5,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  stops: [
                    0.0,
                    v - 0.1,
                    v,
                    v + 0.1,
                    1.0,
                  ],
                  colors: const [
                    Colors.black12, //          *
                    Colors.black12, //         / \
                    Colors.black26, //        /   \
                    Colors.black12, //  *----*     *-------*
                    Colors.black12, //
                  ],
                ),
              ),
              child: widget.child,
            ),
          ),
        );
      },
    );
  }
}