<Flutter> Animations sample 적용하기(AnimationController)

지난 글에 이어서 여러가지 Animations samples를 적용해볼게요!

 

1. AnimationControllerDemo: Demonstrates how to use an AnimationController.

AnimationController에 대해서 알아볼까요?

 

Using the SingleTickerProviderStateMixin can ensure that our AnimationController only animates while the Widget is visible on the screen. This is a useful optimization that saves resources when the Widget is not visible.

SingleTickerProviderStateMixin 이라는 친구가 AnimationController가 위젯이 스크린에 보일때 애니매이트할 수 있도록 보장해준대요. 위젯이 보이지 않을 때 자원들을 절약?하는 최적화에 유용하다고 해요. 그니까 Single이라는 친구가 AnimationController이 화면에 보이는 위젯에만 동작할 수 있도록 제한해주는 역할이라고 생각하면 좋을 거 같아요.

 

controller = AnimationController(vsync: this, duration: _duration)
      // The Widget's build needs to be called every time the animation's
      // value changes. So add a listener here that will call setState()
      // and trigger the build() method to be called by the framework.
      // If your Widget's build is relatively simple, this is a good option.
      // However, if your build method returns a tree of child Widgets and
      // most of them are not animated you should consider using
      // AnimatedBuilder instead.
      ..addListener(() {
        setState(() {});
      });
  }

이 변수가 AnimationController를 저장하는 변수예요. 설명을 살펴보면 애니메이션의 값이 변경될 때마다 위젯의 build가 호출되야 한다고 해요. 그래서 여기에 ..addListener()를 추가하고 이게 setState()를 부르고 build() 메서드를 촉발, 음... 발생? 암튼 trigger 해준다고해요. 그리고 AnimationController는 위젯이 심플하면 좋지만 복잡하면 AnimationController보단 AnimationBuilder를 대신 하용하는 게 좋대요. 

 

@override
  void dispose() {
    // AnimationController is a stateful resource that needs to be disposed when
    // this State gets disposed.
    controller.dispose();
    super.dispose();
  }

AnimationController은 stateful resource 이기 때문에 state가 제거될 때 제거되야 한대요. 그래서 위와 같은 코드를 확인할 수 있어요.

 @override
  Widget build(BuildContext context) {
    // When building the widget you can read the AnimationController's value property
    // when building child widgets. You can also check the status to see if the animation
    // has completed.
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animation Controller'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 200),
              child: Text(
                controller.value.toStringAsFixed(2),
                style: Theme.of(context).textTheme.displaySmall,
                textScaleFactor: 1 + controller.value,
              ),
            ),
            ElevatedButton(
              child: const Text('animate'),
              onPressed: () {
                if (controller.status == AnimationStatus.completed) {
                  controller.reverse();
                } else {
                  controller.forward();
                }
              },
            )
          ],
        ),
      ),
    );
  }

AnimationController의 속성값을 알수도 있다고 해요.  위에보면 Text로 그 값을 화면에 띄우는 코드를 확인할 수 있고 ElevatedButton 위젯을 활용해서 AnimationController를 구현한 걸 확인할 수 있어요.

 

제가 깃이슈가 있어서 VS code에서  Device가 인식이 안되서 실제 구현된 건 못 올릴거 같아요.

이슈가 해결되는 대로 바로 업로드할게요!