[Flutter][GetX] GetX로 다크모드 만들기 (1)

GetX를 사용하면 다크모드 변경 자체는 매우 간단합니다.

 

 

먼저 main.dart > MyApp 부분에 theme와 darkTheme를 추가해줍니다.

import 'package:get/get.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

 

 

그 다음 테마를 변경할 버튼을 하나 만들어보겠습니다.

ElevatedButton(
  child: Text('Dark/Light'),
  onPressed: () {
    // 다크모드가 토글됩니다.
    Get.isDarkMode?
    	Get.changeTheme(ThemeData.light()):
    	Get.changeTheme(ThemeData.dark());
  },
),

 

 

완성입니다.

 

 

기본 시스템 컬러는 반전이 되나, 저는 딱 제가 원하는 컬러로 반전시키고 싶어서 색상을 커스텀을 하려고합니다.

다음 글에서 커스텀하는 방법을 알아보겠습니다.