Flutter 튜토리얼 17편: 화면 전환과 데이터 전달

요약#

핵심 요지#

문제 정의: 앱에서 여러 화면 간 이동과 데이터 교환이 필요하다.
핵심 주장: Flutter의 Navigator¹와 Route²로 화면 전환을 관리한다.
주요 근거: push()로 새 화면을 열고, pop()으로 이전 화면으로 돌아가며 데이터를 전달한다.
실무 기준: 생성자 인자로 데이터를 전달하는 것이 가장 명확하고 타입 안전하다.
한계: 복잡한 네비게이션은 go_router 같은 패키지 사용을 권장한다.

문서가 설명하는 범위#

Navigator와 Route 기본 개념
화면 전환: push, pop, pushReplacement
새 화면으로 데이터 전달
이전 화면으로 결과 반환
명명된 라우트 (Named Routes)

읽는 시간: 15분 | 난이도: 초급

참고 자료#

Navigate to a new screen and back - 기본 네비게이션
Pass arguments to a named route - 데이터 전달
Return data from a screen - 결과 반환

문제 상황#

대부분의 앱은 여러 화면으로 구성됩니다. 목록 화면에서 상세 화면으로 이동하고, 편집 화면에서 결과를 반환해야 합니다.

일반적인 네비게이션 패턴#

1
목록 화면 → 상세 화면 → 편집 화면
2
    ↑_________↓__________↓ (뒤로가기)

문제는 다음과 같습니다.

화면 간 전환 애니메이션을 처리해야 한다.
새 화면에 필요한 데이터를 전달해야 한다.
편집 결과를 이전 화면으로 반환해야 한다.
화면 스택을 적절히 관리해야 한다.

해결 방법#

Flutter는 Navigator 위젯으로 화면 스택을 관리하고, Route로 각 화면을 표현합니다.

챕터 1: 기본 네비게이션#

Why#

NOTE
Flutter에서 화면(페이지)은 Route라고 불립니다.
Android의 Activity, iOS의 ViewController와 같은 개념이지만, Flutter에서는 그냥 위젯입니다.
1
Route = 화면 = 위젯
2
Navigator = 화면 스택 관리자

What#

NOTE
Navigator는 스택 구조로 화면을 관리합니다.
push()로 새 화면을 스택에 추가하고, pop()으로 현재 화면을 제거합니다.
graph LR A[화면 A] -->|push| B[화면 B] B -->|pop| A

How#

TIP

기본 push/pop 사용

1
import 'package:flutter/material.dart';
2

