플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) - 편집 역사

Sam: /* 기본 화면 전환(Navigator) */

2026-01-13T08:44:21Z

기본 화면 전환(Navigator)

@@ 112번째 줄: / 112번째 줄: @@
 * PageRouteBuilder (전환 애니메이션 직접 커스텀)
 * go_router, auto_route 같은 라우팅 라이브러리
 = 기본 하단 네비게이션 바 =
 <syntaxhighlight lang="dart">import 'package:flutter/material.dart';

Sam: Sam님이 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)(화면 쌓기, 하단 네비게이션 바) 문서를 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 문서로 이동하면서 넘겨주기를 덮어썼습니다

2026-01-07T01:50:08Z

Sam님이 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)(화면 쌓기, 하단 네비게이션 바) 문서를 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 문서로 이동하면서 넘겨주기를 덮어썼습니다

← 이전 판		2026년 1월 7일 (수) 01:50 판
(차이 없음)

Sam: /* 이해를 위한 추가 설명 */

2026-01-07T01:33:35Z

이해를 위한 추가 설명

← 이전 판		2026년 1월 7일 (수) 01:33 판
211번째 줄:		211번째 줄:
	* shifting: 선택된 탭 강조, 배경색 변화 가능		* shifting: 선택된 탭 강조, 배경색 변화 가능

	기본값은 탭이 ~~3개 이상이면~~ fixed, ~~3개 이하이면~~ shifting		기본값은 탭이 4개 이하면 fixed, 4개 이상이면 shifting

	기본값은 아래 옵션으로 바꾸어 지정 가능.		기본값은 아래 옵션으로 바꾸어 지정 가능.

Sam: /* 이해를 위한 추가 설명 */

2026-01-07T01:06:27Z

이해를 위한 추가 설명

← 이전 판		2026년 1월 7일 (수) 01:06 판
86번째 줄:		86번째 줄:
	MaterialPageRoute는 기본적인 화면 전환 애니메이션을 제공한다.		MaterialPageRoute는 기본적인 화면 전환 애니메이션을 제공한다.
	\|마테리얼 디자인 규칙에 따라 뒤로가기가 가능하면 자동으로 뒤로가기 버튼이 생긴다.		\|마테리얼 디자인 규칙에 따라 뒤로가기가 가능하면 자동으로 뒤로가기 버튼이 생긴다.
	<code>_</code>는 '인자를 받긴 해야 하지만, 나는 쓰지 않겠다'라는 의미의 Dart 관례적인 이름.		<code>_</code>는 '인자를 받긴 해야 하지만, 나는 쓰지 않겠다'라는 의미의 Dart 관례적인 이름.(원랜 BuildContext context가 들어감.)
	\|-		\|-
	\|뒤로 가기		\|뒤로 가기

Sam: /* 이해를 위한 추가 설명 */

2026-01-07T00:58:52Z

이해를 위한 추가 설명

← 이전 판		2026년 1월 7일 (수) 00:58 판
40번째 줄:		40번째 줄:
	// 화면 이동 (push)		// 화면 이동 (push)
	Navigator.push(		Navigator.push(
	context,		context, // 현재 위젯의 위치가 어디인지.(어디 위에 화면을 올릴 것인지.)
	MaterialPageRoute(builder: (_) => SecondPage()),		MaterialPageRoute(builder: (_) => SecondPage()),
	);		);
66번째 줄:		66번째 줄:
	);		);
	}		}
	}		}</syntaxhighlight>
	</syntaxhighlight>

	== 이해를 위한 추가 설명 ==		== 이해를 위한 추가 설명 ==
78번째 줄:		77번째 줄:
	\|화면을 위에 올리기.		\|화면을 위에 올리기.
	Navigator.push		Navigator.push
	\|<syntaxhighlight lang="dart">		\|<syntaxhighlight lang="dart">Navigator.push(
	Navigator.push(
	context,		context,
	MaterialPageRoute(builder: (_) => SecondPage()),		MaterialPageRoute(builder: (_) => SecondPage()),
	);		);</syntaxhighlight>
	</syntaxhighlight>

	새로운 페이지를 스택 위에 ‘올려서’ 이동한다.		새로운 페이지를 스택 위에 ‘올려서’ 이동한다.
