[Flutter] 입문 - 화면 전환(Navigation)

목표

• Navifator를 통한 화면 전환 이해하기
• MaterialPageRoute 사용법
• Named Route 설정 및 사용
• 화면 간 데이터 전달

---

📱 Flutter에서 화면 전환이란?

Flutter 앱은 여러 개의 "화면(Screen)" 혹은 "페이지(Page)"를 가질 수 있다. 이를 Flutter에서는 Route(경로)라고 부르며, 화면 간 이동은 Navigator 클래스를 통해 처리한다.

---

Navigator 기본 사용법

화면 이동 (push)

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

화면 돌아가기 (pop)

Navigator.pop(context);

---

Named Route 설정

많은 페이지가 생기면 라우트 이름으로 페이지를 구분하는 것이 편리하다.

1. main.dart에서 라우트 등록

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/second': (context) => SecondPage(),
    },
  ));
}

2. 화면 이동

Navigator.pushNamed(context, '/second');

3. 돌아오기

Navigator.pop(context);

---

화면 간 데이터 전달

전달 (push 할 때)

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(message: 'Hello from first!'),
  ),
);

받기 (SecondPage)

class SecondPage extends StatelessWidget {
  final String message;

  const SecondPage({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }
}

---

요약

 

• Flutter에서 페이지 전환은 Navigator로 처리한다.
• MaterialPageRoute로 직접 이동하거나, routes를 등록해서 이름 기반 이동도 가능하다.
• 화면 간에 데이터를 주고받을 수 있으며, 앱 구조가 복잡해질수록 명확한 라우팅 전략이 필요하다.