플러터:테마 - 편집 역사

Sam: /* 권장 설정 */

2026-01-07T13:51:36Z

권장 설정

← 이전 판		2026년 1월 7일 (수) 13:51 판
35번째 줄:		35번째 줄:
	darkTheme: ThemeData.dark(),		darkTheme: ThemeData.dark(),
	themeMode: ThemeMode.system, // 시스템 설정을 따라 다크테마 지정 결정.		themeMode: ThemeMode.system, // 시스템 설정을 따라 다크테마 지정 결정.
	~~useMaterial3: true, // 설정 안해두면 마테리얼2 이다.~~
	);		);

121번째 줄:		120번째 줄:

	=== Material 3 ===		=== Material 3 ===
	Flutter 최신 버전에서는 Material 3 사용이 권장된다.<syntaxhighlight lang="dart">ThemeData(		Flutter 최신 버전에서는 Material 3 사용이 권장된다. 설정 안해두면 기본적으로 마테리얼 2이다.<syntaxhighlight lang="dart">ThemeData(
	useMaterial3: true,		useMaterial3: true,
	);</syntaxhighlight>Material 3 특징:		);</syntaxhighlight>Material 3 특징:

Sam: /* 세부 구성 */

2026-01-07T13:48:08Z

세부 구성

← 이전 판		2026년 1월 7일 (수) 13:48 판
118번째 줄:		118번째 줄:
	\| 빨간색		\| 빨간색
	\| 밝은 빨간색		\| 밝은 빨간색
	\|-
	~~\| 시스템 다크 모드 자동 반영~~
	~~\| ❌~~
	~~\| ❌~~
	\|}		\|}

Sam: /* 세부 구성 */

2026-01-07T13:46:29Z

세부 구성

@@ 53번째 줄: / 53번째 줄: @@
 );
 </syntaxhighlight>
 === Material 3 ===

Sam: /* 기본 구조 */

2026-01-07T13:45:37Z

기본 구조

← 이전 판		2026년 1월 7일 (수) 13:45 판
22번째 줄:		22번째 줄:
	home: MyHomePage(),		home: MyHomePage(),
	);		);
			</syntaxhighlight>테마를 설정하지 않으면 기본 값은 아래와 같다고 보면 된다.<syntaxhighlight lang="dart">
			MaterialApp(
			theme: ThemeData.light(),
			themeMode: ThemeData.light(),
			);

	</syntaxhighlight>		</syntaxhighlight>
			== 권장 설정 ==
	== ~~다크 모드~~ ==
	Flutter는 라이트 / 다크 테마를 동시에 정의할 수 있다.<syntaxhighlight lang="dart">		Flutter는 라이트 / 다크 테마를 동시에 정의할 수 있다.<syntaxhighlight lang="dart">
	MaterialApp(		MaterialApp(
	theme: ThemeData.light(),		theme: ThemeData.light(), // 라이트 테마에 대한 기본 색상들.
	darkTheme: ThemeData.dark(),		darkTheme: ThemeData.dark(),
	themeMode: ThemeMode.system, // 시스템 설정을 따라 다크테마 지정 결정.		themeMode: ThemeMode.system, // 시스템 설정을 따라 다크테마 지정 결정.
			useMaterial3: true, // 설정 안해두면 마테리얼2 이다.
	);		);

	</syntaxhighlight>themeMode 옵션		</syntaxhighlight>themeMode 옵션

	* ThemeMode.light ~~// 라이트 테마에 대한 기본 색상들.~~		* ThemeMode.light
	* ThemeMode.dark		* ThemeMode.dark
	* ThemeMode.system		* ThemeMode.system
	위처럼 light나 dark 테마를 자동으로 넣을 수도 있고, ~~아래에서~~ 소개하는 것처럼 색을 수동으로 지정할 수도 있다.		위처럼 light나 dark 테마를 자동으로 넣을 수도 있고, 이후 소개하는 것처럼 색을 수동으로 지정할 수도 있다.

			=== 세부 구성 ===
			ThemaData에 light, dark 등을 지정하지 않고 일일이 구현한다면 아래와 같은 형태이다.<syntaxhighlight lang="dart">
			ThemeData.light() ≈ ThemeData(
			brightness: Brightness.light,
			colorScheme: ColorScheme.light(),
			textTheme: Typography.material2018().black,
			);
			</syntaxhighlight>

			=== Material 3 ===
			Flutter 최신 버전에서는 Material 3 사용이 권장된다.<syntaxhighlight lang="dart">ThemeData(
			useMaterial3: true,
			);</syntaxhighlight>Material 3 특징:

			* 둥근 모서리
			* 색상 자동 조합

			동적인 컬러 시스템
	== ColorScheme ==		== ColorScheme ==
	Flutter에서는 개별 색상보다 ColorScheme 사용을 권장.<syntaxhighlight lang="dart">		Flutter에서는 개별 색상보다 ColorScheme 사용을 권장.<syntaxhighlight lang="dart">
