[Flutter web] Flour 패키지로 라우팅하기

0. 기존에 사용하던 라우팅 방식

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => DetailPage(),
    transitionDuration: Duration(seconds: 0),
  ),

웹에서 화면 전환시에 앱과 같은 애니메이션이 보인다면 꽤나 낯설게 느껴질 것이다.

그러나 Named Route로의 화면 전환에서는 애니메이션을 설정해줄 수가 없었다.

정확하게 말하자면 transitionDuration: Duration(seconds: 0) 이 코드를 추가해줄 수 없었다.
바로 이 방식 말이다.

Navigator.pushNamed(context, '/second');

프로젝트 개발 초기단계라 뒷 일은 미래의 나에게 맡겨두었다.

코드, 일단 잘 돌아가면 된다. -과거의 나-

하지만 아주 치명적인 문제를 발견했다.

• 새로고침시 웹 초기 화면으로 진입
• 딥링크 불가
  어딜가도 /#/ 주소만 뜬다.
  

앱에서는 라우팅 시에 경로를 넣어주지 않아도 당장은 문제되지 않는다고 생각한다.
하지만 웹에서는...? 조금 다른 얘기인 것 같다.

서론이 길었지만 이제서야 리팩토링을 진행한다는 아주아주 슬픈 이야기이다.

1. Fluro 패키지로 라우팅하기

1. fluro package 다운로드
https://pub.dev/packages/fluro

2. 클래스 추가해주기

//FluroRouter.dart
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';

class FRouter {
  static FluroRouter router = FluroRouter();

  static const String flumeDefault = '/flume';

  static var detailHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return FlumeManagementPage();
  });

  static void setupRouter() {
    router.define(flumeDefault, handler: detailHandler, transitionType: TransitionType.fadeIn);
  }
}

setupRouter 부분에서
첫번째는 route path이고
두번째는 핸들러
세번째는 화면 전환시 보여질 애니메이션이다

3. main.dart 수정하기

//main.dart
void main() {
  FRouter.setupRouter();
  runApp(FlumeWeb());
}

Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flume Ride Web',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: FRouter.router.generator,
      initialRoute: '/',
      routes: {
        '/': (context) => LogInPage(),
      },
    );
  }

FRouter.setupRouter();
onGenerateRoute: FRouter.router.generator
이 두 코드를 추가해줬다

프로젝트 상태관리를 GetX로 했기 때문에 MaterialApp이 아니라 GetMaterialApp을 리턴해주었다.

4.사용하기

String nextPathArg = '/flume';
FRouter.router.navigateTo(context, nextPathArg);

경로는 위의 FRouter에 미리 추가해둔 경로로 라우팅이 되어야한다

끝 !

---

그리고 새롭게 발견한 문제...

새로고침 버튼을 누르게 되니까 getx로 선언한 변수들이 다 초기화 된다.
이걸 어떻게 해야할까....? UI만 덩그러니 남아버린 이 상황 ......
꼭 해결 방안을 찾아서 다음 글도 쓸 수 있게 해주세요 ...

참고
: https://childcare-daddy.tistory.com/14
https://seizemymoment.tistory.com/67