flutter에서 auto_route로 라우팅을 간편하게 구현

auto_route

auto_route는 Flutter에서 route 내용의 코드를 자동으로 생성해주는 라이브러리입니다. auto_route는 라우트 관리를 단순화시켜주고, 코드의 반복을 줄여주기 때문에 유지 보수 측면에서 용이합니다.

 

의존성 추가

필요한 의존성을 추가합니다.

flutter pub add auto_route
flutter pub add --dev auto_route_generator build_runner

 

auto_route_generator와 build_runner는 라우팅 관련 코드를 생성하기 위해 필요합니다.

 

구현

screen 파일 생성

화면에 띄울 HomeScreen와 FirstScreen 파일을 생성합니다.

// home_screen.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_auto_route/route/app_router.dart';

@RoutePage() // 어노테이션 추가
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final router = AutoRouter.of(context);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text(
          "Auto route 예제",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("home screen"),
              ElevatedButton(
                onPressed: () {
                  router.push(const FirstRoute());
                },
                child: const Text("Go to first screen"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

// first_screen.dart

import "package:auto_route/annotations.dart";
import "package:flutter/material.dart";

@RoutePage()
class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text(
          "First Screen",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: const SafeArea(
        child: Text("first screen"),
      ),
    );
  }
}

 

router 파일 생성

이후 app_router.dart 파일을 생성하고 아래와 같이 코드를 작성합니다.

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import "package:flutter_auto_route/screens/first/first_screen.dart";

part 'app_router.gr.dart'; // 코드 제너레이터에 의해 생성될 파일

@AutoRouterConfig()
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(page: HomeRoute.page, initial: true),
      ];
}

 

작성하고 나면, 오류가 발생합니다. 아직 auto_route_generator와 build_runner로 코드를 생성하지 않아서, 발생하는 오류입니다.

 

코드 생성

아래 명령어를 통해 app_router.gr.dart 코드를 생성합니다.

dart run build_runner watch --delete-conflicting-outputs

app_router.gr.dart 생성 완료

 

코드 내부를 살펴보면, HomeRoute와 FirstRoute 클래스가 생성된 것을 볼 수 있습니다.

생성된 코드

 

FirstScreen으로 라우팅 테스트

아래와 같이 main.dart를 수정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_auto_route/route/app_router.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final appRouter = AppRouter();

    return MaterialApp.router(
      title: 'Auto route 예제',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: appRouter.config(), // 라우팅 정보를 routerConfig에 넘겨줌 
    );
  }
}

 

그리고, 앱을 실행해보면 버튼 클릭시 라우팅이 잘 되는것을 확인 할 수 있습니다.

라우팅

 

Argument와 함께 라우팅

이번엔 인자와 함께 라우팅되는 테스트를 위해 second_screen.dart 파일을 생성합니다. 인자는  num을 생성자 함수에 추가하였습니다.

// second_screen.dart

import 'package:auto_route/annotations.dart';
import 'package:flutter/material.dart';

@RoutePage()
class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key, required this.num});

  final int num;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text(
          "Second Screen",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: SafeArea(
        child: Text("second screen $num"),
      ),
    );
  }
}

 

그리고, 다시 코드를 생성합니다.

dart run build_runner build --delete-conflicting-outputs

 

HomeScreen 파일에 버튼을 하나 더 추가합니다. 버튼에 onPressed 이벤트에는 SecondRoute()에 num 이라는 인자로 1을 넘깁니다.

ElevatedButton(
    onPressed: () {
      router.push(SecondRoute(num: 1));
    },
    child: const Text("Go to second screen"),
)

 

그리고, 앱을 실행하면 아래와 같이 1이라는 값이 같이 넘어가면서 라우팅이 되는것을 볼 수 있습니다.

 

참고

코드를 매번 생성하는 명령어를 수행하기 번거롭기 때문에 watch 옵션을 이용해서 자동으로 코드가 생성되도록 할 수 있습니다.

dart run build_runner build --delete-conflicting-outputs

 

명령어가 길기 때문에 명령어를 까먹으면 다시 찾아봐야하는 번거로움이 있습니다. 이때 rps와 같이 사용하면 편리합니다.

# pubspec.yaml

...

scripts:
  run:
    $before: flutter pub get
    $script: flutter run
  gen:
    build: dart run build_runner build --delete-conflicting-outputs
    watch: dart run build_runner watch --delete-conflicting-outputs

 

rps 관련된 내용은 아래 글을 참고해주세요.

RPS를 활용하여 pubspec.yaml에서 scripts 정의하고 사용하기

 

Reference

auto_route | Flutter package