Flutter에서 버튼으로 화면 전환하는 법(다른 파일에 있는 화면으로 이동)

한 파일 안에서 화면 전환

한 파일 내에서 화면 전환하기

 

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를 사용하는 것입니다. 

1. Navigator를 활용한 페이지 이동
2. 커스텀 버튼 위젯으로 구성한 홈 화면 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로 탭 구성