[flutter] 플러터(Flutter)에서 네비게이션(Navigation) 기능 구현하기

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 매우 강력하고 직관적인 UI 개발 환경을 제공합니다. 이번 예시에서는 플러터에서 네비게이션(Navigation) 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 네비게이션 관리 클래스 생성

먼저, 네비게이션을 관리하기 위해 별도의 클래스를 생성해야 합니다. 이 클래스에서는 페이지 전환과 관련된 로직을 구현하게 됩니다.

import 'package:flutter/material.dart';

class NavigationService {
  static final NavigationService _instance = NavigationService._internal();
  factory NavigationService() => _instance;

  NavigationService._internal();

  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  // 이전 페이지로 돌아가는 메서드
  void goBack() {
    navigatorKey.currentState.pop();
  }

  // 새로운 페이지로 이동하는 메서드
  void navigateTo(Widget page) {
    navigatorKey.currentState.push(
      MaterialPageRoute(builder: (_) => page),
    );
  }

  // 모든 이전 페이지를 제거하고 새로운 페이지로 이동하는 메서드
  void navigateToAndRemoveUntil(Widget page) {
    navigatorKey.currentState.pushAndRemoveUntil(
      MaterialPageRoute(builder: (_) => page), 
      (route) => false,
    );
  }
}

위의 코드에서는 NavigationService 클래스를 생성하여 네비게이션 관련 기능을 구현하고 있습니다. navigatorKeyGlobalKey를 사용하여 현재의 네비게이터 상태를 추적하는 데 사용됩니다. goBack() 메서드는 이전 페이지로 이동하는 함수로, navigateTo() 메서드는 새로운 페이지로 이동하는 함수입니다. navigateToAndRemoveUntil() 메서드는 모든 이전 페이지를 제거하고 새로운 페이지로 이동하는 함수입니다.

2. 네비게이션을 사용할 페이지에서 인스턴스 생성

이제 네비게이션을 사용할 페이지에서 NavigationService 클래스의 인스턴스를 생성해야 합니다. 이를 위해 우선 main.dart 파일에서 MaterialApp 위젯의 navigatorKey 프로퍼티에 NavigationService().navigatorKey를 할당합니다.

import 'package:flutter/material.dart';
import 'navigation_service.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: NavigationService().navigatorKey, // 네비게이션 관리 클래스의 navigatorKey 할당
      home: HomePage(),
    );
  }
}

main.dart 파일에서 MaterialApp 위젯을 생성할 때 navigatorKey 프로퍼티에 NavigationService().navigatorKey를 할당하면 앱 전체에서 해당 네비게이션 관리 클래스의 인스턴스를 공유할 수 있습니다.

이제 네비게이션을 사용할 페이지에서 NavigationService 클래스의 인스턴스를 생성하고 원하는 곳에서 사용하면 됩니다.

import 'package:flutter/material.dart';
import 'navigation_service.dart';

class HomePage extends StatelessWidget {
  final navigationService = NavigationService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Detail Page'),
          onPressed: () {
            navigationService.navigateTo(DetailPage()); // 새로운 페이지로 이동
          },
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final navigationService = NavigationService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go Back'),
          onPressed: () {
            navigationService.goBack(); // 이전 페이지로 이동
          },
        ),
      ),
    );
  }
}

위의 코드에서는 HomePageDetailPage라는 두 개의 페이지를 생성하고 있습니다. HomePage에서는 버튼을 클릭하면 DetailPage로 이동하고, DetailPage에서는 버튼을 클릭하면 이전 페이지로 이동합니다. 이렇게 생성한 페이지에서는 NavigationService 클래스를 인스턴스화하여 원하는 네비게이션 기능을 호출할 수 있습니다.

3. 네비게이션 기능 사용 예시

위에서 생성한 HomePage에서 DetailPage로 이동하는 예시를 보겠습니다.

class HomePage extends StatelessWidget {
  final navigationService = NavigationService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Detail Page'),
          onPressed: () {
            navigationService.navigateTo(DetailPage()); // 새로운 페이지로 이동
          },
        ),
      ),
    );
  }
}

버튼을 클릭하면 navigationService.navigateTo() 메서드를 호출하여 DetailPage로 이동합니다.

이와같이 플러터(Flutter)에서 네비게이션(Navigation) 기능을 구현하는 방법에 대해 알아보았습니다. 새로운 페이지로 이동하거나 이전 페이지로 돌아갈 때 NavigationService 클래스를 활용하면 효율적인 네비게이션 기능을 구현할 수 있습니다.


참고 문서: