[Flutter] Flutter 라우팅 관리, fluro로 깔끔하게 처리하기

Flutter 앱이 커질수록 페이지 이동(Route) 관리는 점점 복잡해집니다.
Navigator.push()만 계속 사용하다 보면,

• 라우트 이름 관리가 힘들고
• 파라미터 전달이 지저분해지고
• 딥링크 대응이 어려워집니다

이럴 때 유용한 라우팅 패키지가 바로 fluro입니다.

---

📌 fluro란?

fluro는 Flutter에서 사용하는 고급 라우팅 라이브러리로,

• URL 기반 라우팅
• 파라미터 전달
• 딥링크 처리
• 중앙 집중식 Route 관리

를 쉽게 구현할 수 있게 도와줍니다.

📦 pub.dev

https://pub.dev/packages/fluro

---

✅ fluro의 주요 특징

• 🌐 웹 스타일 URL 라우팅
• 📦 Path Parameter 지원
• 🧭 중앙 Router 관리
• 🔗 딥링크 대응 가능
• 🪶 비교적 가벼운 구조

---

📥 설치 방법

 

dependencies:
  fluro: ^2.0.5

---

🏗️ 기본 구조 설계

fluro를 사용할 때는 보통 아래처럼 구성합니다.

 

lib/
 ├ routes/
 │  ├ router.dart
 │  └ route_handlers.dart
 └ main.dart

---

🧭 Router 초기화

📄 router.dart

 

import 'package:fluro/fluro.dart';

class AppRouter {
  static final FluroRouter router = FluroRouter();
}

 

---

🎯 Route Handler 정의

📄 route_handlers.dart

 

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import '../pages/detail_page.dart';

var detailHandler = Handler(
  handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
    final id = params['id']?.first;
    return DetailPage(id: id ?? '');
  },
);

---

🗺️ Route 등록

📄 router.dart

 

import 'route_handlers.dart';

void defineRoutes(FluroRouter router) {
  router.define(
    '/detail/:id',
    handler: detailHandler,
    transitionType: TransitionType.cupertino,
  );
}

---

🚀 main.dart 설정

 

void main() {
  final router = AppRouter.router;
  defineRoutes(router);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: AppRouter.router.generator,
      initialRoute: '/',
    );
  }
}

---

🔗 페이지 이동 방법

👉 기본 이동

 

AppRouter.router.navigateTo(
  context,
  '/detail/100',
);

👉 애니메이션 포함

 

AppRouter.router.navigateTo(
  context,
  '/detail/100',
  transition: TransitionType.fadeIn,
);

---

📦 Query Parameter 사용하기

 

AppRouter.router.navigateTo(
  context,
  '/detail?id=100&name=flutter',
);

final id = params['id']?.first;
final name = params['name']?.first;

 

 

---

🌐 딥링크 대응

fluro는 URL 기반 라우팅이기 때문에
Flutter Web, 앱 딥링크와 매우 궁합이 좋습니다.

 

myapp://detail/123
https://myapp.com/#/detail/123

---

⚖️ fluro vs 다른 라우터

항목fluroNavigatorGetXgo_router

 

항목	fluro	Navigator	GetX	go_router
URL 기반	✅	❌	⚠️	✅
파라미터	✅	❌	✅	✅
딥링크	✅	❌	⚠️	✅
러닝커브	중	낮음	낮음	중

👉 기존 Navigator가 복잡해졌다면 fluro는 좋은 중간 단계 선택지입니다.

---

✅ 이런 경우 fluro를 추천!

• Flutter Web 지원이 필요한 경우
• URL 기반 페이지 이동이 필요한 경우
• 딥링크 구조가 명확한 앱
• GetX 없이 라우팅만 깔끔하게 분리하고 싶은 경우

---

🎯 마무리

fluro는 단순하면서도 강력한 라우팅 솔루션입니다.
특히 웹 + 모바일을 함께 고려한 Flutter 프로젝트라면 충분히 매력적인 선택입니다.