현이의 개발 이야기

위젯 회전시키기

Flutter 2024. 05. 13. 03:42

앱을 만들다보면 한 위젯을 계속 회전시켜야 하는 경우가 있다.

이럴 때 사용하기 좋은 Rotation 위젯을 만들어보았다.

Rotation(
  speed: 30, // 1초에 30도 회전
  child: Image.network('https://picsum.photos/seed/hyuni/100/200'),
),

회전하는 위젯 이 위젯을 만든 과정을 되짚어보자.

1. 위젯 회전시키기

다음과 같이 Transform 위젯을 이용하면 위젯을 쉽게 회전시킬 수 있다.

import 'dart:math';
import 'package:flutter/material.dart';

class Rotation extends StatelessWidget {
  const Rotation({super.key});

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: 45 / 180 * pi, // radian
      child: Image.network('https://picsum.photos/seed/hyuni/100/200'),
    );
  }
}

2. 회전 애니메이션 주기

여기서 각도를 state로 변환하고, Ticker를 활용하면 회전을 자유자재로 조절할 수 있다.

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class Rotation extends StatefulWidget {
  const Rotation({super.key});

  @override
  State<Rotation> createState() => _RotationState();
}

class _RotationState extends State<Rotation> {
  late final Ticker? _ticker;

  // 1초에 30도 회전
  final double speed = 30;
  double _angle = 0;

  @override
  void initState() {
    _ticker = Ticker((elapsed) {
      setState(() {
        _angle = speed * elapsed.inMilliseconds / 1000;
      });
    });
    _ticker?.start();

    super.initState();
  }

  @override
  void dispose() {
    _ticker?.stop();
    _ticker?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _angle / 180 * pi, // radian
      child: Image.network('https://picsum.photos/seed/hyuni/100/200'),
    );
  }
}

로그인이 필요합니다.

로그인