내용 보기

작성자

관리자 (IP : 192.168.0.1)

날짜

2022-12-24 00:57

제목

[Flutter] [스크랩] 다크 모드 적용하기

App Dark 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;
    }
  }

출처1

https://velog.io/@dal-pi/Flutter-%EB%8B%A4%ED%81%AC-%EB%AA%A8%EB%93%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

출처2

(0 Bytes)
목록