[Flutter] Transform Widget

동기

Flutter Animation을 직접 만들고 싶었다. 그래서 자료를 살펴보는데, "Matrix4"를 알아야 했다. 이것은 행렬이다. 이 행렬을 위젯으로 만들면 Transform Widget이라고 한다. 그래서 먼저 TransformWidget을 사용해보면서 감을 잡고자 이 글을 작성한다.

나는 아래와 같은 애니메이션을 직접 만들고 싶었다.

출처: loading_animation_widget package

Transform Widget이란?

"transforms" 은 형태나 사이즈 위치를 변경하는 것을 뜻한다. 그것을 Widget을 감싸서 처리하면 된다.
cf) flutter Docs: Transform class

공식문서에서는 아래와 같이 정의하고 있다.

A widget that applies a transformation before painting its child.
하위 위젯을 그리기 전에, 형태를 변형하도록 해주는 위젯

그리고 생성자를 보면 끝이다. 아래 gif를 보면 단박에 이해가 될 것이다.

• Transform.flip

출처: Medium: Flutter:flip animation

• Transform.rotate

(출처: Medium: A Deep Dive Into Transform Widgets in Flutter)

• Transform.scale

(출처: Medium: A Deep Dive Into Transform Widgets in Flutter)

• Transform.translate: 이 친구는 그냥 이동이다.
  
  
  

간단 예제: rotate

간단하게 예제를 만들어보자.

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(  
    MaterialApp(  
      title: 'My app', // used by the OS task switcher  
      home: const MyApp(),  
    ),  
  );  
}  
  
class MyApp extends StatefulWidget {  
  const MyApp({super.key});  
  
  @override  
  State<MyApp> createState() => _MyAppState();  
}  
  
class _MyAppState extends State<MyApp> {  
  
  @override  
  void initState() {  
    super.initState();  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: Transform.rotate(  
          angle: 1.0,  
          origin: Offset(0.0, 0.0),  
          child: Container(  
            height: 100.0,  
            width: 100.0,  
            color: Colors.indigo,  
          ),  
        ),  
      ),  
    );  
  }  
}

이 코드를 실행해보면, 아래와 같다.

잘 돌아가있지만, 심심하다. 그렇다면 animation을 불어넣어주면 된다.

이렇게 회전시키는 것은 AnimationController와 Aniation 을 사용하여 구현할 수 있다.

제일 먼저, 두 참조변수를 선언한다.

class _MyState extends State<MyApp> {
	// 1. Controller & Aniation 선언
	late AnimationController _controller;
	late Animation<double> _animation;
}

이제 참조변수에 값을 전달한다. 이것은 initState 시점에 한다. 이 때, "SingleTickerProviderStateMixin" 를 조합한다. (mixin 이라 확장이라는 용어 대신 조합)

class _MyState extends State<MyApp> with SingleTickerProviderStateMixin {
	...

	@overide
	void initState() {
		super.initState();
		
		_controller = AnimationController(
			duration: const Duration(seconds: 2),
			vsync: this,
		);
		
		_animation = Tween<double>(begin: 0.0, end: 2 * pi)
			.animate(controller)
			..addListener(() {
				setState(() {});
			})
			..addStatusListener((state) {
				if (status == AnimationStatus.completed) {
					_controller.repeate();
					_controller.forward();
				}
			});
		_controller.forward();
	}
}

• SingleTickerProviderStateMixin : 애니메이션을 시작하기 위해서는 '티커' 라는 개념이 필요하다. 그 티커가 동작하도록 하게 해주는 mixin이다.
  (간단하게 생각하면, animation 동작에 필요하다.)
