Flutter/Dart GIF를 앱 상에서 실행시켜보자. GifController 사용법 TIL # 53
최근에 배운 게 많아 벌써 하루에 두 개의 글을 쓴다.
이번 기능은 생각보다 어렵지 않기 때문에
금방 끝내려고 한다.
이번 기능은 저번 예제에서 사용했던
AnimatedContainer와 연동해서 사용한 예제를 보여주려고 한다.
예제라기보다는 어떻게 사용하는지 말이다.
(예제 코드 만드는 게 여간 힘들다...)
우선 Gif 파일을 준비 해준다.
gif는 구글에 치면 많이 나온다..
아래와 같은 기능을 할 것이다.
AnimatedContainer 기능은 저 사각형의 다이얼로그를 동그랗게 shape 할 때 사용하였는데,
방법은 이전 글에 있으니, 우선 이 것부터 보고 오면 좋을 듯싶다.
flutter / dart / AnimatedContainer in Dialog 사용법 다이얼로그를 둥글게 애니메이션 처리하기 TIL # 52
오늘은 애니메이션 처리에 대해 글을 쓰려고 한다. 여러 유용한 패키지가 있었지만, 기존 flutter가 가지고 있는 AnimatedContainer를 한번 사용해 보려고 한다. 우선 flutter ui가 나는 아직 미숙하므로,
daldalhanstory.tistory.com
우선 아래에 패키지를 등록해주자.
https://pub.dev/packages/flutter_gifimage
flutter_gifimage | Flutter Package
a gifimage for flutter,for solving gif cannot be controlled speed,progress
pub.dev
gif를 앱에서 원하는 대로 컨트롤할 수 있는 패키지이다.
이러한 Animation 처리를 해주기 위해서는 TickerMode를 활성화해야 한다.
_class에 TickerMode 활성화 방법은 다음과 같다.
class _ChattingPageEtcDialog extends State<ChattingPageEtcDialog> with TickerProviderStateMixin{
...
}with 뒤에 TickerProviderStateMixin을 붙여준다.
그리고 GifController 객체를 생성하고,
객체 안에 파라미터에 애니메이션을 위한 vsync에 tickerMode 받은(이 클래스의 정보) 정보를 넣어준다.
@override
void initState() {
gifController = GifController(vsync: this);
}자 이러면 준비는 끝났다.
GifImage(
width: 30.w,
height: 30.h,
controller: gifController,
image: AssetImage(IconsUtil.getAssetsGIF(IconsInfo.chatIcon.checking))),이런 식으로 위젯을 만들어 Container 같은 데다가 넣어주어 사용하면 된다.
여기서 나온 (IconsUtil.getAssetsGIF(IconsInfo.chatIcon.checking) 부분은
내가 직접 클래스에서 지정한 gif 파일의 명이다.
실제로는 asset에다가 사용할 gif 파일이나, gif가 담긴 파일을 추가시켜주고,
예를 들어 이런 식으로 추가해주면 된다.
AssetImage('assets/icons/icon_textfield_check_true_25X25.gif')
controller 부분에는 아까 TickerMode를 활성화한 컨트롤러를 넣어준다.
이제 이 gif 파일을 컨트롤해보자
gifController.animateTo(50, duration: Duration(milliseconds: 1000));
await Future.delayed(Duration(milliseconds: 1000));
gifController.stop();gifController에 여러 기능이 있지만,
나는 위에서 다음과 같은 기능을 사용하였다.
몇 초 동안 애니메이션을 실행할 것인지는 Duration으로 지정해주고,
50은 애니메이션에 지정 크기이다.
내가 원하는 아이콘의 크기는 임의로 지정하고 나서, 여기서 애니메이션에 지정 크기를 따로 정해주어야 한다.
적절하게 맞추지 않으면 오류가 나므로, 잘 맞춰보자.
그리고 1초 뒤에
컨트롤러를 종료해주었다.
컨트롤러를 사용한 뒤에는 종료해주어야 한다.
더 많은 기능이 있겠지만 내가 사용한 기능은 여기까지 이므로,
여기까지 포스팅!!
