안녕하세요. 오늘은 Flutter 의 WEB 버전에서 URL을 사용한 라우팅 방법을 소개하겠습니다.
️ Flutter WEB URL Startegy
기본적으로 FLutter 웹 앱의 URL 기반 라우팅을 구성하는 방법에는 두가지가 있습니다.
•
HASH(기본 설정)
flutterexample.dev/#/path/to/screen.
•
Path
HASH 없이 경로를 읽고 씁니다.
flutterexample.dev/path/to/screen.
️️️ 이 기본 세팅을 Path 를 사용하도록 변경하려면 import 'package:flutter_web_plugins/url_strategy.dart';
void main() {
usePathUrlStrategy();
runApp(ExampleApp());
}
JavaScript
복사
flutter_web_plugins 라이브러리의 usePathUrlStrategy() 함수를 main 함수 안에서 호출해주면 됩니다.
우리는 # 가 거슬리니까 호출해줍시다.
HASH로 설정시 # 빼먹으면 Routing 이 동작하지 않습니다…
Firebase Hosting 을 사용하는 경우 프로젝트를 초기화할 때 ‘단일 페이지 앱으로 구성’ 옵션을 선택해줘야 합니다.
(아마 Flutter 의 동작 방식이 index.html 파일 안에 UI 그리는 엔진 하나로 화면을 그려나가는 방식이라 그런 것 같습니다.)
루트가 아닌 위치에 호스팅 하는 법
앱이 호스팅되는 경로 <base href="/">의 태그를 업데이트하면 됩니다 . web/index.html예를 들어 Flutter 앱을 my_app.dev/flutter_app 에서 호스팅하려면 <base href="/flutter_app/"> 이 태그로 변경하세요 .
Route 구성
GetX 패키지를 사용중입니다.
class GetXRoutes {
static final pages = [
GetPage(
name: "/",
page: () => const EventScreen(),
binding: BindingsBuilder(() {
Get.put<EventsViewModel>(
EventsViewModel(),
);
}),
),
GetPage(
name: "/event/:eventId", // 동적 URL
page: () => const EventDetailScreen(),
),
GetPage(name: "/signin", page: () => const SignInScreen()),
GetPage(name: "/addinfo", page: () => const SignInAddInfoScreen()),
GetPage(name: "/profile", page: () => const MyProfileScreen()),
GetPage(name: "/entry", page: () => const MyEntryScreen()),
];
}
Dart
복사
class RespectApp extends StatelessWidget {
RespectApp({super.key});
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
theme: AppTheme.lightTheme(),
title: 'HYPETOWN',
initialRoute: "/",
unknownRoute: GetPage(
name: '/notfound',
page: () => const EventScreen(),
binding: BindingsBuilder(() {
Get.put<EventsViewModel>(
EventsViewModel(),
);
}),
),
getPages: GetXRoutes.pages,
);
}
}
Dart
복사