flutter NestedRoute 뭐야

NestedRoute는 Flutter에서 라우트(route)를 중첩(nested)하여 사용하는 방식을 말합니다. 이는 앱 내에서 독립적인 라우트 구조를 구성할 때 유용하며, 주로 복잡한 앱 내비게이션 구조를 관리하기 위해 사용됩니다.

GoRouter는 Flutter에서 사용되는 라우팅 라이브러리 중 하나로, 강력한 기능과 쉬운 사용법으로 인기가 높아졌습니다. 여기에서는 GoRouter를 이용하여 Flutter에서 Nested Route를 구현하는 방법에 대해 설명하겠습니다.

필요한 패키지를 추가하세요.
pubspec.yaml 파일에서 다음과 같이 go_router 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  go_router: ^2.4.2

모델 및 페이지를 생성하세요.
간단한 예제를 위해 두 개의 페이지를 생성합니다. Home 페이지는 메인 화면이며, Details 페이지는 내부 페이지입니다.

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('Welcome to the Home Page')),
    );
  }
}

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

class DetailsPage extends StatelessWidget {
  final String id;

  const DetailsPage({required this.id, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(child: Text('Details for item $id')),
    );
  }
}

GoRouter를 설정하세요.
GoRouter를 사용하여 Nested Route를 구성하려면 GoRoute 객체를 정의하고 초기화해야 합니다.

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

void main() {
  final goRouter = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        pageBuilder: (context, state) {
          return MaterialPage(child: HomePage());
        },
        children: [
          GoRoute(
            path: 'details/:id',
            pageBuilder: (context, state) {
              final id = state.params['id'];
              return MaterialPage(child: DetailsPage(id: id));
            },
          ),
        ],
      ),
    ],
  );

  runApp(MyApp(goRouter: goRouter));
}

class MyApp extends StatelessWidget {
  final GoRouter goRouter;

  MyApp({required this.goRouter});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: goRouter.routerDelegate,
      routeInformationParser: goRouter.routeInformationParser,
    );
  }
}

위의 예제에서는 루트 경로(/)에 HomePage를 할당하고, DetailsPage를 자식 라우트로 설정하여 중첩 라우팅 구조를 만들었습니다. 이렇게 하면 HomePage의 내부에서 DetailsPage로 이동할 수 있게 됩니다.

페이지 간 이동
HomePage에서 DetailsPage로 이동하기 위해 다음과 같이 GoRouter를 사용하여 이동을 처리할 수 있습니다.

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  final goRouter = GoRouter.of(context);
  return Scaffold(
  appBar: AppBar(title: const Text('Home')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Welcome to the Home Page'),
        ElevatedButton(
          onPressed: () {
            goRouter.go('/details/1');
          },
          child: const Text('Go to Details Page'),
        ),
      ],
    ),
  ),
);
}
}

위의 코드에서는 ElevatedButton 위젯을 추가하여 사용자가 버튼을 클릭하면 DetailsPage로 이동하도록 했습니다. goRouter.go 메소드를 사용하여 라우팅 경로를 전달하고 이동을 처리했습니다.

이제 앱을 실행하면 HomePage에 버튼이 표시되고, 해당 버튼을 클릭하면 DetailsPage로 이동합니다. 이 방법으로 GoRouter를 사용하여 Flutter에서 Nested Route를 구현할 수 있습니다. 이제 여러 레벨의 중첩된 라우트를 추가하거나 필요한 매개 변수를 전달하여 라우팅 구조를 더욱 강화할 수 있습니다.