Question 188056 in Flutter Question posted in
The official Flutter documentation can be found here.

How to animate the background color rotation of a container in Flutter

I have a container with a linear gradient background and I would like to animate the color rotation from bottom to top, like a vinyl disc effect, I tried to rotate the entire container but the height and width of the container remain the same and the result is not satisfactory. This is what I tried.

import 'package:flutter/material.dart';

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  final bool _isRotated = false;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
      upperBound: 0.5,
    );


    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _animationController.forward();
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        children: [
          RotationTransition(
            turns: Tween(begin: 0.0, end: 1.0).animate(_animationController),
            child: OverflowBox(
              child: Container(
                decoration: const BoxDecoration(
                  // shape: BoxShape.circle,
                  gradient: LinearGradient(
                      colors: [
                        Color(0xFF212657),
                        Color(0xFF28346D),
                        Color(0xFF33498E),
                        Color(0xFF3A56A1),
                        Color(0xFF3D5BA9),
                        Color(0xFF405AA7),
                        Color(0xFF7D538B),
                        Color(0xFFAE4E74),
                        Color(0xFFD14A64),
                        Color(0xFFE7475A),
                        Color(0xFFEF4757),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      stops: [
                        0.02,
                        0.11,
                        0.28,
                        0.41,
                        0.5,
                        0.52,
                        0.73,
                        0.82,
                        0.92,
                        0.95,
                        1
                      ]   
                   ),
                ),
              ),
            ),
          ),
          // ...others widgets
        ],
      ),
    );
  }
}

Any suggestions?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to do it by animating the transform parameter property of BoxDecoration:

     _controller = AnimationController(
   vsync: this,
   duration: const Duration(milliseconds: 600),
 );

 _controller.addListener(() {
   setState(() {});
 });

 _animation = Tween(begin: 0.0, end: 3.0).animate(CurvedAnimation(
   parent: _controller,
   curve: Curves.fastOutSlowIn,
 ));

    And then:

        Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: const [
            Color(0xFF212657),
            Color(0xFF28346D),
            Color(0xFF33498E),
            Color(0xFF3A56A1),
            Color(0xFF3D5BA9),
            Color(0xFF405AA7),
            Color(0xFF7D538B),
            Color(0xFFAE4E74),
            Color(0xFFD14A64),
            Color(0xFFE7475A),
            Color(0xFFEF4757),
          ],
          stops: const [
            0.02,
            0.11,
            0.28,
            0.41,
            0.5,
            0.52,
            0.73,
            0.82,
            0.92,
            0.95,
            1
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          transform: GradientRotation(_animation.value), <-- use the animation value here
        ),
      ),
    ),

  2. 0

    Something like? Here.

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Demo'),
        ),
        body: SplashPage(),
      ),
    );
  }
}

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  final bool _isRotated = false;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 15),
    )..repeat();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 300,
      child: Stack(
        children: [
          ClipOval(
            child: RotationTransition(
              turns: Tween(begin: 0.0, end: 4.0).animate(_animationController),
              child: Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      colors: [
                        Color(0xFF212657),
                        Color(0xFF28346D),
                        Color(0xFF33498E),
                        Color(0xFF3A56A1),
                        Color(0xFF3D5BA9),
                        Color(0xFF405AA7),
                        Color(0xFF7D538B),
                        Color(0xFFAE4E74),
                        Color(0xFFD14A64),
                        Color(0xFFE7475A),
                        Color(0xFFEF4757),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      stops: [
                        0.02,
                        0.11,
                        0.28,
                        0.41,
                        0.5,
                        0.52,
                        0.73,
                        0.82,
                        0.92,
                        0.95,
                        1
                      ]),
                ),
              ),
            ),
          ),

          // ...others widgets
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search