[Flutter] 다크 모드 적용하기

Flutter Dart Mode

---

내가 필요해서 만든 앱이지만 혹시나 필요한 사람이 있을까 해서 스토어에 올려두었는데 몇 개월이 지나고 보니 몇몇 의견이 달려 있었다. 그 중 가장 많은 요구사항은 다크모드를 적용해 달라는 거였다. 나는 다크모드를 사용하지 않아서 전혀 신경쓰지 못하고 있었다.

특별히 뷰의 색상을 지정하지 않았다면 테마의 색상을 따라 간다.
이 경우에는 MaterialApp 을 Build 하는 부분에서 darkTheme: ThemeData.dark() 한 줄만 추가하면 된다.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        body: _getBody(),
      ),
    );
  }

나의 경우, 기본모드에서는 primaryColor를 white로 변경하였고, 다크모드에서는 다크모드의 기본 테마를 따르도록 한 코드이다.

만약, 기본 테마 색상이 아닌 별도의 색상을 사용하고 싶다면 아래와 같이 다크모드인지를 검사하여 사용하는 방법이 있다.

_getBgColorByTheme() {
    final ThemeData theme = Theme.of(context);
    if (theme.brightness == Brightness.light) {
      return Colors.white;
    } else {
      return Colors.black;
    }
  }