Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Swift flutterview
- swift sms
- 스위프트 푸시
- 스위프트 테이블 뷰 셀
- 스위프트
- 안드로이드 FCM
- 스위프트 카메라
- 안드로이드 바로가기
- flutter rotate
- 플러터 뷰 컨트롤러
- 안드로이드 숏컷
- FlutterView MethodChannel
- 앱 꺼졌을 때 푸시 데이터 저장
- silent push
- 노티피케이션 익스텐션
- Swift flutterviewcontroller
- 안드로이드 앨범
- swift 문자
- 안드로이드 에러
- native flutter view
- 푸시 데이터 저장
- 앱 백그라운드 푸시 데이터 저장
- flutter 회전
- 스위프트 웹뷰
- 스위프트 UserDefaults
- swift autolayout
- NotificationService Extension
- 스위프트 앨범
- Flutter UIKitView MethodChannel
- Flutter NativeView
Archives
- Today
- Total
Things take time
[Flutter] Route 이동할 때 애니메이션 주기 본문
[코드]
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class PageRouteWithAnimation {
final Widget page;
PageRouteWithAnimation(this.page);
Route slideRitghtToLeft() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) {
return page;
},
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
var begin = Offset(1.0, 0.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween =
Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
Route slideLeftToRight() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) {
return page;
},
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
var begin = Offset(1.0, 0.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween =
Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
}
기존 방법으로 사용하던 MaterialPageRoute 클래스를 사용하지 않고, PageRouteBuilder라는 클래스를 사용하는 것으로 변경한다. 해당 클래스에는 기존 페이지 변경을 위한 pageBuilder와 페이지가 변경될 때 사용하는 transitionsBuilder가 있으므로 이를 정의하여 사용하는 것이다.
이동할 루트 정보를 생성자로 받고, 이후에 원하는 애니메이션으로 화면을 전환한다.
나 같은 경우, 아래와 같이 사용한다.
onTap: () {
PageRouteWithAnimation pageRouteWithAnimation = PageRouteWithAnimation(NoticeSetting());
Navigator.push(context, pageRouteWithAnimation.slideRitghtToLeft());
},
NoticeSetting()으로 작성한 페이지를 이동할때, 오른쪽에서 왼쪽으로 이동하는 애니메이션으로 이동한다.
배운 사이트
** 데이터 전달
1. onGenerateRoute를 사용하는 방법
2. 전달하는 Widget page 생성자에 파라미터를 전달하는 방법
=> https://g-y-e-o-m.tistory.com/162
'Flutter' 카테고리의 다른 글
[Flutter] 네이버클라우드플랫폼 사용시 Signature Key얻을 때! (1) | 2020.08.06 |
---|---|
[Flutter] 카카오 로그인 기본 설정 + invalid key hash (2) | 2020.07.30 |
[Flutter] popUntil할 때 데이터 전달까지 하고싶다면 (0) | 2020.07.16 |
[Flutter] Route에서 화면 종료 시, 데이터 전달 (0) | 2020.07.16 |
[Flutter] Route간 이동 및 데이터전달 (0) | 2020.07.14 |