Dev.dodo

저는 기본 시스템컬러가 아니라 디자인 가이드에 따른 컬러를 사용할 예정이기 때문에 다크모드를 커스텀해서 사용하려고합니다. 먼저 색상을 정의하겠습니다. Colors.dart라는 파일을 하나 생성해서 LightColors 클래스와 DarkColors 클래스를 만들어주었습니다. 상수값이고 전역적으로 접근해야할 클래스는 멤버를 static const로 작성해줍니다. ㄴ static으로 선언했기 때문에 인스턴스화없이 접근할 수 있고 const로 정적바인딩 되므로 런타임에서 값을 변경할 수 없어 안전합니다. 이 작업은 디자인 가이드에 붙은 컬러 이름을 사용하기 위해 작성한 것이고 건너뛰어도 무방합니다. 추가적으로 색상값을 지정할땐 알파값까지 지정하는 것을 추천드립니다. // Colors.dart import 'pa..

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(), ); } } 그 다음 테마를 변경할 버튼을 하나 만들어보겠습니..