flutter & dart - 화면 이동을 위한 Routes

 

Overview. 

이번에는 화면 이동을 위한 Routes 한마디로 네비게이터 경로 사용법을 알아봅시다.

1. 화명 이동을 위한 Routes 이란?
2. 명명된 네비게이터 이동 방식

 

1. 화면 이동을 위한 Routes 이란

모바일 앱은 종종 많은 수의 경로를 관리하며 이때 이름으로 참조하는 것이 가장 쉽습니다. 규칙에 따라 경로이름은 경로와 유사한 구조 (예 : '/a , /b , /c ')를 사용합니다. 이렇게 이름을 만들어서 routing 하는 방식을 명명된 네비게이터  경로 사용법이라고 합니다.

Routes 사용법

 

1. 명명된 네비게이터 이동 방식
2. 단순 객체를 이동하는 방식
3. 라이브러리 사용하는 방식

방식이 있습니다.

2. 명명된 네비게이터 경로 방식

import 'package:class_login_app/pages/home_page.dart';
import 'package:class_login_app/pages/login_page.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 초기 경로 지정
      initialRoute: '/login',
      // routes : {} 는 Map 구조이다.
      // '/login' : key
      // () => {} : 익명함수가 들어가야 한다. (익명함수는 {}와 return 등 생략이 가능하다
      routes: {
        '/login': (context) => LoginPage(),
        '/home': (context) => HomePage(),
      },
    );
  }
}

 

3. 명명된 네비게이터 사용법

Navigator.pushNamed(context, "/home");