Flutter : AnimatedAlign widget

오늘부터 Flutter widget에 대해 알아보려고 합니다.

그중에서도 오늘 알아볼 widget은 AnimatedAlign widget입니다.

 

AnimatedAlign widget은 사용자가 설정한 시간 및 위치로 객체를 이동할 수 있습니다.

 

1. 소스 코드

아래 AnimatedAlign 객체 생성하는 부분입니다.

child: AnimatedAlign(
  alignment: selected ? Alignment.topLeft : Alignment.topRight,
  duration: const Duration(seconds: 1),
  curve: Curves.linear,
  child: const FlutterLogo(size: 50.0),
),

- alignment (위치) : Alignment.topLeft : Alignment.topRight (필수요소)
- duration (시간) : const Duration(seconds: 1) (필수요소)
- curve (이동속성?) : Curves.linear
- child (이동객체) : const FlutterLogo(size: 50.0)

 

lib.zip

0.00MB

 

2. 옵션별 실행 결과

1)

- alignment : Alignment.topLeft : Alignment.topRight,
- duration : Duration(seconds: 1),
- curve : Curves.linear,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

2)

- alignment: selected ? Alignment.topLeft : Alignment.bottomLeft,
- duration: const Duration(seconds: 1),
- curve: Curves.linear,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

3)

- alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
- duration: const Duration(seconds: 1),
- curve: Curves.linear,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

4)

- alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
- duration: const Duration(seconds: 1),
- curve: Curves.decelerate,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

5)

- alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
- duration: const Duration(seconds: 1),
- curve: Curves.easeInExpo,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

6)

- alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
- duration: const Duration(seconds: 1),
- curve: Curves.easeInBack,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

7)

- alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
- duration: const Duration(seconds: 5),
- curve: Curves.easeInBack,
- child : const FlutterLogo(size: 50.0),

 

실행영상 보러가기

 

 

좀 더 공부하고 싶을때는....아래로

https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html

AnimatedAlign class - widgets library - Dart API

 

감사합니다.