Flutter 앱에서 밝은 테마와 어두운 테마(다중 테마)를 구현하는 가장 간단하고 쉬운 방법

이 기사에서는 가장 간단하고 쉬운 방법으로 앱에 어두운 테마를 구현하는 방법을 설명합니다. 이 방법을 사용하면 원하는 만큼 테마를 구현하고 필요에 따라 고유한 색 구성표를 지정할 수 있습니다. 더 이상하지 않고 시작합시다!

이 기사 제공자와 shared_preferences에 필요한 두 개의 패키지가 있습니다. 왜 필요한가요?

공급자는 상태 관리를 위한 매우 좋은 솔루션이며 테마를 변경하여 앱의 상태를 변경해야 하므로 일종의 상태 관리 솔루션이 필요했고 공급자가 이를 해결하기 위해 왔습니다. 우리가 사용할 다른 패키지는 shared_preferences입니다. 이 패키지는 파일 시스템에 대한 모든 정보를 저장하는 데 사용되며 우리가 사용하는 이유는 사용자가 원하는 테마를 영구적으로 저장해야 매번 변경할 필요가 없기 때문입니다.

Pubspec.yaml

먼저 pubspec.yaml 파일에 provider 및 shared_preferences를 종속 항목으로 추가합니다.

dependencies:  
  shared_preferences: ^0.5.10  
  provider: ^4.3.2+2

StorageManger.dart

이제 lib 폴더에서 다음 코드를 사용하여 storagemanager.dart 파일을 만듭니다. 이 파일은 선택한 테마를 파일 시스템에 영구적으로 저장하는 데 사용됩니다.

import 'package:shared_preferences/shared_preferences.dart';  

class StorageManager {  
  static void saveData(String key, dynamic value) async {  
    final prefs = await SharedPreferences.getInstance();  
    if (value is int) {  
      prefs.setInt(key, value);  
    } else if (value is String) {  
      prefs.setString(key, value);  
    } else if (value is bool) {  
      prefs.setBool(key, value);  
    } else {  
      print("Invalid Type");  
    }  
  }  

  static Future<dynamic> readData(String key) async {  
    final prefs = await SharedPreferences.getInstance();  
    dynamic obj = prefs.get(key);  
    return obj;  
  }  

  static Future<bool> deleteData(String key) async {  
    final prefs = await SharedPreferences.getInstance();  
    return prefs.remove(key);  
  }  
}

이 코드 스니펫에서는 먼저 공유 기본 설정 패키지를 가져왔습니다. 그런 다음 파일 시스템에서 데이터를 저장, 읽기 및 삭제하는 세 가지 정적 메서드가 있는 StorageManger 클래스를 만들었습니다. 데이터 저장 기능은 키와 값을 파일 시스템에 기록합니다. 진행하면서 테마 관리자 파일에서 이러한 메서드를 호출하는 방법을 확인할 수 있습니다. 한 가지 더 눈치채셨을 수도 있는 것은 이러한 메서드가 비동기라는 것입니다. 그 이유는 파일 시스템에서 읽거나 삭제하는 데 시간이 걸리기 때문에 비동기 함수를 사용하면 메인 스레드를 차단하지 않기 때문입니다.

ThemeManager.dart

이제 thememanager.dart 파일을 살펴보십시오.

import 'package:flutter/material.dart';  
import '../services/storage_manager.dart';  

class ThemeNotifier with ChangeNotifier {  
  final darkTheme = ThemeData(  
    primarySwatch: Colors.grey,  
    primaryColor: Colors.black,  
    brightness: Brightness.dark,  
    backgroundColor: const Color(0xFF212121),  
    accentColor: Colors.white,  
    accentIconTheme: IconThemeData(color: Colors.black),  
    dividerColor: Colors.black12,  
  );  

  final lightTheme = ThemeData(  
    primarySwatch: Colors.grey,  
    primaryColor: Colors.white,  
    brightness: Brightness.light,  
    backgroundColor: const Color(0xFFE5E5E5),  
    accentColor: Colors.black,  
    accentIconTheme: IconThemeData(color: Colors.white),  
    dividerColor: Colors.white54,  
  );  

  ThemeData _themeData;  
  ThemeData getTheme() => _themeData;  

