[Flutter] go_router - 1 : 프로젝트 적용

 

 

 

* 해당 글은 go_router 13.0.1 버전으로 설명되어 있습니다.

* 버전이 업데이트되면서 바뀌는 사항은 하단에 업데이트되어 있습니다.

 

 

 

https://pub.dev/packages/go_router

go_router | Flutter Package

 

flutter에서 라우팅 관리로 자주 쓰이는 패키지인 go_router를 적용해 보도록 하겠습니다.

 

 

 

1. 패키지 등록

 

pubspec.yaml 파일에 go_router 패키지를 등록시켜 줍니다.

 

 

 

2. router 파일 생성

 

 

router들을 관리하기 위해 router파일 생성해 줍니다. 저는 lib 하위에 router라는 이름으로 생성해 주었습니다. (자유)

 

 

 

 

3.  router 파일 작성

 

import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [],
);

 

router파일에 전역변수로 router라는 변수에 go_router 패키지에 있는 GoRouter 클래스를 넣어줍니다.

GoRouter 클래스는 필수 인자로 routes라는 인자를 필수로 받고 있습니다.  그리고 앞으로 go_router의 모든 라우팅 설정은 해당 GoRouter클래스 안에서 설정합니다.

 

 

routes는 리스트 타입이므로 빈 리스트로 초기화해 줍니다.

 

 

 

4. route  path 설정

 

3번에 사진을 보면 routes는 List <RouteBase> 타입을 받고 있습니다. 그렇다면 routes에는 RouteBase의 객체를 넣을 수 있습니다.

 

RouteBase클래스를 살펴보면 abstract(추상 클래스)라서 해당 클래스를 상속받은 GoRoute 클래스를 사용해서 routes에 넣을 수 있습니다.

 

 

 

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
    ),
  ],
);

 

해당 코드처럼 routes에 Goroute클래스 객체를 생성하여 넣어주는 모습입니다. GoRoute에 필수 인자로써 path를 받게 되어 있습니다.

 

 

해당 path는 위에 사진에 있는 jutole.tistory.com이라는 도메인 뒤에 붙은 /113이라는 path입니다. 위에 코드에서는 path를 ' / ' 이렇게 설정했습니다. 

 

jutole.tistory.com 도메인 뒤에  ' / ' 이 붙습니다. path를 ' / ' 으로 설정하면 앱을 처음 실행시키면 나오는 페이지로 설정이 가능합니다. 

 

 

 

5.  페이지 생성

 

class APage extends StatelessWidget {
  const APage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("A Page"),
      ),
    );
  }
}

 

간단하게 APage를 만들어 주고 기존에 설정하던 첫 페이지 방법 말고 go_rotuer를 이용하여 첫 페이지를 띄워보도록 하겠습니다.

 

 

(기존 첫 페이지 띄우던 방식 MyHomePage)

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'go_router',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            width: 50,
            height: 50,
            alignment: Alignment.center,
            color: Colors.orange,
            child: Text(
              "Jutole",
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

 

6. 첫 페이지 설정

 

4번 작업의 route path를 설정한 코드에서 GoRoute 클래스에 builder라는 인자를 하나 더 받을 수 있습니다.

 

 

해당 builder의 타입은 context와 state를 받아 Widegt을 반환해야 하는 Function입니다. state는 다음에 설명하겠습니다. 이런 게 있구나라고 넘어가주세요.

 

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) {
        return APage();
      },
    ),
  ],
);

 

이렇게 builder에 람다함수 구현으로 APage()를 return 시켜주면 path가 ' / '  면 첫 페이지로 설정된다고 했으니 앱을 실행시키면 APage가 나오게 됩니다.

 

 

7.   router 등록

 

아직까지는 앱이 실행돼도 동작을 하지 않을 것입니다. 마지막으로 만든 router를 등록시켜주어야 합니다.

 

(기존 앱 실행 코드)

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'go_router',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

 

 

(router 등록 코드)

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      title: 'go_router',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
    );
  }
}

 

기존 MaterialApp 생성자에서 MaterialApp.router 네임드 생성자로 바꾸어 줍니다. 이렇게 되면 기존에 home으로 첫 시작 페이지를 설정해 뒀던 home 설정이 불가능해집니다. home 대신 routerConfig에 3번에서 작업했던 전역변수인 router를 등록시켜 줍니다.

그리고 앱을 실행시키면 APage가 빌드될 것입니다.

 

 

이것을 기초로 다음 go_router글에서 계속해서 go_router의 수많은 기능들을 알아보겠습니다.