Flutter로 간단한 노트 앱을 만들어보자 ③ - GoRouter로 네비게이션 바 리팩터링

이번 글에서는 기존의 인덱스 방식의 화면 전환을 Enum 과 GoRouter 를 사용하여 리팩터링 해보겠습니다.

 

 

GoRouter란?

GoRouter는 Flutter의 네비게이션을 간편하게 관리할 수 있도록 도와주는 패키지입니다. URL 기반의 라우팅을 지원하며 화면 전환과 관련된 복잡한 과정을 간단히 처리할 수 있습니다.

 

 

리팩터링 이유

기존의 탭 전환 방식에서는 네비게이션을 인덱스로 관리했는데, 이렇게 인덱스로 화면 전환을 관리하면 화면이 추가되거나 순서가 변경될 때 수정이 번거롭습니다. 배열 안에 정의된 화면의 순서를 모두 외우고 있어야 개발이 가능하죠.

 

그렇기 때문에 이번 글에서는 Enum 과 GoRouter 를 이용하여 각 화면을 명확히 구분하고, 경로 기반의 전환으로 더 명확하고 유지보수하기 쉬운 구조로 변경하겠습니다.

 

그럼 이제부터 본격적인 리팩터링을 시작해 보겠습니다.!

 

 

1. enum으로 탭 항목 정의

먼저 각 화면 탭을 enum으로 정의합니다. 

// lib/enums.dart

enum TabItem { noteDetail, noteList, settings }

 

이렇게 enum 으로 정의하면 인덱스 보다 직관적으로 페이지를 호출할 수 있습니다. 가독성뿐만 아니라 개발에서의 실수도 줄일 수 있죠.

 

 

2. GoRouter 설정 추가하기

GoRouter 를 사용하기 위해 먼저 패키지를 설치합니다.

flutter pub add go_router

 

설치가 끝났다면 main.dart 파일을 수정해 보겠습니다.

// lib/main.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'components/bottom_navbar.dart';
import 'views/note_detail_view.dart';
import 'views/note_list_view.dart';
import 'views/settings_view.dart';
import 'enums.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(  // 수정한 부분
    initialLocation: '/noteDetail',
    routes: [
      ShellRoute(
        builder: (context, state, child) {
          return HomeScreen(child: child);
        },
        routes: [
          GoRoute(
            path: '/noteDetail',
            name: TabItem.noteDetail.name,
            builder: (context, state) => NoteDetailView(),
          ),
          GoRoute(
            path: '/noteList',
            name: TabItem.noteList.name,
            builder: (context, state) => NoteListView(),
          ),
          GoRoute(
            path: '/settings',
            name: TabItem.settings.name,
            builder: (context, state) => SettingsView(),
          ),
        ],
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(  // 수정한 부분
      routerConfig: _router,
      theme: ThemeData.dark(),
    );
  }
}

 

각 화면을 URL 경로와 연결해 주면 화면 간 이동을 관리할 수 있는데요. ShellRoute를 사용해 HomeScreen의 네비게이션을 관리하도록 구성했습니다.

 

이렇게 만든 _router 를 기존 MaterialApp에 주입하기 위해 MaterialApp.router로 변경하여 넣습니다.

 

 

 

3. BottomNavBar 수정 및 탭 전환 로직 구현

기존 currentIndex 를 이번에 새로 정의한 TabItem 이넘으로 수정하도록 BottomNavBar 를 수정합니다. 주석으로 표시한 `수정한 부분`을 참고해 주세요.

// lib/components/bottom_navbar.dart
import 'package:flutter/material.dart';
import 'package:ttingnote/enums.dart';

class BottomNavBar extends StatelessWidget {
  final TabItem currentTab;
  final ValueChanged<TabItem> onTabSelected;

  const BottomNavBar({  // 수정한 부분
    Key? key,
    required this.currentTab,
    required this.onTabSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: Colors.black,
      selectedItemColor: Colors.white,
      unselectedItemColor: Colors.grey,
      currentIndex: TabItem.values.indexOf(currentTab),  // 수정한 부분
      onTap: (index) {  // 수정한 부분
        onTabSelected(TabItem.values[index]);
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.create_outlined),
          label: '노트 쓰기',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.list_alt_outlined),
          label: '노트 조회',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings_outlined),
          label: '설정',
        ),
      ],
    );
  }
}

 

