[flutter] 플러터(Flutter)에서 앱 테마 변경 및 다크 모드 지원하기

18 Dec 2023

flutter

플러터(Flutter)로 개발한 앱이 다양한 사용자 경험을 제공하기 위해 앱 테마 변경과 다크 모드 지원이 중요하다. 이번 블로그에서는 플러터에서 앱 테마를 변경하고 다크 모드를 지원하는 방법에 대해 알아보겠다.

앱 테마 변경

앱 테마를 변경하여 앱의 디자인을 변화시키고 사용자에게 선택권을 부여할 수 있다. 플러터에서는 Theme 위젯을 사용하여 간단하게 앱 테마를 변경할 수 있다.

다음은 Theme 위젯을 사용하여 앱의 기본 테마를 변경하는 예제이다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

primarySwatch 속성에는 사용할 색상을 지정할 수 있으며, Colors 클래스로 제공되는 여러 색 중 하나를 선택할 수 있다.

다크 모드 지원

사용자가 시스템의 다크 모드를 설정했을 때 앱이 자동으로 다크 모드로 전환되도록 지원하는 것이 중요하다. 플러터에서는 다크 모드를 지원하기 위해 ThemeData 클래스와 MediaQuery 클래스를 사용할 수 있다.

다음은 다크 모드를 지원하는 예제이다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final brightness = MediaQuery.of(context).platformBrightness;
    return Scaffold(
      appBar: AppBar(
        title: Text('다크 모드 지원 예제'),
      ),
      body: Center(
        child: Text(
          brightness == Brightness.dark ? '다크 모드' : '라이트 모드',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

위의 예제에서는 MediaQuery.of(context).platformBrightness를 통해 시스템의 밝기 속성을 확인하여 다크 모드와 라이트 모드를 구분하여 화면에 표시한다.

앱 테마 변경과 다크 모드 지원은 사용자 경험에 큰 영향을 미치므로, 플러터를 사용하여 앱을 개발하는 경우 이러한 기능을 적절히 활용하는 것이 좋다.

위의 내용은 플러터 공식 문서를 참고하여 작성되었습니다.