앱 내 네비게이션 화면 간 전환 및 라우터 사용법

이번 블로그 포스트에서는 Flutter 애플리케이션에서 화면 간 전환과 네비게이션을 처리하는 방법에 대해 깊이 있게 알아보겠습니다. 앱 내 네비게이션은 사용자가 다양한 화면을 탐색하고, 원하는 정보를 찾을 수 있도록 돕는 중요한 메커니즘입니다. 본 포스트는 기본적인 화면 전환 방법, Named Routes의 활용, 그리고 Navigator의 고급 사용법을 포함하여 실습을 통해 네비게이션을 체험할 수 있도록 구성하였습니다.

---

1. Flutter의 네비게이션과 화면 간 전환

Flutter에서는 Navigator 위젯을 통해 화면 간의 전환을 관리합니다. Navigator는 Flutter의 스택 구조를 이용하여 화면을 쌓고 관리합니다. 사용자가 어떤 화면을 요청하면, 해당 화면이 스택의 가장 위에 쌓여 사용자에게 표시되며, 이전 화면으로 돌아가고 싶을 때는 스택에서 제거됩니다.

1.1. 기본적인 화면 전환

기본 화면 전환은 Navigator의 push와 pop 메서드를 통해 이루어집니다. 예를 들어, 첫 번째 화면에서 두 번째 화면으로 이동하는 방법은 다음과 같습니다.

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

위의 코드에서는 새로운 페이지를 스택에 추가하여 사용자가 두 번째 화면으로 이동하게 됩니다. 두 번째 화면에서 돌아갈 때는 다음과 같이 pop 메서드를 사용합니다.

dart
Navigator.pop(context);

이 코드는 현재 화면을 스택에서 제거하여 이전 화면으로 돌아가게 합니다.

화면 전환 관련 테이블

메서드	설명
push	새로운 화면을 스택에 추가
pop	현재 화면을 스택에서 제거
pushNamed	이름으로 라우트를 호출하여 화면 전환
popAndPushNamed	현재 화면을 제거하고 이름으로 새로운 화면을 추가

1.2. 예제 코드

기본적인 화면 전환을 살펴보겠습니다. 다음은 Flutter 애플리케이션에서 두 개의 화면을 전환하는 코드입니다:

dart
import package:flutter/material.dart;

void main() {
runApp(NavigationApp());
}

class NavigationApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: FirstScreen(),
);
}
}

class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(첫 번째 화면),
),
body: Center(
child: ElevatedButton(
child: Text(두 번째 화면으로 이동),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(두 번째 화면),
),
body: Center(
child: ElevatedButton(
child: Text(첫 번째 화면으로 돌아가기),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}

위의 예제 코드는 첫 번째 화면에서 버튼을 클릭하면 두 번째 화면으로의 전환이 이루어지는 구조입니다.

---

2. Named Routes의 사용법

Named Routes를 활용하면 애플리케이션의 네비게이션을 더 구조적으로 관리할 수 있습니다. 모든 라우트를 한 곳에 정의하여 이름을 통해 화면 전환을 관리할 수 있습니다.

2.1. Named Routes 설정

Named Routes를 설정하기 위해 MaterialApp의 routes 속성에 모든 라우트를 정의합니다. 다음은 이런 방식으로 설정된 예제입니다:

dart
void main() {
runApp(NamedRouteApp());
}

class NamedRouteApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: /,
routes: {
/: (context) => HomeScreen(),
/second: (context) => SecondScreen(),
},
);
}
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(홈 화면),
),
body: Center(
child: ElevatedButton(
child: Text(두 번째 화면으로 이동),
onPressed: () {
Navigator.pushNamed(context, /second);
},
),
),
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(두 번째 화면),
),
body: Center(
child: ElevatedButton(
child: Text(홈 화면으로 돌아가기),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}

위 코드에서 named routes를 사용하여 라우트를 선언하고, 라우트를 통해 화면을 전환하는 방법을 보여줍니다.

Named Routes 관련 테이블

라우트 이름	설명
/	홈 화면
/second	두 번째 화면

2.2. Named Routes의 장점

Named Routes를 사용하는 장점은 다음과 같습니다:
– 가독성: 코드의 가독성이 좋아집니다.
– 유지보수성: 라우트를 쉽게 수정할 수 있습니다.
– 전역 관리: 모든 라우트를 한 곳에서 관리하므로 큰 규모의 애플리케이션에서 유용합니다.

---

3. 화면 간 데이터 전달

화면 간에 데이터를 전달하는 것은 매우 일반적인 요구사항입니다. Navigator의 push 메서드에 MaterialPageRoute의 settings 속성을 활용하여 데이터를 전달할 수 있습니다.

3.1. 데이터 전달 예제

다음은 화면 간에 데이터를 전달하는 예제입니다:

dart
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(첫 번째 화면),
),
body: Center(
child: ElevatedButton(
child: Text(두 번째 화면으로 데이터 전달),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(data: 안녕하세요!),
),
);
},
),
),
);
}
}

