[flutter] FloatingActionButton을 사용하여 다크모드 전환 기능 구현하기

11 Dec 2023

flutter

다크 테마 또는 다크 모드는 현대적인 앱 UI의 기본 요소 중 하나로, 사용자가 앱을 사용하는 동안 시각적인 피로를 줄여주고 저조도 환경에서 더 나은 가독성을 제공합니다. Flutter 애플리케이션에서는 사용자가 다크모드를 켜거나 끌 수 있는 기능을 구현하여 사용자 정의를 높일 수 있습니다.

이번 포스팅에서는 Flutter에서 FloatingActionButton을 사용하여 다크모드 전환 기능을 구현하는 방법에 대해 알아보겠습니다.

요구사항

Flutter SDK가 설치되어 있어야 합니다.
Flutter 애플리케이션이 설정되어 있어야 합니다.

스텝

1. 다크모드 지원을 위한 테마 설정

맨 처음으로, 앱의 다크모드를 지원하기 위해 MaterialApp의 theme 및 darkTheme 속성을 설정해야 합니다.

import 'package:flutter/material.dart';

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

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

2. FloatingActionButton 추가

다음으로, 다크모드 전환 기능을 위한 FloatingActionButton을 추가해야 합니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('다크모드 테스트')),
      body: Center(
        child: Text('다크모드 전환 기능', style: TextStyle(fontSize: 20)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 다크모드 토글 코드 추가
        },
        child: Icon(Icons.lightbulb_outline),
      ),
    );
  }
}

3. 다크모드 토글 기능 추가

마지막으로, FloatingActionButton이 클릭될 때마다 다크모드가 토글되도록 코드를 추가합니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('다크모드 테스트')),
      body: Center(
        child: Text('다크모드 전환 기능', style: TextStyle(fontSize: 20)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isDarkMode = !_isDarkMode;
          });
          if (_isDarkMode) {
            DynamicTheme.of(context).setThemeData(darkTheme);
          } else {
            DynamicTheme.of(context).setThemeData(lightTheme);
          }
        },
        child: Icon(_isDarkMode ? Icons.brightness_3 : Icons.wb_sunny),
      ),
    );
  }
}

위 코드에서 DynamicTheme.of(context).setThemeData 메서드의 사용을 위해서 dynamic_theme 패키지가 필요합니다.

이제 다크모드 전환 기능이 구현되었습니다. FloatingActionButton을 클릭하여 앱의 다크모드를 켜거나 끌 수 있습니다.

다음과 같이 해당 기능을 적용하여 Flutter 애플리케이션에서 다크모드를 편리하게 전환할 수 있습니다.

더 많은 Flutter 튜토리얼 및 팁은 Flutter 공식 문서에서 찾아볼 수 있습니다.