Flutter의 적응형 테마

Flutter 앱에서 밝고 어두운 테마에 대한 지원을 추가하는 가장 쉬운 방법입니다. 밝거나 어두운 테마를 수동으로 설정할 수 있으며 시스템을 기반으로 테마를 정의할 수도 있습니다(현재 Android에서만 작동). 또한 앱을 다시 시작해도 테마 모드 변경 사항을 유지합니다.

설치

pubspec.yaml에 다음 종속성을 추가하십시오.

dependencies:

adaptive_theme: ^1.0.0

용법

테마를 적용하려면 MaterialApp을 AdaptiveTheme로 래핑해야 합니다.

import 'package:adaptive\_theme/adaptive\_theme.dart';

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return AdaptiveTheme(

light: ThemeData(

brightness: Brightness.light,

primarySwatch: Colors.red,

accentColor: Colors.amber,

),

dark: ThemeData(

brightness: Brightness.dark,

primarySwatch: Colors.red,

accentColor: Colors.amber,

),

initial: AdaptiveThemeMode.light,

builder: (theme, darkTheme) => MaterialApp(

title: 'Adaptive Theme Demo',

theme: theme,

darkTheme: darkTheme,

home: MyHomePage(),

),

);

}

}

테마 모드 변경

이제 위에서 언급한 대로 앱을 초기화했습니다. 테마 모드를 변경하는 것은 매우 쉽고 간단합니다: 밝음에서 어두움으로, 어두움에서 밝음으로 또는 시스템 기본값으로.

// sets theme mode to dark

AdaptiveTheme.of(context).setDark();

// sets theme mode to light

AdaptiveTheme.of(context).setLight();

// sets theme mode to system default

AdaptiveTheme.of(context).setSystem();

주의 사항

비지속성 테마 변경

This is only useful in scenarios where you load your themes dynamically from network in the splash screen or some initial screens of the app. Please note that AdaptiveTheme does not persist the themes, it only persists the theme modes(light/dark/system). Any changes made to the provided themes won’t be persisted and you will have to do the same changes at the time of the initialization if you want them to apply every time app is opened. e.g changing the accent color.

SharedPreferences 사용

This package uses sharedpreferences plugin internally to persist theme mode changes. If your app uses sharedpreferences which might be the case all the time, clearing your sharedpreferences at the time of logging out or signing out might clear these preferences too. Be careful not to clear these preferences if you want it to be persisted.

AdaptiveTheme.prefKey

모든 기본 설정을 지우는 동안 위의 키를 사용하여 제외할 수 있습니다.

또는 기본 설정을 지운 후 AdaptiveTheme.persist() 메서드를 호출하여 아래와 같이 다시 지속 가능하도록 만들 수 있습니다.

final prefs = await SharedPreferences.getInstance();

await pref.clear();

AdaptiveTheme.persist();

for live example of adaptive_theme : click here

for more check this out