Flutter - TweenAnimatedBuilder 위젯

TweenAnimatedBuilder

- Tween은 begin을 시작해 end까지 애니메이션이 움직이도록 해준다.

- 애니메이션의 속성 : duration (애니메이션 실행 시간), curve(애니메이션 실행 속도 ex: 시작은 빠르게 중간부터 천천히 등)

- 주의 사항 : Tween의 타입, builder의 두번째 파라미터 타입 모두 일치 해야한다.

소스코드

- begin을 0으로 주고, percentage는 80으로 주었다.

- CircularProgressIndicator는 0 ~ 80까지 선으로 원을 그려준다 

정적인 CircularProgressIndicator위젯에 TweenAnimation을 사용해 선에 색 0 ~ 80 이 채워지는 효과가 생기게 되었다.

TweenAnimationBuilder(
            tween: Tween<double>(begin: 0, end: percentage), // 0 ~ percentage 애니메이션 적용,
            duration: defaultDuration,
            builder: ((context, double value, child) => Stack(
                  fit: StackFit.expand,
                  children: [
                    CircularProgressIndicator(
                      value: value,
                      color: primaryColor,
                      backgroundColor: darkColor,
                    ),
                    Center(
                      child: Text(
                        "${(value * 100).toInt()}%",
                        style: Theme.of(context).textTheme.titleMedium,
                      ),
                    ),
                    const SizedBox(height: defaultPadding / 2),
                  ],
                )),
          ),