89번째 줄:		86번째 줄:
	MaterialPageRoute는 기본적인 화면 전환 애니메이션을 제공한다.		MaterialPageRoute는 기본적인 화면 전환 애니메이션을 제공한다.
	\|마테리얼 디자인 규칙에 따라 뒤로가기가 가능하면 자동으로 뒤로가기 버튼이 생긴다.		\|마테리얼 디자인 규칙에 따라 뒤로가기가 가능하면 자동으로 뒤로가기 버튼이 생긴다.
			<code>_</code>는 '인자를 받긴 해야 하지만, 나는 쓰지 않겠다'라는 의미의 Dart 관례적인 이름.
	\|-		\|-
	\|뒤로 가기		\|뒤로 가기
95번째 줄:		93번째 줄:

	현재 페이지를 스택에서 제거(pop)하여 이전 화면으로 돌아간다.		현재 페이지를 스택에서 제거(pop)하여 이전 화면으로 돌아간다.
	\|		\|위 코드엔 없지만, 특정 함수에서 진행하면 창이 닫힌다.
	\|}		\|}

114번째 줄:		112번째 줄:
	* PageRouteBuilder (전환 애니메이션 직접 커스텀)		* PageRouteBuilder (전환 애니메이션 직접 커스텀)
	* go_router, auto_route 같은 라우팅 라이브러리		* go_router, auto_route 같은 라우팅 라이브러리

	~~기본 예제는 MaterialPageRoute로 충분하다.~~
	= 기본 하단 네비게이션 바 =		= 기본 하단 네비게이션 바 =
	<syntaxhighlight lang="dart">		<syntaxhighlight lang="dart">import 'package:flutter/material.dart';
	import 'package:flutter/material.dart';

	void main() => runApp(MyApp());		void main() => runApp(MyApp());
142번째 줄:		137번째 줄:

	// 탭마다 보여줄 화면		// 탭마다 보여줄 화면
	static const List<Widget> _pages = <Widget>[		static const List<Widget> _pages = <Widget>[ // static은 클래스 변수임을 의미미(인스턴스가 생길 때마다 새로 만들지는 않겠다.)
	Center(		Center(
	child: Text(		child: Text(
196번째 줄:		191번째 줄:
	);		);
	}		}
	}		}</syntaxhighlight>

	</syntaxhighlight>

	= 이해를 위한 추가 설명 =		= 이해를 위한 추가 설명 =

Sam: Sam님이 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 문서를 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)(화면 쌓기, 하단 네비게이션 바) 문서로 이동했습니다: 문자열 찾아 바꾸기 - "플러터:화면 전환" 문자열을 "플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)" 문자열로

2025-11-19T07:43:10Z

Sam님이 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 문서를 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)(화면 쌓기, 하단 네비게이션 바) 문서로 이동했습니다: 문자열 찾아 바꾸기 - "플러터:화면 전환" 문자열을 "플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)" 문자열로

← 이전 판		2025년 11월 19일 (수) 07:43 판
(차이 없음)

Sam: Sam님이 플러터:화면 전환 문서를 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 문서로 이동했습니다

2025-11-19T07:42:29Z

Sam님이 플러터:화면 전환 문서를 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 문서로 이동했습니다

← 이전 판		2025년 11월 19일 (수) 07:42 판
(차이 없음)

Sam: /* 기본 하단 네비게이션바 */

2025-11-16T16:06:24Z

기본 하단 네비게이션바

차이 보기

Sam: /* 다른 프로젝트 */

2025-11-16T15:46:48Z

다른 프로젝트

