티스토리 뷰
오늘부터 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)
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
감사합니다.
'개발 > Flutter' 카테고리의 다른 글
Flutter : 반응형 버튼 만들기 (MediaQuery 이용) (0) | 2023.04.20 |
---|---|
Flutter : AnimatedBuilder widget (0) | 2023.04.14 |
Flutter : 개발팁 정리 (1) | 2023.02.28 |
Flutter : A RenderFlex overflowed by 9.0 pixels on the right (2) | 2023.02.24 |
Flutter : Exception : Building with plugins requires symlink support (2) | 2023.02.21 |