[Flutter로 개인 블로그 만들기] #3-1. go_router를 이용하여 라우팅 관리하기

이번엔 라우팅(Routing)에 대해 해보도록 하겠습니다.

 

라우팅이 필요한 이유

웹에서는 링크를 통해 해당 페이지로 이동해야해서 라우팅 작업이 필수이지만,

앱에서도 필요할까 싶은 경우가 많을겁니다.

 

물론 단순히 뒤로 가고, 해당 페이지로 이동하는 작업만 필요할 때는 굳이 쓸 필요는 없는 건 맞습니다.

 

다만 추후에 앱에 딥링킹(Deep-Linking)작업을 하게 된다면 라우팅 작업이 의미가 커지게 됩니다.

 

딥링킹이란 외부에서 링크를 통해 앱을 들어가게 될 때, 해당 페이지로 이동하는 것인데

딥링크를 이용해서 어디로부터 유입되어서 앱을 설치했는지를 파악할 수 있어

마케팅쪽에서 중요한 작업이라고 할 수 있습니다.

 

기존에는 Firebase Dynamic Link를 이용해서 처리할 수도 있었지만 다이나믹 링크는 2025년 8월 25일에 서비스 종료 예정이기에, 다른 툴을 이용해야하는데 다른 툴들은 비용이 드는 경우가 많아 비용 절감을 위해서 자체 구현해보는 것도 좋을것입니다.

 

라우팅 라이브러리로 go_router를 선택한 이유

go_router를 쓴 이유라고 하면,

• 웹과 비슷한 계층적 처리
• flutter에서 직접 관리하는 라이브러리(routing 라이브러리중 많은 이용자수)
• build_runner를 이용한 generated 처리 가능(코드 단순화)

이렇기에 go_router를 선택하게 되었습니다.

 

그래서 이번 포스팅에서는 추후 관리자 기능을 위해 로그인 페이지를 만들고 링크를 바꾸면 맞는 페이지가 나오게 하는것까지만 진행해보기로 해보겠습니다.

 

go_router 설치

우선 go_router를 설치하도록 하겠습니다.

설치방법은 여기서 확인 가능합니다만, 간단한 작업이므로 포스트에서도 같이 안내해드리겠습니다.

flutter pub add go_router

이렇게 하여 go_router를 설치해주시면 됩니다.

 

App Router 기본 세팅

import 'package:flutter_blog/main.dart';
import 'package:go_router/go_router.dart';

final appRouter = GoRouter(routes: [
  GoRoute(
      path: '/',
      builder: (context, state) {
        return const MyHomePage(title: 'Flutter Demo Home Page');
      })
]);

이제 GoRouter 기본 세팅을 해줍니다.

우선 저같은 경우는 lib폴더에 routes란 폴더를 하나 만들고, app_router.dart란 파일을 만들어서 다음과 같이 코드를 짰습니다.

 

routes는 여러 route들의 집합이고, 여기에 route정보를 넣어야 route가 가능해지게 됩니다.

그리고 GoRoute는 Route 정보를 넣어주는 것으로 path는 링크, builder를 통해 해당 링크를 들어가게 되면 보여질 페이지를 전달해주는 것입니다.

물론 GoRoute말고도 다른 방식이 있는데, 이 부분은 추후 탭페이지 만들 때 더 얘기해보겠습니다.

 

우선 저렇게 세팅한 다음 main.dart로 가서 router연결을 해주도록 합시다.

import 'package:flutter/material.dart';
import 'package:flutter_blog/routes/app_router.dart';

// 중략

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: appRouter,
    );
  }
}

 

기존에 MaterialApp을 MaterialApp.router로 변경해주고, home을 제거해주고 그 자리에 routerConfig를 추가해주고 아까 만들었던 appRouter를 넣어줍니다. 그리고 실행해봅니다. 그러면 실행 잘 되는 걸 확인 가능합니다.

 

로그인 링크 추가

그러면 이제 로그인 링크를 추가해보도록 합시다.

우선 이제 메인에 있는 MyHomePage 지우고, 본격적으로 폴더를 구분해두도록 해보겠습니다.

저는 features란 폴더를 만들고, 각각 home, log_in이란 폴더를 만들고, 각각 폴더에 home_screen, log_in_screen을 만들도록 하겠습니다. 모두 일단은 기본 screen으로 만들어줍니다.

home_screen

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("홈")),
      body: Text("홈 페이지"),
    );
  }
}

log_in_screen

import 'package:flutter/material.dart';

class LogInScreen extends StatefulWidget {
  const LogInScreen({Key? key}) : super(key: key);

  @override
  _LogInScreenState createState() => _LogInScreenState();
}

class _LogInScreenState extends State<LogInScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("로그인")),
      body: Text("로그인 페이지"),
    );
  }
}

 

그리고 app_router.dart로 가서 라우팅 세팅을 해줍니다.

import 'package:flutter_blog/features/home/home_screen.dart';
import 'package:flutter_blog/features/log_in/log_in_screen.dart';
import 'package:go_router/go_router.dart';

final appRouter = GoRouter(routes: [
  GoRoute(
      path: '/',
      builder: (context, state) {
        return const HomeScreen();
      }),
  GoRoute(
      path: '/login',
      builder: (context, state) {
        return const LogInScreen();
      }),
]);

 

그리고 실행해봅니다.

 

근데 이상하게 오류가 있습니다?

분명 주소를 뒤에 /login으로 붙였는데도 홈 페이지가 보입니다.

이거는 어떻게 해결해야할까요?

 

주소에 맞는 페이지가 안 나오는 문제 해결

import 'package:flutter/material.dart';
import 'package:flutter_blog/routes/app_router.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy()); // 추가
  runApp(const MyApp());
}

// 후락

main 실행할 때 해당 코드를 추가해줍니다.

기존 Flutter의 경우에는 hash방식의 url 정책을 이용하는데, 그러면 go_router에서 인식을 하지 못해

웹과 같은 path방식의 url 정책으로 변경해서 go_router에서 링크를 인식할 수 있게 해줍니다.

해당 작업을 적용하고 다시 실행해봅시다.

 

그러면 정상적으로 로그인 페이지가 보이게 됩니다!

 

다음 작업

다음 작업으로는 go_router와 riverpod을 이용하여 로그인이 안된 상태일 때는 로그인 페이지를, 로그인이 된 상태이면 홈 페이지가 보이게 설정하는 작업을 진행해보겠습니다.

해당 부분만 구현되면 routing 작업에서 큰 고비는 넘겼다고 볼만하겠네요!