• vsync : vsync에 보면 this를 건내주고 있다. 이로써. Animation을 그릴 때, 프레임에 맞게 그릴 수 있도록 되는 것이다.
• 이후에 _animation에 할당한 코드를 보면 "Tween" 이라는 객체로 할당하고 있다. 이것은 시작지점과 끝지점만 지정해주고 이것을 animation 하는 위젯에 전달한다. 그러면 마치 총알을 쏘듯 저기에 있는 값들을 입력해준다.
• Tween이라는 것은 선형보간법을 뜻한다. 어렵게 말해서 선형보간법이지, 간단하게 생각하면 그냥 두점 사이를 직진으로 이어버리는 것이다.
• 0부터 2pi 까지 선형적으로 input이 전달된다. 2pi인 이유는 2pi Radian = 360도 이다.

이후 코드는 dispose 시점에 controller를 메모리 해제하는 것과 Transform.rotate에 돌아갈 각도에다가 _anmation을 전달하면 된다.

전체코드

import 'dart:math';  
  
import 'package:flutter/material.dart';  
  
void main() {  
  runApp(  
    MaterialApp(  
      title: 'My app', // used by the OS task switcher  
      home: const MyApp(),  
    ),  
  );  
}  
  
class MyApp extends StatefulWidget {  
  const MyApp({super.key});  
  
  @override  
  State<MyApp> createState() => _MyAppState();  
}  
  
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {  
  // 1. Controller와 Animation을 선언한다.  
  late AnimationController _controller;  
  late Animation<double> _animation;  
  
  @override  
  void initState() {  
    super.initState();  
    // 2. 선언한 참조변수들에게 값을 할당한다.  
    // 이 때, with 를 사용하여 mixin을 조합한다.(extends 옆에 추가)  
    _controller = AnimationController(  
      duration: const Duration(seconds: 2),  
      vsync: this, // with를 통해 기능을 조합하면 this를 사용할 수 있다.  
    );  
    _animation = Tween<double>(begin: 0.0, end: pi *2).animate(_controller)  
      ..addListener(() {  
        setState(() {});  
      })  
      ..addStatusListener((status) {  
        if (status == AnimationStatus.completed) {  
          _controller.repeat();  
          // _controller.forward();  
        }  
      });  @override  
    void initState() {  
      super.initState();  
      // 2. 선언한 참조변수들에게 값을 할당한다.  
      // 이 때, with 를 사용하여 mixin을 조합한다.(extends 옆에 추가)  
      _controller = AnimationController(  
        duration: const Duration(seconds: 2),  
        vsync: this, // with를 통해 기능을 조합하면 this를 사용할 수 있다.  
      );  
      _animation = Tween<double>(begin: 0.0, end: pi *2).animate(_controller)  
        ..addListener(() {  
          setState(() {});  
        })  
        ..addStatusListener((status) {  
          if (status == AnimationStatus.completed) {  
            _controller.repeat();  
            _controller.forward();  
          }  
        });  
      _controller.forward();  
    }  
  
    _controller.forward();  
  }  
  
  @override  
  void dispose() {  
    // 3. Controller를 dispose 해준다.  
    _controller.dispose();  
    super.dispose();  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: Transform.rotate(  
          angle: _animation.value,  
          origin: Offset(0.0, 0.0),  
          child: Stack(  
            children: [  
              Container(  
                height: 100.0,  
                width: 100.0,  
                color: Colors.indigo,  
              ),  
              CircleAvatar(  
                radius: 10.0,  
                backgroundColor: Colors.red,  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}

추후 사용방법

• 지금은 한 개의 애니메이션만 사용하고 있어서 큰 의미가 없어 보일 수 있다.
• 하지만, 여러 개의 Transform을 동시에 적용이 가능하다.

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
      return Transform(
        alignment: Alignment.center,
        transform: Matrix4.identity()
          ..rotateZ(_rotationAnimation.value) // <-
          ..scale(_scaleAnimation.value), // <--
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: FlutterLogo(),
        ),
      );
    },
  );
}

• 앞으로 진행할 애니메이션의 근간이 되는 위젯이므로 잘 알아두는 것이 필요해 보인다 :)