[055] 플러터 (Flutter) 배우기 - 라이트, 다크 모드(밝은 테마, 어두운 테마 만들기)

안녕하세요~ totally 개발자입니다.

 

이번 포스팅에서는 간단히 라이트, 다크 모드를 구현해보도록 하겠습니다. 플러터에서는 이 라이트, 다크 모드를 내장된 기능으로 간단하게 구현할 수 있습니다.

 

Step 1: MyApp 부분에 11-12번째 줄처럼 ValueNotifier 부분을 넣어줍니다. 이 ValueNotifier는 ChangeNotifier을 상속받고 있기 때문에 마치 provider, stream처럼 상태를 받아와 변경된 데이터를 적용할 수 있습니다. 

 

 

Step 2: 그 아래에 ValueListenableBuilder로 감싸주어야 합니다. 마치 StreamBuilder처럼 감싸주는 것과 동일합니다. themeNotifier가 변경된 것을 valueListenable로 받아오고 builder를 통해 전달하여 빌드합니다. 

 

 

Step 3: _HomePageState 클래스에 다음 변수를 선언해줍니다.

 

 

 

Step 4: 아래 빨갠삭 박스처럼 Switch를 넣었고 변경된 내용을 넣어주면 됩니다. 

 

 

 

Step 5: 결과는 아래와 같습니다.

 

 

[전체 소스 코드]

 

	import 'package:flutter/material.dart';
	import 'package:country_calling_code_picker/picker.dart';
	void main() {
	runApp(const MyApp());
	}
	class MyApp extends StatelessWidget {
	const MyApp({Key? key}) : super(key: key);
	static final ValueNotifier<ThemeMode> themeNotifier =
	ValueNotifier(ThemeMode.light);
	@override
	Widget build(BuildContext context) {
	return ValueListenableBuilder(
	valueListenable: themeNotifier,
	builder: (context, value, child) {
	return MaterialApp(
	title: "Flutter App",
	darkTheme: ThemeData.dark(),
	themeMode: value,
	home: const HomePage(),
	);
	},
	);
	}
	}
	class HomePage extends StatefulWidget {
	const HomePage({Key? key}) : super(key: key);
	@override
	State<HomePage> createState() => _HomePageState();
	}
	class _HomePageState extends State<HomePage> {
	bool _isLightMode = true;
	@override
	void initState() {
	super.initState();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: const Text('Flutter App'),
	),
	body: Container(
	padding: const EdgeInsets.all(10),
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
	const Padding(
	padding: EdgeInsets.all(10),
	child: Text("테마 변경"),
	),
	Switch(
	value: _isLightMode,
	onChanged: (val) {
	setState(() {
	_isLightMode = val;
	});
	MyApp.themeNotifier.value =
	MyApp.themeNotifier.value == ThemeMode.light
	? ThemeMode.dark
	: ThemeMode.light;
	},
	),
	],
	),
	),
	);
	}
	}

view raw 055_main.dart hosted with ❤ by GitHub