[Flutter Web] Fluro 패키지로 네비게이션 라우팅하기 ( Deep link / Transitions)

 

 

flutter web routing을 위해 get it package를 사용했었는데 

현재 어플리케이션 상태를 나타내는 url이 수정되지 않아

주소를 직접 수정해 페이지 이동을 하지 못하는 문제가 있다는 것을 알게 되었다.

Fluro package를 사용해 딥링크 문제를 해결했다. 

 

딥링크
특정 페이지에 도달 할 수 있는 링크

 

pub.dev/packages/fluro

fluro | Flutter Package

 

 

---

1) Fluro package 가져오기 

dependencies:
  fluro: ^1.7.8

 

2) main에서 웹 사이트를 실행하기 전에 MyFluroRouter에서 정의된 경로들을 선언한다. 

void main() {
  MyFluroRouter.setupRouter();
  runApp(MyApp());
}

 

3) FluroRouter 인스턴스를 생성하고 구체적인 routing 정보를 정의하는 MyFluroRouter 클래스를 생성한다.

class MyFluroRouter {
  static FluroRouter router = FluroRouter();

  static Handler _LoginPageHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          LoginPage());
static Handler _HomePageHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          MyHomePage());
  static Handler _MyClassHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          MyClassScreen());
  static Handler _MyClassDetailHandler =
      Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    final args = context.settings.arguments as Lecture;
    return MyClassDetail(data: args);
  });
        
  static void setupRouter() {
    router.define(LoginPageRoute,
        handler: _LoginPageHandler, transitionType: TransitionType.fadeIn);
    router.define("$HomePageRoute/:user:",
        handler: _HomePageHandler, transitionType: TransitionType.fadeIn);
    router.define(MyClassRoute,
        handler: _MyClassHandler, transitionType: TransitionType.fadeIn);
    router.define("$MyClassDetailRoute/:user/:data",
        handler: _MyClassDetailHandler, transitionType: TransitionType.fadeIn);
   }
 }

▷ 경로 처리기 (route handler)

 

- parameter 없을 때

static Handler _LoginPageHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          LoginPage());

- parameter 있을 때

 static Handler _MyClassDetailHandler =
      Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    final args = context.settings.arguments as Lecture;
    return MyClassDetail(data: args);
  });

 

▷ 경로 정의

 

- url parameter 없을 때

 router.define(LoginPageRoute,
        handler: _LoginPageHandler, transitionType: TransitionType.fadeIn);

- url parameter 있을 때

  router.define("$MyClassDetailRoute/:user/:data",
        handler: _MyClassDetailHandler, transitionType: TransitionType.fadeIn);

 

 

 

4) MaterialApp에서 initialRoute (첫 라우터 페이지) 와 onGenerateRoute를 정의한다. 

 MaterialApp(
        title: 'VineEdu',
        theme: _kVineTheme,
        debugShowCheckedModeBanner: true,
        onGenerateRoute: FluroRouter.appRouter.generator,
        initialRoute: LoginPageRoute,
        home: LoginPage(),
      ),

onGenerateRoute란 
앱이 named route로 이동할 때 사용되는 route generator callback이다.
앱이 푸쉬한 경로 이름만 반영된다. 

 

5) route를 푸쉬한다. 

 

▷ push한 페이지로 parameter 전달 없을 때 

String nextPathArg = '$HomePageRoute/${auth.getUid}';

onPressed: () {
	MyFluroRouter.router.navigateTo(context, nextPathArg);
}

 

▷ push한 페이지로 parameter 전달 있을 때 

 onPressed: () {
	MyFluroRouter.router.navigateTo(
		context,
		'$MyClassDetailRoute/${auth.getUid}/word',
		routeSettings: RouteSettings(
			arguments: lectures[0],
        ),
    );
}

 

developer.school/how-to-use-fluro-routing-with-flutter/