3
class FirstScreen extends StatelessWidget {
4
  const FirstScreen({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return Scaffold(
9
      appBar: AppBar(title: const Text('첫 번째 화면')),
10
      body: Center(
11
        child: ElevatedButton(
12
          onPressed: () {
13
            // 새 화면으로 이동
14
            Navigator.push(
15
              context,
16
              MaterialPageRoute(builder: (context) => const SecondScreen()),
17
            );
18
          },
19
          child: const Text('두 번째 화면으로'),
20
        ),
21
      ),
22
    );
23
  }
24
}
25

26
class SecondScreen extends StatelessWidget {
27
  const SecondScreen({super.key});
28

29
  @override
30
  Widget build(BuildContext context) {
31
    return Scaffold(
32
      appBar: AppBar(title: const Text('두 번째 화면')),
33
      body: Center(
34
        child: ElevatedButton(
35
          onPressed: () {
36
            // 이전 화면으로 돌아가기
37
            Navigator.pop(context);
38
          },
39
          child: const Text('돌아가기'),
40
        ),
41
      ),
42
    );
43
  }
44
}
45

46
void main() {
47
  runApp(const MaterialApp(
48
    title: 'Navigation Demo',
49
    home: FirstScreen(),
50
  ));
51
}

플랫폼별 페이지 전환

Route 타입	플랫폼	전환 애니메이션
`MaterialPageRoute`	Android	슬라이드 + 페이드
`CupertinoPageRoute`	iOS	오른쪽에서 슬라이드

Watch out#

WARNING
pop()을 호출할 때 스택에 화면이 하나뿐이면 앱이 종료될 수 있습니다.
Navigator.canPop(context)로 먼저 확인하세요.
1
// 안전한 pop
2
if (Navigator.canPop(context)) {
3
  Navigator.pop(context);
4
} else {
5
  // 스택에 화면이 하나뿐임
6
  // 앱 종료 확인 대화상자 표시 등
7
}

결론: Navigator.push()로 화면을 열고, Navigator.pop()으로 돌아갑니다.

챕터 2: 새 화면으로 데이터 전달#

Why#

NOTE
상세 화면을 열 때 어떤 항목의 상세 정보인지 알려줘야 합니다.
생성자를 통해 데이터를 전달하는 것이 가장 명확합니다.
1
목록 화면 → (Todo 객체) → 상세 화면

What#

NOTE
새 화면의 생성자에 필요한 데이터를 파라미터로 전달합니다.
required 키워드로 필수 데이터임을 명시할 수 있습니다.

How#

TIP

생성자로 데이터 전달 (권장)

1
// 데이터 모델
2
class Todo {
3
  final String id;
4
  final String title;
5
  final String description;
6
  final bool isCompleted;
7

8
  const Todo({
9
    required this.id,
10
    required this.title,
11
    required this.description,
12
    this.isCompleted = false,
13
  });
14
}
15

16
// 목록 화면
17
class TodoListScreen extends StatelessWidget {
18
  const TodoListScreen({super.key});
19

20
  final List<Todo> todos = const [
21
    Todo(id: '1', title: '장보기', description: '우유, 빵, 계란 구매'),
22
    Todo(id: '2', title: '운동하기', description: '30분 조깅'),
23
    Todo(id: '3', title: '공부하기', description: 'Flutter 튜토리얼 완독'),
24
  ];
25

26
  @override
27
  Widget build(BuildContext context) {
28
    return Scaffold(
29
      appBar: AppBar(title: const Text('할 일 목록')),
30
      body: ListView.builder(
31
        itemCount: todos.length,
32
        itemBuilder: (context, index) {
33
          final todo = todos[index];
34
          return ListTile(
35
            title: Text(todo.title),
36
            subtitle: Text(todo.description),
37
            onTap: () {
38
              // 데이터를 생성자로 전달
39
              Navigator.push(
40
                context,
41
                MaterialPageRoute(
42
                  builder: (context) => TodoDetailScreen(todo: todo),
43
                ),
44
              );
45
            },
46
          );
47
        },
48
      ),
49
    );
50
  }
51
}
52

53
// 상세 화면
54
class TodoDetailScreen extends StatelessWidget {
55
  const TodoDetailScreen({super.key, required this.todo});
56

57
  final Todo todo;
58

59
  @override
60
  Widget build(BuildContext context) {
61
    return Scaffold(
62
      appBar: AppBar(title: Text(todo.title)),
63
      body: Padding(
64
        padding: const EdgeInsets.all(16.0),
65
        child: Column(
66
          crossAxisAlignment: CrossAxisAlignment.start,
67
          children: [
68
            Text(
69
              '설명',
70
              style: Theme.of(context).textTheme.titleMedium,
71
            ),
72
            const SizedBox(height: 8),
73
            Text(todo.description),
74
            const SizedBox(height: 16),
75
            Text('완료 여부: ${todo.isCompleted ? "완료" : "미완료"}'),
76
          ],
77
        ),
78
      ),
79
    );
80
  }
81
}

RouteSettings로 데이터 전달 (대안)

1
// 네비게이션
2
Navigator.push(
3
  context,
4
  MaterialPageRoute(
5
    builder: (context) => const TodoDetailScreen(),
6
    settings: RouteSettings(arguments: todo),
7
  ),
8
);
9

10
// 데이터 추출 (상세 화면에서)
11
@override
12
Widget build(BuildContext context) {
13
  final todo = ModalRoute.of(context)!.settings.arguments as Todo;
14
  // ...
15
}

Watch out#

WARNING
RouteSettings.arguments를 사용할 때는 타입 캐스팅이 필요합니다.
잘못된 타입이 전달되면 런타임 에러가 발생합니다.
1
// ❌ 위험: 타입이 다르면 런타임 에러
2
final todo = ModalRoute.of(context)!.settings.arguments as Todo;
3

4
// ✅ 안전: 타입 검사 후 사용
5
final args = ModalRoute.of(context)!.settings.arguments;
6
if (args is Todo) {
7
  // 안전하게 사용
8
} else {
9
  // 에러 처리
10
}
생성자 방식이 컴파일 타임에 타입 안전성을 보장하므로 권장됩니다.

결론: 생성자 파라미터로 데이터를 전달하면 타입 안전하고 명확합니다.

챕터 3: 이전 화면으로 결과 반환#

Why#

NOTE
선택 화면에서 사용자가 선택한 항목을 이전 화면으로 전달해야 합니다.
편집 화면에서 저장 결과를 반환하는 것도 같은 패턴입니다.
1
선택 화면 → (선택 결과) → 이전 화면

What#

NOTE
Navigator.pop(context, result)로 결과와 함께 화면을 닫습니다.
Navigator.push()는 Future를 반환하므로 await로 결과를 받을 수 있습니다.

How#

TIP

결과 반환 패턴

1
// 선택 화면
2
class ColorPickerScreen extends StatelessWidget {
3
  const ColorPickerScreen({super.key});
4

5
  @override
6
  Widget build(BuildContext context) {
7
    return Scaffold(
8
      appBar: AppBar(title: const Text('색상 선택')),
9
      body: ListView(
10
        children: [
11
          ListTile(
12
            leading: const CircleAvatar(backgroundColor: Colors.red),
13
            title: const Text('빨강'),
14
            onTap: () => Navigator.pop(context, Colors.red),
15
          ),
16
          ListTile(
17
            leading: const CircleAvatar(backgroundColor: Colors.green),
18
            title: const Text('초록'),
19
            onTap: () => Navigator.pop(context, Colors.green),
20
          ),
21
          ListTile(
22
            leading: const CircleAvatar(backgroundColor: Colors.blue),
23
            title: const Text('파랑'),
24
            onTap: () => Navigator.pop(context, Colors.blue),
25
          ),
26
        ],
27
      ),
28
    );
29
  }
30
}
31

32
// 메인 화면
33
class MainScreen extends StatefulWidget {
34
  const MainScreen({super.key});
35

36
  @override
37
  State<MainScreen> createState() => _MainScreenState();
38
}
39

40
class _MainScreenState extends State<MainScreen> {
41
  Color _selectedColor = Colors.grey;
42

43
  Future<void> _selectColor() async {
44
    // await로 결과 대기
45
    final Color? result = await Navigator.push<Color>(
46
      context,
47
      MaterialPageRoute(builder: (context) => const ColorPickerScreen()),
48
    );
49

50
    // 위젯이 아직 마운트되어 있는지 확인
51
    if (!mounted) return;
52

53
    // 결과가 있으면 상태 업데이트
54
    if (result != null) {
55
      setState(() {
56
        _selectedColor = result;
57
      });
58
      ScaffoldMessenger.of(context).showSnackBar(
59
        SnackBar(content: Text('선택된 색상: $result')),
60
      );
61
    }
62
  }
63

64
  @override
65
  Widget build(BuildContext context) {
66
    return Scaffold(
67
      appBar: AppBar(title: const Text('색상 선택 데모')),
68
      body: Center(
69
        child: Column(
70
          mainAxisAlignment: MainAxisAlignment.center,
71
          children: [
72
            Container(
73
              width: 100,
74
              height: 100,
75
              color: _selectedColor,
76
            ),
77
            const SizedBox(height: 24),
78
            ElevatedButton(
79
              onPressed: _selectColor,
80
              child: const Text('색상 선택하기'),
81
            ),
82
          ],
83
        ),
84
      ),
85
    );
86
  }
87
}

타입 지정

1
// MaterialPageRoute에 반환 타입 지정
2
final Color? result = await Navigator.push<Color>(
3
  context,
4
  MaterialPageRoute<Color>(
5
    builder: (context) => const ColorPickerScreen(),
6
  ),
7
);

Watch out#

WARNING
await 후에는 반드시 mounted를 확인해야 합니다.
화면이 닫힌 동안 원래 화면도 dispose 되었을 수 있습니다.
1
Future<void> _navigateAndGetResult() async {
2
  final result = await Navigator.push(...);
3

4
  // ❌ 위험: 위젯이 이미 dispose 되었을 수 있음
5
  setState(() { ... });
6

7
  // ✅ 안전: mounted 확인 후 사용
8
  if (!mounted) return;
9
  setState(() { ... });
10
}

결론: Navigator.pop(context, result)로 결과를 반환하고, await로 받아서 mounted 확인 후 처리합니다.

챕터 4: 다양한 네비게이션 메서드#

Why#

NOTE
단순히 화면을 열고 닫는 것 외에 다양한 네비게이션 패턴이 필요합니다.
로그인 후 홈 화면으로 이동하면서 로그인 화면을 제거하는 것이 예입니다.
1
로그인 → 홈 (로그인 화면 제거)
2
설정 → 로그아웃 → 로그인 (모든 화면 제거)

What#

NOTE
Navigator는 다양한 화면 전환 메서드를 제공합니다.
스택을 조작하여 원하는 네비게이션 패턴을 구현할 수 있습니다.

How#

TIP

주요 Navigator 메서드

메서드	설명
`push()`	새 화면을 스택에 추가
`pop()`	현재 화면 제거
`pushReplacement()`	현재 화면을 새 화면으로 교체
`pushAndRemoveUntil()`	새 화면 추가 후 조건까지 제거
`popUntil()`	조건까지 화면 제거

pushReplacement 예제

1
// 로그인 성공 후 홈 화면으로 이동 (로그인 화면 제거)
2
void _onLoginSuccess() {
3
  Navigator.pushReplacement(
4
    context,
5
    MaterialPageRoute(builder: (context) => const HomeScreen()),
6
  );
7
  // 이제 뒤로가기를 눌러도 로그인 화면으로 돌아가지 않음
8
}

pushAndRemoveUntil 예제

1
// 로그아웃: 모든 화면 제거 후 로그인 화면으로
2
void _logout() {
3
  Navigator.pushAndRemoveUntil(
4
    context,
5
    MaterialPageRoute(builder: (context) => const LoginScreen()),
6
    (route) => false, // 모든 화면 제거
7
  );
8
}
9

10
// 홈 화면까지만 남기고 새 화면 추가
11
void _goToSettings() {
12
  Navigator.pushAndRemoveUntil(
13
    context,
14
    MaterialPageRoute(builder: (context) => const SettingsScreen()),
15
    (route) => route.isFirst, // 첫 번째 화면(홈)만 남김
16
  );
17
}

popUntil 예제

1
// 홈 화면까지 모든 화면 닫기
2
void _goBackToHome() {
3
  Navigator.popUntil(context, (route) => route.isFirst);
4
}
5

6
// 특정 라우트 이름까지 닫기
7
void _goBackToSettings() {
8
  Navigator.popUntil(context, ModalRoute.withName('/settings'));
9
}

maybePop 예제

1
// 뒤로 갈 수 있으면 뒤로, 없으면 무시
2
void _onBackPressed() {
3
  Navigator.maybePop(context);
4
}

Watch out#

WARNING
pushAndRemoveUntil의 조건 함수가 항상 false를 반환하면 루트 화면까지 모두 제거됩니다.
의도치 않게 앱이 빈 상태가 될 수 있습니다.
1
// 주의: 모든 화면이 제거됨
2
Navigator.pushAndRemoveUntil(
3
  context,
4
  MaterialPageRoute(...),
5
  (route) => false, // 조건이 절대 true가 되지 않음
6
);
최소한 하나의 화면은 남기거나, 새 화면이 반드시 추가되도록 해야 합니다.

결론: 상황에 맞는 Navigator 메서드를 선택하여 스택을 적절히 관리합니다.

챕터 5: 명명된 라우트 (Named Routes)#

Why#

NOTE
화면이 많아지면 라우트를 중앙에서 관리하는 것이 편리합니다.
문자열 이름으로 화면을 참조하면 코드가 간결해집니다.
1
Navigator.pushNamed(context, '/settings');
2
// vs
3
Navigator.push(context, MaterialPageRoute(...));

What#

NOTE
MaterialApp의 routes 맵에 라우트 이름과 빌더를 정의합니다.
Navigator.pushNamed()로 이름으로 화면을 열 수 있습니다.
참고: 명명된 라우트는 더 이상 권장되지 않습니다. 복잡한 앱에서는 go_router 같은 패키지를 사용하세요.

How#

TIP

Named Routes 정의

1
void main() {
2
  runApp(MaterialApp(
3
    title: 'Named Routes Demo',
4
    initialRoute: '/',
5
    routes: {
6
      '/': (context) => const HomeScreen(),
7
      '/settings': (context) => const SettingsScreen(),
8
      '/profile': (context) => const ProfileScreen(),
9
    },
10
  ));
11
}

Named Routes 사용

1
// 화면 이동
2
ElevatedButton(
3
  onPressed: () {
4
    Navigator.pushNamed(context, '/settings');
5
  },
6
  child: const Text('설정'),
7
)
8

9
// 데이터와 함께 이동
10
Navigator.pushNamed(
11
  context,
12
  '/profile',
13
  arguments: {'userId': '12345'},
14
);
15

16
// 데이터 추출
17
@override
18
Widget build(BuildContext context) {
19
  final args = ModalRoute.of(context)!.settings.arguments as Map;
20
  final userId = args['userId'];
21
  // ...
22
}

onGenerateRoute로 동적 라우트

1
MaterialApp(
2
  onGenerateRoute: (settings) {
3
    // /user/123 같은 동적 경로 처리
4
    if (settings.name!.startsWith('/user/')) {
5
      final userId = settings.name!.split('/').last;
6
      return MaterialPageRoute(
7
        builder: (context) => UserScreen(userId: userId),
8
      );
9
    }
10

11
    // 알 수 없는 라우트
12
    return MaterialPageRoute(
13
      builder: (context) => const NotFoundScreen(),
14
    );
15
  },
16
)

Watch out#

WARNING

명명된 라우트는 타입 안전성이 떨어지고 데이터 전달이 불편합니다.
Flutter 팀은 복잡한 앱에서 go_router 사용을 권장합니다.

1
// Named Routes의 한계
2
Navigator.pushNamed(
3
  context,
4
  '/user', // 오타가 있어도 컴파일 에러 없음
5
  arguments: userObj, // 타입 검사 없음
6
);
7

8
// go_router 권장
9
GoRouter(
10
  routes: [
11
    GoRoute(
12
      path: '/user/:id',
13
      builder: (context, state) => UserScreen(
14
        userId: state.pathParameters['id']!, // 타입 안전
15
      ),
16
    ),
17
  ],
18
)

결론: 간단한 앱에서는 Named Routes가 편리하지만, 복잡한 앱에서는 go_router를 권장합니다.

챕터 6: 네비게이션 실전 패턴#

Why#

NOTE
실제 앱에서는 여러 네비게이션 패턴을 조합해서 사용합니다.
로그인 흐름, 온보딩, 모달 화면 등 다양한 시나리오를 처리해야 합니다.

What#

NOTE
일반적인 네비게이션 패턴들:

인증 흐름: 로그인 → 홈 (스택 교체)

온보딩: 단계별 → 홈 (완료 시 스택 제거)

모달 대화상자: 결과 반환

중첩 네비게이션: 탭별 독립 스택

How#

TIP

인증 흐름 패턴

1
class AuthWrapper extends StatelessWidget {
2
  const AuthWrapper({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    // 인증 상태에 따라 다른 화면 표시
7
    return StreamBuilder<User?>(
8
      stream: AuthService.instance.authStateChanges,
9
      builder: (context, snapshot) {
10
        if (snapshot.connectionState == ConnectionState.waiting) {
11
          return const SplashScreen();
12
        }
13

14
        if (snapshot.hasData) {
15
          return const HomeScreen();
16
        }
17

18
        return const LoginScreen();
19
      },
20
    );
21
  }
22
}
23

24
// 로그인 성공 후
25
void _onLoginSuccess() {
26
  // 스택 전체 교체 (뒤로가기 시 로그인 화면으로 가지 않도록)
27
  Navigator.pushAndRemoveUntil(
28
    context,
29
    MaterialPageRoute(builder: (context) => const HomeScreen()),
30
    (route) => false,
31
  );
32
}

모달 선택 패턴

1
Future<String?> showCountryPicker(BuildContext context) async {
2
  return await showModalBottomSheet<String>(
3
    context: context,
4
    builder: (context) => ListView(
5
      children: [
6
        ListTile(
7
          title: const Text('대한민국'),
8
          onTap: () => Navigator.pop(context, 'KR'),
9
        ),
10
        ListTile(
11
          title: const Text('미국'),
12
          onTap: () => Navigator.pop(context, 'US'),
13
        ),
14
        ListTile(
15
          title: const Text('일본'),
16
          onTap: () => Navigator.pop(context, 'JP'),
17
        ),
18
      ],
19
    ),
20
  );
21
}
22

23
// 사용
24
final country = await showCountryPicker(context);
25
if (country != null) {
26
  print('선택된 국가: $country');
27
}

WillPopScope로 뒤로가기 제어

1
WillPopScope(
2
  onWillPop: () async {
3
    // 저장되지 않은 변경사항이 있으면 확인
4
    if (_hasUnsavedChanges) {
5
      final shouldLeave = await showDialog<bool>(
6
        context: context,
7
        builder: (context) => AlertDialog(
8
          title: const Text('변경사항 저장'),
9
          content: const Text('저장하지 않은 변경사항이 있습니다. 나가시겠습니까?'),
10
          actions: [
11
            TextButton(
12
              onPressed: () => Navigator.pop(context, false),
13
              child: const Text('취소'),
14
            ),
15
            TextButton(
16
              onPressed: () => Navigator.pop(context, true),
17
              child: const Text('나가기'),
18
            ),
19
          ],
20
        ),
21
      );
22
      return shouldLeave ?? false;
23
    }
24
    return true;
25
  },
26
  child: Scaffold(...),
27
)

Watch out#

WARNING

WillPopScope는 Flutter 3.12부터 deprecated 되었습니다.
대신 PopScope를 사용하세요.

1
// Flutter 3.12 이상
2
PopScope(
3
  canPop: !_hasUnsavedChanges,
4
  onPopInvoked: (didPop) {
5
    if (!didPop) {
6
      // 뒤로가기가 막힌 경우 확인 대화상자 표시
7
      _showUnsavedChangesDialog();
8
    }
9
  },
10
  child: Scaffold(...),
11
)

결론: 앱의 요구사항에 맞는 네비게이션 패턴을 선택하고, 일관성 있게 적용합니다.

한계#

기본 Navigator 시스템에는 몇 가지 한계가 있습니다.

딥 링킹: URL 기반 네비게이션이 복잡합니다.
상태 복원: 앱 재시작 시 네비게이션 상태 복원이 어렵습니다.
타입 안전성: 명명된 라우트는 타입 검사가 불가능합니다.
중첩 네비게이션: 탭별 독립 스택 관리가 복잡합니다.

복잡한 네비게이션이 필요하면 go_router, auto_route 같은 패키지 사용을 고려하세요.

Navigator(네비게이터): 화면 스택을 관리하는 위젯이다. push, pop 등의 메서드로 화면 전환을 제어한다. ↩
Route(라우트): Flutter에서 화면을 의미하는 추상화 클래스다. MaterialPageRoute가 가장 흔히 사용된다. ↩

Flutter 튜토리얼 17편: 화면 전환과 데이터 전달

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

일반적인 네비게이션 패턴#

해결 방법#

챕터 1: 기본 네비게이션#

Why#

What#

How#

Watch out#

챕터 2: 새 화면으로 데이터 전달#

Why#

What#

How#

Watch out#

챕터 3: 이전 화면으로 결과 반환#

Why#

What#

How#

Watch out#

챕터 4: 다양한 네비게이션 메서드#

Why#

What#

How#

Watch out#

챕터 5: 명명된 라우트 (Named Routes)#

Why#

What#

How#

Watch out#

챕터 6: 네비게이션 실전 패턴#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차