seong
Flutter - showDialog를 화면 위에서 내려오게 하기 본문
1. showGeneralDialog를 사용해 커스텀한 dialog를 사용
2.Duration,Tween,SlideTransition을 사용해서 해당 효과를 만들어준다.
Duration : 애니메이션의 지속시간
Tewwn : 시작(begin)과 끝(end)을 가지며, 애니메이션을 시작과 끝을 부드럽게 이어준다.
SlideTransition : 화면의 슬라이딩 효과를 만들고 싶을때 사용한다.
애니메이션 관련 소스코드
barrierDismissible : true 일경우 다른 곳을 터치해도 dialog를 닫을 수 있도록 해줌.
transitionDuration : dialog가 나타나는데 걸리는 시간 ( milliseconds: 400 = 0.4초 )
transitionBuilder : 어떠한 애니메이션을 적용할지를 정한다.
- 파라미터 종류 : context,animation, secondaryAnimation,child
- secondaryAnimation는좀 더 복잡한 animation을 구현할 때 사용한다,
showGeneralDialog(
//Animate
barrierDismissible: true,
barrierLabel: "Barrier",
context: context,
//dialog가 내려오는 속도
transitionDuration: const Duration(milliseconds: 400),
// dialog Animation
transitionBuilder: (_, animation, __, child) {
Tween<Offset> tween;
//Offset x: 0, y :-1 즉 위에서 시작해 원상태(zero) 까지.
//만약 1,-1 이라면 오른쪽 위에서 나온다.
tween = Tween(begin: const Offset(0, -1), end: Offset.zero);
//slide Animation
return SlideTransition(
position: tween.animate(
CurvedAnimation(parent: animation, curve: Curves.easeInOut),
),
child: child,
);
},
pageBuilder : () => 페이지 디자인 부분
)
'Flutter > Flutter' 카테고리의 다른 글
Flutter - SideMenu (0) | 2023.09.12 |
---|---|
Flutter -RiveAnimation Icon (2) (0) | 2023.09.12 |
Rive 만들기 (0) | 2023.09.09 |
Flutter - RiveAnimation위젯 (1) (0) | 2023.09.06 |
Flutter - appBar에 drawer추가 (0) | 2023.09.04 |