그리고 HomeScreen 에서는 탭이 선택될 때마다 GoRouter 를 통해 해당 경로로 이동하도록 설정하겠습니다.

// lib/main.dart - HomeScreen 클래스 수정
class HomeScreen extends StatefulWidget {
  final Widget child;

  const HomeScreen({Key? key, required this.child}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  TabItem _currentTab = TabItem.noteDetail;

  void _onTabSelected(TabItem tabItem) { // 수정한 부분
    setState(() {
      _currentTab = tabItem;

      switch (tabItem) {
        case TabItem.noteDetail:
          context.goNamed(TabItem.noteDetail.name);
          break;
        case TabItem.noteList:
          context.goNamed(TabItem.noteList.name);
          break;
        case TabItem.settings:
          context.goNamed(TabItem.settings.name);
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(  // 수정한 부분
      body: widget.child,
      bottomNavigationBar: BottomNavBar(
        currentTab: _currentTab,
        onTabSelected: _onTabSelected,
      ),
    );
  }
}

 

이렇게 TabItem 이넘과 GoRouter 를 사용하여 코드를 리팩터링 해보았습니다.

 

결과 화면은?

 

 

 

이전과 다르지 않습니다. 이번 수정은 코드를 리팩터링만 한 것이기 때문에 기능적으로는 바뀐 게 없어요. 다만, 리팩터링 한 후에는 기존처럼 잘 동작하는지 확인이 꼭 필요합니다.

 

여기서 리팩터링을 마칠 수도 있지만,,, 개인적으로 화면 전환이 아쉽더군요. 오른쪽에서 왼쪽으로 전환되는 슬라이드 효과가 아닌 페이드인아웃 효과로 화면 전환을 바꿔보겠습니다.

 

 

4. 화면 전환을 페이드 효과로 변경

앞서 GoRouter 를 정의한 main.dart 파일로 다시 돌아갑니다.

 

우리는 화면 전환을 페이드 효과로 변경할 것이므로 FadeTransition을 활용하겠습니다. 먼저 FadeTransition 를 리턴하는 _fadeTransition 함수를 만들겠습니다.

// lib/main.dart

// 페이드 전환 애니메이션 설정
static Widget _fadeTransition(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child) {
  return FadeTransition(
    opacity: animation,
    child: child,
  );
}

 

그리고 상단에 정의된 GoRouter 의 builder 파라미터를 pageBuilder 파라미터로 수정합니다. pageBuilder 를 사용하면 페이지 전환을 커스텀할 수 있습니다.

 

기존 코드:

           GoRoute(
             path: '/noteDetail',
             name: TabItem.noteDetail.name,
             builder: (context, state) => NoteDetailView())
           )

 

수정 코드:

           GoRoute(
             path: '/noteDetail',
             name: TabItem.noteDetail.name,
             pageBuilder: (context, state) => CustomTransitionPage(
               key: state.pageKey,
               child: NoteDetailView(),
               transitionDuration: const Duration(milliseconds: 200),
               transitionsBuilder: _fadeTransition,
             )
           )

 

나머지 /noteList 와 /settings 부분도 동일하게 수정해 줍니다.

 

 

코드를 수정했다면 이제 화면 전환이 바뀌었는지 확인합시다.

 

 

 

우리가 의도한 대로 슬라이드에서 페이드로 화면 전환이 바뀐 것을 볼 수 있습니다.

 

 

마무리

이번 글에서는 기존의 인덱스 기반 화면 전환을 Enum 과 GoRouter 를 사용해 리팩터링 하며 네비게이션 구조를 더 직관적이고 유지보수하기 쉽게 개선했습니다.

 

또한, 화면 전환 애니메이션을 슬라이드에서 페이드 효과로 변경해 보았습니다. 화면 전환 효과는 페이드 효과 외에도 다양하게 적용할 수 있으니 필요에 따라 커스텀하여 적용해 보시기 바랍니다.

 

 

[Flutter로 간단한 노트 앱을 만들어보자] 시리즈는 직접 독학으로 하나씩 만들어나가는 과정이므로 틀리거나 부족한 내용이 있을 수 있습니다. 조언과 피드백을 댓글로 남겨주시면 적극 반영하겠습니다. 감사합니다.