게시글 - 1개

앱을 만들다보면 한 위젯을 계속 회전시켜야 하는 경우가 있다. 이럴 때 사용하기 좋은 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'), ); } }