Flutter Navigation

Flutter 내비게이션

Flutter에서 내비게이션은 화면 간 전환을 관리하는 중요한 부분입니다. Flutter는 여러 가지 내비게이션 방법을 제공하며, 가장 기본적인 내비게이션 방법인 Navigator 클래스를 사용하는 방법과 더 복잡한 라우팅을 처리하기 위한 go_router 패키지를 사용하는 방법을 설명하겠습니다.

1. 기본 내비게이션

기본 내비게이션 설정

Flutter의 기본 내비게이션은 Navigator 클래스를 사용하여 구현됩니다. Navigator는 화면 스택을 관리하여 새로운 화면을 푸시하고, 기존 화면을 팝하는 기능을 제공합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home Page'),
        ),
      ),
    );
  }
}

이 예제에서 HomePage에서 SecondPage로 이동하고 다시 돌아오는 간단한 내비게이션을 구현했습니다.

2. Named Routes 사용

Named Routes를 사용하면 더 많은 화면을 다룰 때 관리하기 쉽습니다.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home Page'),
        ),
      ),
    );
  }
}

3. go_router 패키지 사용

더 복잡한 내비게이션을 다루기 위해 go_router 패키지를 사용할 수 있습니다. 이 패키지는 선언적 내비게이션을 지원하며, URL 기반 라우팅을 더 쉽게 관리할 수 있습니다.

pubspec.yaml에 go_router 추가

dependencies:
  flutter:
    sdk: flutter
  go_router: ^4.1.0

main.dart에서 go_router 사용

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

void main() => runApp(MyApp());

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/second',
      builder: (context, state) => SecondPage(),
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.pop();
          },
          child: Text('Back to Home Page'),
        ),
      ),
    );
  }
}

요약

1. 기본 내비게이션: Navigator 클래스를 사용하여 화면 간 전환을 관리합니다.
2. Named Routes: MaterialApp의 routes 속성을 사용하여 라우트를 정의하고 이름으로 화면을 전환합니다.
3. go_router 패키지 사용: 더 복잡한 내비게이션 시나리오를 다루기 위해 go_router 패키지를 사용하여 선언적 내비게이션을 구현합니다.

이렇게 하면 Flutter 애플리케이션에서 다양한 내비게이션 패턴을 쉽게 구현할 수 있습니다.