[Flutter] Fluro를 통해 라우팅 설정하고 URL 해시 없애기

| |
플러터 웹에서 fluro 를 통해 router 를 설정하고 URL에 포함되있는 '#' 을 없애보자


이슈

Flutter를 통해 간단한 웹페이지를 개발하게 되었다. 하지만 기존에 사용하던 Navigator 클래스를 이용한 페이지 네비게이션 방식은 URL 입력에 따른 라우팅은 지원하지 않는다. 어떤 라우팅 방식을 이용해야 할까? 또, flutter web을 이용해 웹을 빌드하면 URL 맨 끝에 해시 기호(#) 가 항상 붙는다. 이는 어떻게 없앨 수 있을까?


해결

라이브러리

코드

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import 'package:fluro/fluro.dart';
import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy(); // URL 에서 해시 기호 삭제
  FRouter.setupRouter(); // 라우팅 설정
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YJYOON',
      onGenerateRoute: FRouter.router.generator, // 라우팅 등록
      theme: ThemeData(
          //
          //. . .
          //
          ),
      home: HomeScreen(),
    );
  }
}

// Fluro Router
class FRouter {
  static FluroRouter router = FluroRouter();

  static void setupRouter() {
    // parameter가 없는 정적 페이지
    router.define('/info',
        handler: Handler(
            handlerFunc: (context, params) =>
                InfoScreen(),
        transitionType: TransitionType.fadeIn);
    
    // 'userId'에 따라 데이터가 달라지는 페이지
    router.define('/user/:userId',
        handler: Handler(
            handlerFunc: (context, params) => 
            UserScreen(userId: params['userId']![0]),
        transitionType: TransitionType.fadeIn);
  }
}


고찰

Fluro

위 코드에서 확인할 수 있듯이 아주 간단하게 라우팅을 설정할 수 있다. 라우팅용 클래스를 따로 생성하고 URL에 따른 라우터를 정의해주면 된다. 이 때 URL에서 파라미터를 가져와 표시하려는 화면 클래스의 파라미터로 넘길 수 있다. 이를 통해 화면 클래스에서 파라미터에 따른 fetching을 해주면 된다. 또 transitionType을 통해 다양한 화면 전환 효과를 적용할 수 있다. 이렇게 화면 전환 효과까지 간편하게 적용할 수 있다는 것 또한 fluro만의 장점이다.

URL Strategy

URL에서 해시 기호(#)는 url_strategy를 import하고 main 함수에서 setPathUrlStrategy()를 호출하는 것만으로 해결된다. URL 전략에는 path url과 hash url 두 가지가 있는데 이 중에서 path url 방식으로 세팅함으로써 해결하는 방식이다.

0%