Flutter
  • Flutter 모바일 앱 개발하기
  • Untitled
  • 설치
    • Flutter 설치
  • 프로젝트 개발
    • Dart
      • Dart Code Style
    • Untitled
    • 프로젝트 개발 순서
    • 신규 프로젝트 생성하기
    • Flutter 폴더 구조
    • pubspec 설정 및 패키지 설치
      • Json 직렬화 패키지
      • 모바일 앱 이름 설정 패키지
      • Package 수동 처리
      • 다국어 패키지 설정
      • Multi Provider 패키지
    • main.dart 기본 설정
      • Custom Route 정의하기
    • Stateful Widget 생성
    • 플랫폼별 퍼미션 설정
    • [참고] Flutter 페이지 디자인 하기
    • Github로 소스관리하기
    • Firebase 사용하기
  • 빌드
    • 모바일 앱 아이콘 만들기
    • 안드로이드 빌드(사내 배포용)
  • iOS 빌드 및 배포
    • Apple App Store Connect 앱 등록
    • Apple TestFlight 배포(사내 배포용)
  • 에디터 설정
    • Visual Studio Code 설정
      • Flutter Ui Guides
      • Korean Language Pack for Visual Studio Code
      • Material Icon Theme
Powered by GitBook
On this page
  • routes.dart 작성
  • MyApp MaterialApp Route 추가
  • 사용방법

Was this helpful?

  1. 프로젝트 개발
  2. main.dart 기본 설정

Custom Route 정의하기

앱 화면 전환(이동) 위한 Custom Route를 정의합니다.

routes.dart 작성

아래와 같이 route를 작성하고 관리합니다.

routes.dart
import 'package:flutter/material.dart';
import '페이지 경우';

const String #페이지#Route = "login";

class CustomRouter {
  static Route<dynamic> generatedRoute(RouteSettings settings) {
    switch (settings.name) {
      case #페이지#Route:
        return MaterialPageRoute(builder: (_) => #페이지#Page());
      
      # 페이지 이동 시 파라미터를 넘길 경우 
      case #페이지#Route:
        return MaterialPageRoute(
            builder: (_) => #페이지#Page(
                  pageType: settings.arguments,
                ));
    }
  }
}

lib Root 경로에 routes.dart파일을 생성하고 관리합니다.

routes.dart 예:

routes.dart
import 'package:flutter/material.dart';
import 'screens/login/login.dart';
import 'screens/home/home.dart';

class CustomRouter {
  static const String loginRoute = "login";
  static const String homeRoute = "home";

  static Route<dynamic> generatedRoute(RouteSettings settings) {
    switch (settings.name) {
      case loginRoute:
        return MaterialPageRoute(builder: (_) => LoginPage());
      case homeRoute:
        return MaterialPageRoute(builder: (_) => HomePage());
      case ReaderRoute:
        return MaterialPageRoute(
            builder: (_) => ReaderPage(
                  screenArguments: settings.arguments,
                ));
    }
  }
}

MyApp MaterialApp Route 추가

lib/main.dart
import 'routes.dart';

@override
Widget build(BuildContext context) {
    if (checkLogin) {
      initialRoute = homeRoute;
    } else {
      initialRoute = loginRoute;
    }
    return MaterialApp(
    .....
    .....
    onGenerateRoute: CustomRouter.generatedRoute,
    initialRoute: initialRoute, // loginRoute or homeRoute,
    );
}

사용방법

Flutter 스크 전환하기 :

// 위젯의 콜백
onPressed: () {
  // Named route를 사용하여 화면으로 전환합니다.
  Navigator.popAndPushNamed(context, homeRoute);
}

Flutter 이전 스크으로 돌아가기 :

onPressed: () {
  // 현재 route를 스택에서 제거함으로써 이 스크린으로 되돌아 갑니다.
  Navigator.pop(context);
}
Previousmain.dart 기본 설정NextStateful Widget 생성

Last updated 4 years ago

Was this helpful?