  ThemeNotifier() {  
    StorageManager.readData('themeMode').then((value) {  
      print('value read from storage: ' + value.toString());  
      var themeMode = value ?? 'light';  
      if (themeMode == 'light') {  
        _themeData = lightTheme;  
      } else {  
        print('setting dark theme');  
        _themeData = darkTheme;  
      }  
      notifyListeners();  
    });  
  }  

  void setDarkMode() async {  
    _themeData = darkTheme;  
    StorageManager.saveData('themeMode', 'dark');  
    notifyListeners();  
  }  

  void setLightMode() async {  
    _themeData = lightTheme;  
    StorageManager.saveData('themeMode', 'light');  
    notifyListeners();  
  }  
}

이 파일에서 먼저 이전에 생성한 storagemanager를 가져온 다음 테마를 정의하기 위해 material.dart를 가져왔습니다.

그런 다음 ChangeNotifier 믹스인을 사용하여 ThemeNotifier 클래스를 만들었습니다.

ChangeNotifier is a simple class included in the Flutter SDK which provides change notification to its listeners. In other words, if something is a ChangeNotifier, you can subscribe to its changes. You can know more about mixins here.

다음으로 테마 데이터로 밝고 어두운 테마 변수를 정의했습니다. 원하는 대로 고유한 색상을 지정할 수 있습니다. 또한 다양한 색 구성표로 여러 테마 개체를 만들어 더 많은 사용자 정의를 제공할 수 있습니다. ThemeNotifier Constructor에서 먼저 파일 시스템에 저장된 테마가 있는지 확인하고, 그렇다면 해당 테마로 테마 알리미를 초기화합니다. 그렇지 않으면 _themedata 변수가 기본적으로 가벼운 테마로 초기화됩니다. 또한 다른 테마로 전환하기 위해 위젯 트리에서 호출할 수 있는 setLightTheme 및 setDarkTheme 메서드가 있습니다.
_themedata 객체가 변경되었음을 클라이언트에 알리기 위해 notifyListener를 호출합니다.

메인 다트

마지막으로 여기 우리의 main.dart 파일이 있습니다.

import 'package:flutter/material.dart';  
import './src/theming/theme_manager.dart';  
import 'package:provider/provider.dart';  

void main() {  
  return runApp(ChangeNotifierProvider<ThemeNotifier>(  
    create: (_) => new ThemeNotifier(),  
    child: MyApp(),  
  ));  
}  

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Consumer<ThemeNotifier>(  
      builder: (context, theme, _) => MaterialApp(  
        theme: theme.getTheme(),  
        home: Scaffold(  
          appBar: AppBar(  
            title: Text('Hybrid Theme'),  
          ),  
          body: Row(  
            children: [  
              Container(  
                child: FlatButton(  
                  onPressed: () => {  
                    print('Set Light Theme'),  
                    theme.setLightMode(),  
                  },  
                  child: Text('Set Light Theme'),  
                ),  
              ),  
              Container(  
                child: FlatButton(  
                  onPressed: () => {  
                    print('Set Dark theme'),  
                    theme.setDarkMode(),  
                  },  
                  child: Text('Set Dark theme'),  
                ),  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}

runApp 메서드에서 기본적으로 앱의 루트 위젯인 MyApp을 ThemeNotifier로 래핑했습니다. 그렇게 함으로써 우리는 위젯 트리 내부 어디에서나 테마에 액세스할 수 있고 테마를 빠르게 전환하기 위해 setLightTheme 또는 setDarkTheme 함수를 호출할 수 있습니다.

MyApp 위젯에서 ThemeNotifier 유형의 Consumer를 사용하여 테마 변수 내에서 테마 데이터를 가져오고 MaterialApp에서 테마로 제공했습니다.

최종 출력:

테이크아웃:

무슨 일이 일어나고 있는지 이해하고 싶지 않다면 두 개의 thememanager 및 storagemanager 파일을 다운로드하고 main.dart 파일에서 ThemeNotifier 공급자로 앱을 래핑하면 앱에 어둡고 밝은 테마가 구현됩니다!

Github:

Here은 github 프로젝트에 대한 링크입니다. 별표 표시하는 것을 잊지 마세요

, facebook , github에서 팔로우하세요.

질문이 있으시면 아래 의견에 언급하십시오!

게시물 The most simple and easy way to Implement light theme and dark theme (Multiple themes) in your flutter App이 Milddev에 처음 나타났습니다.