Flutter + Dart/Flutter + Dart 공부
Flutter에서 버튼으로 화면 전환하는 법(다른 파일에 있는 화면으로 이동)
GREEN나무
2025. 5. 12. 18:03
728x90
한 파일 내에서 화면 전환하기
📱 Flutter 한 파일 내 화면 전환 방법 (NavigationRail 활용)✅ 1. 화면 전환이란?앱에는 여러 화면이 있습니다. 예를 들어:🏠 Home 화면 (단어 생성기)❤️ Favorites 화면 (즐겨찾기 목록)이 두 화면을 버
ashen99.tistory.com
lib/
├── main.dart
└── screens/
├── home.dart
├── 1p.dart
└── 2p.dart
1p.dart
0.00MB
2p.dart
0.00MB
home.dart
0.00MB
main.dart
0.00MB
https://youtube.com/shorts/TaL5q2-lyF4?feature=share
🎯 Flutter에서 버튼으로 화면 전환하는 법 – 초보자용 정리
Flutter에서 화면을 이동하는 가장 기본적인 방법은 Navigator를 사용하는 것입니다.
- Navigator를 활용한 페이지 이동
- 커스텀 버튼 위젯으로 구성한 홈 화면 UI
✅ 1. Navigator로 페이지 이동하기
Flutter에서 다른 페이지로 이동하려면 Navigator.push() 또는 Navigator.pushNamed()를 사용합니다.
📌 방법 1: 직접 라우트를 생성해서 이동
Navigator.push(
context,
MaterialPageRoute(builder: (context) => TargetScreen()),
);
📌 방법 2: 라우트 이름을 등록해서 이동 (권장)
Navigator.pushNamed(context, '/target');
이 방법을 사용하려면 MaterialApp에 라우트를 등록해야 합니다.
🛠️ 2. 실전 예제 프로젝트 구조
📁 main.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';
import 'screens/diary_screen.dart';
import 'screens/schedule_screen.dart';
import 'screens/todo_screen.dart';
import 'screens/settings_screen.dart';
void main() => runApp(DiaryApp());
class DiaryApp extends StatelessWidget {
const DiaryApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fly Diary App',
theme: ThemeData(primarySwatch: Colors.teal),
routes: {
'/home': (context) => HomeScreen(),
'/diary': (context) => WriteDiaryScreen(),
'/schedule': (context) => ScheduleScreen(),
'/todo': (context) => TodoScreen(),
'/settings': (context) => SettingsScreen(),
},
initialRoute: '/home',
debugShowCheckedModeBanner: false,
);
}
}
🏠 홈 화면 (home_screen.dart)
버튼을 쉽게 재사용할 수 있도록 _buildFeatureButton() 위젯으로 정리합니다.
class HomeScreen extends StatelessWidget {
Widget _buildFeatureButton({
required BuildContext context,
required IconData icon,
required Color color,
required VoidCallback onPressed,
required String label,
}) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
backgroundColor: color,
radius: 30,
child: IconButton(
icon: Icon(icon, color: Colors.white),
onPressed: onPressed,
),
),
const SizedBox(height: 8),
Text(label),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('홈 화면')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildFeatureButton(
context: context,
icon: Icons.edit,
color: Colors.teal,
onPressed: () => Navigator.pushNamed(context, '/diary'),
label: '일기',
),
_buildFeatureButton(
context: context,
icon: Icons.schedule,
color: Colors.blueGrey,
onPressed: () => Navigator.pushNamed(context, '/schedule'),
label: '일정',
),
],
),
),
);
}
}
📄 이동 대상 페이지 예시
각 페이지는 아래와 같이 간단하게 구성할 수 있습니다.
📝 diary_screen.dart
class WriteDiaryScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('일기')),
body: Center(child: Text('이곳은 일기 작성 페이지입니다.')),
);
}
}
📅 schedule_screen.dart
class ScheduleScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('일정')),
body: Center(child: Text('이곳은 일정 페이지입니다.')),
);
}
}
🔁 다른 페이지에서 홈으로 돌아가기
화면 좌측 상단에 홈 버튼을 만들어 홈으로 이동할 수 있습니다.
leading: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: IconButton(
icon: Icon(Icons.home),
onPressed: () => Navigator.pushNamed(context, '/home'),
),
),
📌 정리
항목 | 설명 |
Navigator.push | 새 페이지로 이동할 때 사용 |
MaterialPageRoute | 직접 라우트를 정의할 때 사용 |
Navigator.pushNamed | 등록된 이름으로 화면 이동 |
CircleAvatar + IconButton | 깔끔한 둥근 버튼 UI 구성 가능 |
StatelessWidget | 단순 화면 구성에 적합 |
🚀 다음에 해보기
- 버튼을 Grid 형태로 배치
- 전환 시 애니메이션 효과 추가
- 하단 BottomNavigationBar로 탭 구성