class SecondScreen extends StatelessWidget {
final String data;

SecondScreen({required this.data});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(두 번째 화면),
),
body: Center(
child: Text(data),
),
);
}
}

위 코드에서는 선택한 버튼 클릭 시 안녕하세요!라는 데이터를 두 번째 화면으로 전달하고 있습니다.

---

4. 실습: 간단한 네비게이션 앱 만들기

이제 간단한 네비게이션 앱을 만들어보겠습니다. 이 앱은 홈 화면, 설정 화면, 프로필 화면으로 구성됩니다.

4.1. 단계별 설명

1. 홈 화면: 사용자에게 기본적인 네비게이션 버튼을 제공합니다.
2. 설정 화면: 사용자는 이 화면을 통해 기본 설정을 변경할 수 있습니다.
3. 프로필 화면: 사용자는 자신의 프로필 정보를 확인할 수 있습니다.

4.2. 코드 예제

dart
import package:flutter/material.dart;

void main() {
runApp(SimpleNavApp());
}

class SimpleNavApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: /,
routes: {
/: (context) => HomeScreen(),
/settings: (context) => SettingsScreen(),
/profile: (context) => ProfileScreen(),
},
);
}
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(홈 화면),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text(설정 화면으로 이동),
onPressed: () {
Navigator.pushNamed(context, /settings);
},
),
ElevatedButton(
child: Text(프로필 화면으로 이동),
onPressed: () {
Navigator.pushNamed(context, /profile);
},
),
],
),
),
);
}
}

class SettingsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(설정 화면),
),
body: Center(
child: ElevatedButton(
child: Text(홈 화면으로 돌아가기),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}

class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(프로필 화면),
),
body: Center(
child: ElevatedButton(
child: Text(홈 화면으로 돌아가기),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}

---

결론

이번 포스트에서 우리는 Flutter 애플리케이션 내에서 화면 간 전환과 네비게이션을 처리하는 다양한 방법을 살펴보았습니다. 기본적인 화면 전환, Named Routes를 통한 구조적인 네비게이션, 데이터 전달 방법 등을 배웠습니다. 이러한 기법들은 애플리케이션의 사용성을 높이며, 사용자 경험을 개선하는 데 큰 도움이 됩니다. 시간 나실 때 간단한 예제를 통해 실습해 보시기 바랍니다. 다음 포스트에서는 Flutter의 상태 관리에 대해 다룰 예정입니다. 기대해 주세요!

---

자주 묻는 질문과 답변

질문1: 화면 전환 시 애니메이션을 추가할 수 있나요?
– A: Yes, PageRouteBuilder를 사용하여 커스텀 전환 애니메이션을 추가할 수 있습니다.

질문2: 네비게이션 스택을 초기화하고 특정 화면으로 이동할 수 있나요?
– A: Yes, Navigator.pushAndRemoveUntil 메서드를 사용하면 네비게이션 스택을 초기화하고 특정 화면으로 이동할 수 있습니다.

질문3: Navigator의 pop 메서드를 사용하면 데이터도 반환할 수 있나요?
– A: Yes, Navigator.pop(context, result)를 사용하여 데이터를 반환할 수 있습니다. 이 데이터는 Navigator.push의 Future에서 받아올 수 있습니다.

앱 내 네비게이션 전환 및 라우터 사용법: 완벽 가이드!

앱 내 네비게이션 전환 및 라우터 사용법: 완벽 가이드!

앱 내 네비게이션 전환 및 라우터 사용법: 완벽 가이드!