[Flutter] 색상 변경 애니메이션 적용하기

 

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _tweenColor;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _tweenColor =
    ColorTween(begin: const Color(0xFF00DAFA), end: const Color(0xFF04FDAD))
        .animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: _tweenColor.value
          ),
        ),
      )
    );
  }
}

 

 

코드 설명

• 색상이 변경되는 이벤트를 주기 위해선 AnimationController가 필요합니다. AnimationController는 애니메이션 동작의 조건을 초기화하기 위해 사용합니다.
• initState() 메소드에서 AnimationController 변수를 초기화 합니다. duration은 이벤트가 동작 되는 시간이고, vsync는 동기화 되는 곳을 지정합니다. AnimationController를 사용하기 위해선 class 선언 라인에 TickerProviderStateMixin을 참조합니다.
• repeat 속성은 controller가 반복되는 여부를 설정합니다.
• Animation 변수는 AnimationController의 동작 방식에 따라 이벤트가 발생되는 변수입니다.
• 2가지 색상이 변경이 되게 하기 위해선 _tweenColor란 Animation 변수에 ColorTween()을 초기화합니다.
• begin은 시작할 색상, end는 끝나는 색상입니다.
• 동작할 animate는 미리 선언한 AnimationController 변수를 적용합니다.
• Container() 위젯의 색상을 이벤트가 동작이 되는 변수의 값을 적용합니다.

 

참고 사이트

https://www.kindacode.com/article/flutter-colortween/

https://www.tutorialkart.com/flutter/flutter-animate-color/