← 이전 판		2025년 11월 16일 (일) 15:46 판
112번째 줄:		112번째 줄:

	기본 예제는 MaterialPageRoute로 충분하다.		기본 예제는 MaterialPageRoute로 충분하다.
			= 기본 하단 네비게이션바 =
			<syntaxhighlight lang="dart">
			import 'package:flutter/material.dart';

	= ~~다른 프로젝트~~ =		void main() => runApp(MyApp());

			class MyApp extends StatelessWidget {
			@override
			Widget build(BuildContext context) {
			return MaterialApp(
			title: 'BottomNavigation Demo',
			debugShowCheckedModeBanner: false,
			home: HomePage(),
			);
			}
			}

			class HomePage extends StatefulWidget {
			@override
			State<HomePage> createState() => _HomePageState();
			}

			class _HomePageState extends State<HomePage> {
			int _selectedIndex = 0; // 현재 선택된 탭

			// 탭마다 보여줄 화면
			static const List<Widget> _pages = <Widget>[
			Center(child: Text('첫 번째 화면', style: TextStyle(fontSize: 24))),
			Center(child: Text('두 번째 화면', style: TextStyle(fontSize: 24))),
			Center(child: Text('세 번째 화면', style: TextStyle(fontSize: 24))),
			];

			void _onItemTapped(int index) {
			setState(() {
			_selectedIndex = index; // 탭 선택 시 상태 변경
			});
			}

			@override
			Widget build(BuildContext context) {
			return Scaffold(
			appBar: AppBar(title: Text('BottomNavigationBar Demo')),
			body: _pages[_selectedIndex], // 현재 선택된 화면 표시
			bottomNavigationBar: BottomNavigationBar(
			currentIndex: _selectedIndex,
			onTap: _onItemTapped, // 탭 클릭 시 호출
			items: const <BottomNavigationBarItem>[
			BottomNavigationBarItem(
			icon: Icon(Icons.home),
			label: '홈',
			),
			BottomNavigationBarItem(
			icon: Icon(Icons.business),
			label: '비즈니스',
			),
			BottomNavigationBarItem(
			icon: Icon(Icons.school),
			label: '학교',
			),
			],
			),
			);
			}
			}
			</syntaxhighlight>

			= 이해를 위한 추가 설명 =
			{\| class="wikitable"
			!요소
			!설명

			!비고
			StatefulWidget
			하단 탭 선택 상태를 관리해야 하므로 HomePage를 StatefulWidget으로 정의
			StatelessWidget이면 선택된 탭 정보를 저장할 수 없음
			-
			_selectedIndex
			현재 선택된 탭의 인덱스를 저장하는 상태 변수
			탭을 클릭하면 setState()로 값 변경
			-
			_pages
			각 탭에 대응하는 화면 위젯 리스트
			_selectedIndex를 이용해 화면 전환
			-
			_onItemTapped
			탭 클릭 시 호출되는 함수
			setState() 안에서 _selectedIndex 값을 바꾸어 화면 갱신
			-
			BottomNavigationBar
			하단 네비게이션바 위젯
			currentIndex: 선택된 탭 표시, onTap: 탭 클릭 시 동작 지정, items: 각 탭의 아이콘과 라벨
			-
			currentIndex
			현재 선택된 탭을 표시
			_selectedIndex와 연결
			-
			onTap
			탭 클릭 이벤트
			_onItemTapped 함수 연결
			}

			\|}

			== 의문 ==

			=== StatelessWidget으로도 만들 수 없나? ===
			탭 선택 상태를 저장할 방법이 없으므로 일반 StatelessWidget으로는 불가능하다.
			탭 상태를 유지하면서 화면 전환하려면 StatefulWidget을 사용해야 한다.

			=== BottomNavigationBarType 옵션은? ===

			fixed: 모든 탭이 항상 같은 너비로 표시

			shifting: 선택된 탭 강조, 배경색 변화 가능

			기본값은 탭이 3개 이상이면 fixed, 3개 이하이면 shifting

			=== AppBar, Body, BottomNavigationBar 구조는 꼭 이렇게 해야 하나? ===
			대부분의 경우 Scaffold 안에서 body와 bottomNavigationBar를 함께 사용한다.
			AppBar는 선택 사항이며 필요 없으면 생략 가능.

2025년 11월 16일 (일) 15:45에 Sam님의 편집

2025-11-16T15:45:43Z

차이 보기