seong

Flutter - showDialog를 화면 위에서 내려오게 하기 본문

Flutter/Flutter

Flutter - showDialog를 화면 위에서 내려오게 하기

hyeonseong 2023. 9. 12. 12:20

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