중급
Navigation과 Routing
화면 이동, 탭, drawer, 딥링크, 웹 URL 전략을 설계합니다.
핵심 개념
Navigation과 Routing 주요 항목
기본 화면 이동
Navigator는 화면을 스택처럼 쌓고 제거합니다.
언제 쓰나: 간단한 앱은 push와 pop으로 화면 이동을 구성할 수 있습니다.
Flutter에서: 상세 화면으로 데이터를 보내거나, 이전 화면으로 결과를 반환할 수 있습니다.
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('기본 화면 이동', style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(height: 8),
Text('Navigator는 화면을 스택처럼 쌓고 제거합니다.'),
],
),
),
)Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: const Color(0xFFDCE6EF)),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
color: const Color(0xFFEEF7FB),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'기본 화면 이동',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
),
)
],
),
)기본 화면 이동
확장 주제
탭, drawer, modal sheet는 앱 구조에 맞는 내비게이션 패턴입니다.
언제 쓰나: 웹과 앱 링크를 고려한다면 URL 전략과 딥링크 설정이 중요합니다.
Flutter에서: 라우팅 규칙은 화면 이름, path parameter, query parameter를 함께 문서화해야 합니다.
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('확장 주제', style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(height: 8),
Text('탭, drawer, modal sheet는 앱 구조에 맞는 내비게이션 패턴입니다.'),
],
),
),
)Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: const Color(0xFFDCE6EF)),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
color: const Color(0xFFEEF7FB),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'확장 주제',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
),
)
],
),
)확장 주제
코드
예제
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const DetailPage()),
);Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: const Color(0xFFDCE6EF)),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
color: const Color(0xFFEEF7FB),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'상세 화면',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
),
),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
Chip(label: Text('목록')),
Chip(label: Text('상세')),
Chip(label: Text('뒤로가기'))
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('목록에서 항목을 누르면 DetailPage로 이동합니다.')
],
)
],
),
)상세 화면
목록상세뒤로가기
목록에서 항목을 누르면 DetailPage로 이동합니다.
다음 단계
실습 체크리스트
push/pop 사용데이터 전달딥링크와 웹 URL 전략 검토
- 출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
- Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
- Flutter UI위젯, 레이아웃, 입력, 내비게이션 흐름을 함께 봅니다.