기본 페이지 탐색
Navigator를 사용해 경로를 푸시하고 팝하는 방법을 학습하여 Flutter 앱의 여러 화면 사이를 간단하게 전환합니다.
기본 페이지 탐색은(는) CoddyKit의 무료 Flutter Mobile Development 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Flutter Mobile Development 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
Navigating Your App
Think of a mobile app as a collection of pages or "screens." Navigation is how users move between these screens, like going from a product list to a product detail page.
- Apps need a clear way to move forward.
- Apps also need a way to go back.
- Flutter provides powerful tools for this.
Meet the Navigator
In Flutter, the Navigator widget manages a stack of Route objects. When you want to show a new screen, you "push" a route onto this stack. When you want to go back, you "pop" a route off the stack.
- It's like a stack of playing cards.
- New cards go on top (push).
- You remove cards from the top (pop).
Understanding Routes
A Route is an abstraction for a "screen" or "page" in your app. Flutter provides a common type of route called MaterialPageRoute, which creates a platform-specific transition animation (like sliding in from the right on Android).
It's the blueprint for how a new screen will look and behave when shown.
Moving Forward with push()
To navigate to a new screen, you use Navigator.push(). This method takes a BuildContext and a MaterialPageRoute as arguments.
The builder function inside MaterialPageRoute tells Flutter which widget to build for the new screen.
Try Pushing a Route
This example shows how to push a new screen when a button is pressed. Run it and tap the button!
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(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home Screen')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: const Text('Go to Second Screen'),
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Second Screen')),
body: const Center(
child: Text('You are on the second screen!'),
),
);
}
}What is BuildContext?
You might have noticed context being passed around. BuildContext is a handle to the location of a widget in the widget tree. It helps widgets locate other widgets or data higher up in the tree.
The Navigator uses this context to know which navigation stack to operate on.
Going Back with pop()
When you want to return to the previous screen, you "pop" the current route off the navigation stack using Navigator.pop(). This will reveal the screen that was underneath.
Flutter's AppBar often provides a back button automatically when a new route is pushed, which internally calls Navigator.pop().
Try Popping a Route
Let's modify our previous example to include a button on the second screen that allows us to explicitly go back to the home screen.
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(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home Screen')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: const Text('Go to Second Screen'),
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Second Screen')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context); // This will go back!
},
child: const Text('Go Back'),
),
),
);
}
}Visualizing the Stack
Imagine the Navigator maintains a stack of screens. When you push, a new screen is placed on top. When you pop, the top screen is removed.
The user always sees the topmost screen. This stack behavior is fundamental to how navigation works in Flutter.
- Push: Adds to top.
- Pop: Removes from top.
- First screen is at the bottom.
Navigation Check
Consider a Flutter app with two screens, ScreenA and ScreenB. If you are currently on ScreenA and want to move to ScreenB, then later return to ScreenA, which sequence of Navigator methods would you use?
Recap: Basic Navigation
Great job! You've learned the core concepts of basic navigation in Flutter:
- The
Navigatormanages a stack of routes. MaterialPageRoutedefines a new screen.Navigator.push()adds a new screen to the stack.Navigator.pop()removes the current screen from the stack.BuildContextis essential for navigation operations.
Next, we'll explore more advanced navigation techniques like named routes!
자주 묻는 질문
“기본 페이지 탐색” 강의는 무료인가요?
네 — “기본 페이지 탐색” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Flutter Mobile Development 강의 전체를 잠금 해제할 수 있습니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.
“기본 페이지 탐색”에서 뭘 배우나요?
Navigator를 사용해 경로를 푸시하고 팝하는 방법을 학습하여 Flutter 앱의 여러 화면 사이를 간단하게 전환합니다. 브라우저에서 직접 실행하는 실습 코드로 Flutter Mobile Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Flutter Mobile Development을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Flutter Mobile Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“기본 페이지 탐색” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Flutter Mobile Development 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Flutter Mobile Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.