112번째 줄:		136번째 줄:

	*		*

	~~== Material 3 ==~~
	~~Flutter 최신 버전에서는 Material 3 사용이 권장된다.<syntaxhighlight lang="dart">~~
	~~ThemeData(~~
	~~useMaterial3: true,~~
	);
	~~</syntaxhighlight>Material 3 특징:~~

	* 둥근 모서리
	* 색상 자동 조합

	~~동적인 컬러 시스템~~

Sam: /* 다크 모드 */

2026-01-07T12:31:58Z

다크 모드

@@ 23번째 줄: / 23번째 줄: @@
 );
 </syntaxhighlight>
 == ColorScheme ==
@@ 96번째 줄: / 111번째 줄: @@
 </syntaxhighlight>
-== 다크 모드 ==
 == Material 3 ==

Sam: /* 노티파이어를 통한 상속 */

2026-01-07T12:30:13Z

노티파이어를 통한 상속

@@ 2번째 줄: / 2번째 줄: @@
 == 개요 ==
-보통 lib>common>models 폴더를 만들고 이 안에 테마값들을 만든 후 자동으로 적용해나가는 방식이 일반적.
+=== 장점 ===
-보통 리버팟으로 관리함.
+* UI 일관성 유지(당연하지만, 규모가 커질수록 용이해진다.)
-flutter pub add flutter_riverpod
+* 스타일 변경 시 코드 수정 최소화
-flutter pub get
+= 기본 구조 =
-== 노티파이어를 통한 상속 ==
+== ColorScheme ==

2025년 11월 12일 (수) 03:24에 Sam님의 편집

2025-11-12T03:24:43Z

← 이전 판		2025년 11월 12일 (수) 03:24 판
6번째 줄:		6번째 줄:

	보통 lib>common>models 폴더를 만들고 이 안에 테마값들을 만든 후 자동으로 적용해나가는 방식이 일반적.		보통 lib>common>models 폴더를 만들고 이 안에 테마값들을 만든 후 자동으로 적용해나가는 방식이 일반적.

			보통 리버팟으로 관리함.

			flutter pub add flutter_riverpod

			flutter pub get

			== 노티파이어를 통한 상속 ==

Sam: 새 문서: {{플러터}} == 개요 == 색이나 이런저런 설정을 한번에 변화시키기 위해 테마를 사용한다. 보통 lib>common>models 폴더를 만들고 이 안에 테마값들을 만든 후 자동으로 적용해나가는 방식이 일반적.

2025-11-11T05:17:31Z

새 문서: {{플러터}} == 개요 == 색이나 이런저런 설정을 한번에 변화시키기 위해 테마를 사용한다. 보통 lib>common>models 폴더를 만들고 이 안에 테마값들을 만든 후 자동으로 적용해나가는 방식이 일반적.

새 문서

{{플러터}}

== 개요 ==
색이나 이런저런 설정을 한번에 변화시키기 위해 테마를 사용한다.

보통 lib>common>models 폴더를 만들고 이 안에 테마값들을 만든 후 자동으로 적용해나가는 방식이 일반적.