[flutter] GoRouter에서 routes를 사용한 샘플 코드로 설명

• 코드 실행 도구: DartPad
• DartPad 버전: Based on Flutter 3.7.10 Dart SDK 2.19.6

 

---

https://dartpad.dev/?

DartPad

---

Flutter의 GoRouter는 앱 라우팅을 처리하는 패키지입니다. GoRouter를 사용하면 앱 내에서 경로를 처리하고, 해당 경로에 대한 적절한 화면을 표시할 수 있습니다. 이때, GoRouter의 핵심 구성 요소는 routes입니다. routes는 경로와 화면을 연결하는 구성 요소로, 각 경로와 연결된 화면을 지정하여 구성합니다.

아래는 GoRouter 내 routes를 구성하는 방법에 대한 간단한 예제 코드입니다. 이 예제에서는 routes 내에 두 개의 경로와 해당 경로에 대한 화면을 정의합니다.

 

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

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

class MyApp extends StatelessWidget {
  final router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomePage(),
      ),
      GoRoute(
        path: '/detail',
        builder: (context, state) => DetailPage(),
      ),
    ],
  );

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Go to Detail'),
          onPressed: () => GoRouter.of(context).push('/detail'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Detail'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Go back to Home'),
          onPressed: () => GoRouter.of(context).pop(),
        ),
      ),
    );
  }
}

 

위의 코드에서, routes는 GoRouter 클래스의 생성자에서 정의됩니다. GoRoute 클래스는 각 경로에 대한 정보를 저장하는 클래스이며, path와 pageBuilder 두 개의 속성을 가집니다. path는 경로를 나타내는 문자열이며, pageBuilder는 해당 경로에 대한 화면을 생성하는 함수입니다.

이 예제에서는 "/" 경로에 대해 HomePage를, "/detail" 경로에 대해 DetailPage를 지정합니다. HomePage와 DetailPage는 StatelessWidget으로 구현되어 있으며, 각각 해당 경로에서 표시될 화면을 정의합니다. 또한, RaisedButton을 클릭하면 GoRouter의 push() 함수를 사용하여 다른 경로로 이동할 수 있습니다. 예를 들어, HomePage에서는 "/detail" 경로로 이동하는 버튼을, DetailPage에서는 다시 "/" 경로로 이동하는 버튼을 생성합니다.

위의 예제 코드를 실행하면 "/" 경로에서는 HomePage가 표시되며, "/detail" 경로로 이동하면 DetailPage가 표시됩니다. HomePage로 다시 돌아갈때는 pop()로 네비케이션에 등록했던 현재 화면인 DetailPage를 제거해서 HomePage로 이동합니다.