[Flutter] Clone - 당근마켓2(Navigation)

이번에는 Navigation 관련 2가지 패키지에 대해서 알아보겠습니다.

Beamer, GetX 를 이용한 네비게이션에 대해서 알아보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

 

기본 화면 이동은 아래와 같습니다.

 

 

 

관련 패키지는 아래와 같습니다. 버전은 현재 최신 버전을 사용합니다.

 

get: ^4.6.5
beamer: ^1.5.0

 

 

./src/apple_app.dart

 

import 'package:apple_market3/src/middleware/check_auth.dart';
import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'router/locations.dart';

// beamer 관련
final _routerDelegate = BeamerDelegate(
  guards: [
    BeamGuard(
      // '/' 루트 페이지로 이동을 시도하기 전에 check 를 확인하고
      // check 의 리턴값이 ture 면 계속 진행(로트 페이지로 이동)
      // check 의 리턴값이 false 면 beamToNamed 으로 이동, '/auth'(AuthLocation) 으로 이동
      pathPatterns: ['/'],
      check: (context, location) {
        return true;
        // return context.watch<UserNotifier>().user != null;
      },
      beamToNamed: (origin, target) => '/auth',
    )
  ],
  locationBuilder: BeamerLocationBuilder(beamLocations: [
    HomeLocation(),
    AuthLocation(),// 이게 없으면 beamToNamed 이동시 오류 발생함
  ]),
);

class AppleApp extends StatelessWidget {
  const AppleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
// 여기에서 라우팅 방식을 설정함
    // getx 라우팅시 설정방법
    // return getRouter();
    // beamer 라우팅시 설정방법
    return beamRouter();
  }

  // getx 라우팅시 설정방법
  GetMaterialApp getRouter() {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Apple Market Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      getPages: getPages(),
    );
  }

  // beamer 라우팅시 설정방법
  MaterialApp beamRouter() {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      title: 'Apple Market Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      routeInformationParser: BeamerParser(),
      routerDelegate: _routerDelegate,
    );
  }
}

 

 

./src/router/locations.dart

 

import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../middleware/check_auth.dart';
import '../screens/auth_screen.dart';
import '../screens/home_screen.dart';

// GETx 관련
List<GetPage<dynamic>> getPages() {
  return [
    GetPage(
      name: '/',
      page: () => const HomeScreen(),
      middlewares: [CheckAuth()],
    ),
    GetPage(
      name: '/auth',
      page: () => const AuthScreen(),
      transition: Transition.fadeIn,
    ),
    // GetPage(name: '/user/:uid', pages: () => const UserInfoPage()),
  ];
}

// ********************** 이하는 Beamer 관련
const LOCATION_HOME = 'home';
const LOCATION_AUTH = 'auth';

class HomeLocation extends BeamLocation<BeamState> {
  @override
  List<BeamPage> buildPages(BuildContext context, BeamState state) {
    return [const BeamPage(key: ValueKey(LOCATION_HOME), child: HomeScreen())];
  }

  @override
  List<Pattern> get pathPatterns => ['/'];
}

class AuthLocation extends BeamLocation<BeamState> {
  @override
  List<BeamPage> buildPages(BuildContext context, BeamState state) {
    return [const BeamPage(key: ValueKey(LOCATION_AUTH), child: AuthScreen())];
  }

  @override
  List<Pattern> get pathPatterns => ['/auth'];
}

 

 

./src/middleware/check_auth.dart - return getRouter(); 으로 설정을 변경하면 check_auth.dart 로직이 적용된다

 

class AppleApp extends StatelessWidget {
  const AppleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
// 여기에서 라우팅 방식을 설정함
    // getx 라우팅시 설정방법
    return getRouter();
    // beamer 라우팅시 설정방법
    // return beamRouter();
  }

 

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

class CheckAuth extends GetMiddleware {
  @override
  int? get priority => 2;

  bool isAuthenticated = false;

  @override
  RouteSettings? redirect(String? route) {
    if (isAuthenticated == false) {
      return const RouteSettings(name: '/auth');
    }
    return null;
  }

}

 

./src/screens/auth_screen.dart

 

import 'package:flutter/material.dart';

class AuthScreen extends StatelessWidget {
  const AuthScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('AuthScreen ~~'),
      ),
    );
  }
}

 

 

./src/screens/home_screen.dart

 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Home Screen'),
      ),
      body: const Center(
        child: Text('HomeScreen'),
      ),
    );
  }
}