페이지 이동

1. 주요 기능

• Navigator와 Route를 사용한 페이지 이동.

• 로그인 화면에서 홈 화면으로 이동 및 돌아가기 기능 구현.

2. 코드 구성

• MyApp 클래스
• 역할: 앱의 초기 설정 및 라우트 정의.
• initialRoute: 앱 시작 시 기본 라우트 지정 (/login).
• routes: 이름 기반으로 페이지 연결.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/login", // 기본 경로 설정
      routes: {
        "/login": (context) => LoginPage(), // 로그인 페이지 경로 설정
        "/home": (context) => HomePage(), // 홈 페이지 경로 설정
      },
    );
  }
}

• LoginPage 클래스
• 역할: 로그인 버튼을 통해 홈 화면으로 이동.
• 구성:
• Navigator.pushNamed: 이름 기반 라우트로 이동.
• Align: 중앙에 버튼 정렬.

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("LoginPage")), // 상단 앱바 설정
      body: Align(
        alignment: Alignment(0, 0), // 버튼을 화면 중앙에 배치
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, "/home"); // "/home" 페이지로 이동
          },
          child: Text("로그인"), // 버튼 텍스트
        ),
      ),
    );
  }
}

• HomePage 클래스
• 역할: 돌아가기 버튼으로 이전 화면으로 이동.
• 구성:
• Navigator.pop: 이전 화면으로 돌아가기.
• Align: 중앙에 버튼 정렬.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("HomePage")), // 상단 앱바 설정
      body: Align(
        alignment: Alignment(0, 0), // 버튼을 화면 중앙에 배치
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 이전 화면으로 돌아가기
          },
          child: Text("돌아가기"), // 버튼 텍스트
        ),
      ),
    );
  }
}

3. 실행 흐름

1. 앱 시작 → /login 라우트로 이동 → 로그인 페이지 표시.

2. "로그인" 버튼 클릭 → /home 라우트로 이동 → 홈 페이지 표시.

3. "돌아가기" 버튼 클릭 → 이전 라우트 /login으로 돌아감.

4. 주석 설명 요약

• Navigator.pushNamed: 이름으로 지정된 라우트로 이동.

• Navigator.pop: 이전 페이지로 돌아가기.

• Align: 위젯의 위치를 정렬하는 컨테이너.

• routes: 페이지 경로와 위젯 연결.

5. 전체 코드와 출력

1. 전체 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); // 앱의 진입점: MyApp 위젯 실행
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 초기 경로 설정: 앱 시작 시 "/login" 화면 표시
      initialRoute: "/login", 
      // 라우트 설정: 경로와 화면을 연결
      routes: {
        "/login": (context) => LoginPage(), // "/login" 경로에 LoginPage 연결
        "/home": (context) => HomePage(),   // "/home" 경로에 HomePage 연결
      },
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LoginPage"), // 상단 앱바 제목 설정
      ),
      body: Align(
        alignment: Alignment(0, 0), // 화면 중앙 정렬 (-1, -1: 좌측 상단, 1, 1: 우측 하단)
        child: ElevatedButton(
          onPressed: () {
            // "/home" 경로로 이동: HomePage 화면 표시
            Navigator.pushNamed(context, "/home"); 
            // 다른 방식: Navigator.push 사용
            // Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));
          },
          child: Text("로그인"), // 버튼 텍스트
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"), // 상단 앱바 제목 설정
      ),
      body: Align(
        alignment: Alignment(0, 0), // 화면 중앙 정렬
        child: ElevatedButton(
          onPressed: () {
            // 현재 화면을 종료하고 이전 화면으로 돌아가기
            Navigator.pop(context); 
          },
          child: Text("돌아가기"), // 버튼 텍스트
        ),
      ),
    );
  }
}

2. 출력 사진