내가 보려고 쓰는 Flutter 일기
참고1 : https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html

TweenAnimationBuilder

저번 일기에서 Tween 을 배웠으니, 이번에는 TweenAnimationBuilder를 배워보자.

Tween 이 붙은 이름에서 알 수 있듯이, Tween.begin을 시작값으로 하여 Tween.end로 변할 때까지 애니메이션이 적용된다. 애니메이션의 변화와 시간을 설정하려면 curve, duration 속성을 각각 설정하면 된다.

애니메이션 효과를 결정하는 값(Tween)과 자식 요소는 builder 속성으로 전달되는데, builder 에 함수를 지정하여 Tween.end 에 도달할 때까지 해당 함수가 실행된다. (자식 요소를 builder로 넘겨주게 되면, 애니메이션이 진행되는 동안 앱이 전체 위젯 트리를 다시 빌드하지 않는다고 한다.)

Tween의 타입은 builder의 두 번째 파라미터 타입과, TweenAnimationBuilder 의 타입과 일치해야 한다.

요기까지 알아보고 코드로 넘어가보자.

코드 예시로 알아보자

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double targetValue = 120.0;

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0, end: targetValue),
      duration: const Duration(seconds: 1),
      builder: (BuildContext context, double size, Widget? child) {
        return IconButton(
          iconSize: size,
          color: Colors.blue,
          icon: child!,
          onPressed: () {
            setState(() {
              targetValue = targetValue == 120.0 ? 240.0 : 120.0;
            });
          },
        );
      },
      child: const Icon(Icons.aspect_ratio),
      curve: Curves.easeInCubic,
    );
  }
}

우선 이부분을 보면, Tween의 타입은 builder의 두 번째 파라미터 타입과, TweenAnimationBuilder 의 타입과 일치(double) 한다.

return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0, end: targetValue),
      duration: const Duration(seconds: 1),
      builder: (BuildContext context, double size, Widget? child)

실행화면은 아래와 같다.

double 말고 color도 시도해보려고 하였으나 업데이트 때문인지 예제 코드가 재생이 안된다ㅠㅠ 다음에 다시 해보기로...

오늘의 일기는 여기까지!