1. 개요

주의!! 아이폰유저는 해당차이점을 느끼지못할수도있습니다

어떤 프레임워크를 사용하든간에 그 프레임워크의 특성이 보이기마련이죠,
플러터는 그래도 엄청나게 쉽고 간단하게 커스터마이징이가능해서
플러터라고 하지않으면 알아채기 힘들죠

하지만 한부분! 플러터의 특성이있는데요

네이버 지식인	점프잇

gif인데 한번만재생되서 꾹누르시고 이미지보기하시면 보입니당

해당 앱을 자세히 본다면 라우팅 애니메이션이 네이티브와는 다르게 아래에서 위로,페이드 효과가 있다는걸 알수있답니다.

그럼 제일먼저 라우트를 바꿔보겠습니다!

• get 라이브러리를 쓰면 매우 간단하게 해결가능한 부분이지만, 저는 get을 쓰다보니 가로화면에선 크기인식이 안되는둥, 라우터 푸시가 이상하게 동작한다는둥 여러 문제가 있었어서 상태관리 외에 다른 기능들은 사용을 안하고있습니다.

2. 라우트 오버라이딩

먼저 깃헙에있는 프로젝트에서 라우트를 만들려고하는데. 뭐 저는 util이라는 디렉토리를 만들어서 집어넣으려고한답니다.

아직 플러터가 방식이 너무 다양하고 고정된것이 없는데다가, 제가 그냥 편한데로 만드는것도있어서 이건 정해진게 없다고 생각하시면됩니다!

import 'package:flutter/material.dart';

class CustomRoute<T> extends PageRoute<T> {
  @override
  Color? get barrierColor => throw UnimplementedError();

  @override
  String? get barrierLabel => throw UnimplementedError();

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    throw UnimplementedError();
  }

  @override
  bool get maintainState => throw UnimplementedError();

  @override
  Duration get transitionDuration => throw UnimplementedError();
}

대강 class route extends PageRoute{}
까지만써도 뭐뭐 필요한지 ide에서 다알려주니 대단할껀없지만,
materialPageRoute 를까보니깐 < T >이걸 붙여주길래 저도 붙여줬답니다.

그리고 이제 저희가 필요한 부분을 추가해줍시다

import 'package:flutter/material.dart';

class CustomRoute<T> extends PageRoute<T> {
  final WidgetBuilder builder;

  //builder 는 위젯빌더 settings는 네임드 라우트에서 argument를 사용할때 필요!!
  CustomRoute({required this.builder, RouteSettings? settings})
      : super(settings: settings);

  //일단 간단하게 투명배경!
  @override
  Color? get barrierColor => Colors.transparent;

  //배리어에 접근성추가, 이부분을 인식해서 시각장애인분들이 터시시에 tts가 읽어주는 역활을 합니다
  @override
  String? get barrierLabel => "페이지 이동중";

  //얘는 잘모르니 패스!
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  //애는 추가! 왼쪽으로 이동하는 라우트 애니메이션을 만들었습니다!
  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return SlideTransition(
        position:
            Tween<Offset>(begin: const Offset(1, 0), end: const Offset(0, 0))
                .chain(CurveTween(curve: Curves.easeInOut))
                .animate(animation),
        child: child);
  }

  //이전 페이지에서 future를 사용해서 다음페이지에서 resolve를 해야할때 true! 딱히 사용할데는 모르겠습니다
  @override
  bool get maintainState => false;

  //페이지 이동 시간
  //저는 300ms!
  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);
}

요로코롬 만들면 이제끝

그럼 적용을위해 깃헙에서 홈부분을 변경해줍니다

class HomeItems extends StatelessWidget {
  const HomeItems({Key? key, required this.title, required this.to})
      : super(key: key);
  final String title;
  final RouteF to;
  @override
  Widget build(BuildContext context) {
    return CupertinoTap(
      onTap: () {
       //요기부분
       Navigator.of(context).push(MaterialPageRoute(builder: to));
      },

MaterialPageRoute()=>CustomRoute()로 변경!

그치만.. 아이폰 시뮬레이터를쓰면 변경된걸 모르시겠죠..?

그럼 아래서 위로올리면 티가 잘나요 buildTransition을 바꿔보시면 된답니다!

3.namedroute는?

이렇게 한다해도 push 하는데만바뀌지 pushNamed는 바뀌지않아욤

그럼 main.dart를 약간 수정하면되는데요

getx를 사용한다면

GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      onGenerateRoute: (settings) => CustomRoute(
          settings: settings,
          builder: (context) => routes[settings.name]!(context)),
      theme: CustomThemeData().light,
    );

요로고롬 생긴데에다가 onGerateRoute 이부분 보이시죠?

이걸 위와같이 해놓고 routes를 바깥에 두시면되요

그럼 namedpush일때도 플러터티가 살짝 준답니다

고럼 오늘은 이만!