Flutter의 동적 테마 - 어둡고 밝은 테마

앱에 밝고 어두운 테마를 추가하는 것은 오늘날의 앱 세계에서 필수 사항이 되었습니다. 대부분의 사람들은 눈에 꽤 편안하기 때문에 밝은 테마보다 어두운 테마를 선호하기 때문입니다.

이 튜토리얼에서는 매우 복잡한 코드 없이 가벼운 테마와 다트 테마 사이를 전환하는 간단한 Flutter 앱을 구현할 것입니다.

먼저 스위치가 포함된 간단한 UI를 만들어 보겠습니다. 이 스위치는 사용자 상호 작용에 따라 _light라는 변수를 true 또는 false로 변경합니다.

           Switch(
                  value: _light, 
                  onChanged: (toggle){

                  }),

앱의 상태를 변경하고 있기 때문에 여기에서 상태 저장 위젯을 사용해야 합니다.

밝음을 어둡게 변경하는 가장 간단한 방법은 MaterialApp 위젯의 테마를 밝음에서 어두움으로 변경하는 것입니다. 이를 위해서는 어둡고 밝은 두 가지 테마가 필요합니다.

            ThemeData _darkTheme = ThemeData(
              accentColor: Colors.red,
              brightness: Brightness.dark,
              primaryColor: Colors.amber,

            );

            ThemeData _lightTheme = ThemeData(
              accentColor: Colors.pink,
              brightness: Brightness.light,
              primaryColor: Colors.blue
            );

테마를 정의할 때 필요에 따라 accentColor 및 primaryColour를 선택할 수 있습니다. 중요한 부분은 각 ThemeData 클래스에 대해 어둡거나 밝은 밝기를 언급해야 한다는 것입니다.

다음은 _light 변수 값을 기반으로 MaterialApp 테마 속성을 밝은 ThemeData 개체 또는 어두운 개체로 설정할 수 있습니다.

        MaterialApp(
              theme: _light ? _lightTheme : _darkTheme,
              title: 'Material App')

스위치 위젯 onChange 콜백에 setState를 적용하는 것을 잊지 마십시오.

                Switch(
                  value: _light, 
                  onChanged: (toggle){
                    setState(() {
                      _light = toggle;
                    });
                  })

이제 스위치를 전환하면 앱 테마가 멋지게 변경되는 것을 볼 수 있습니다.

하드 코딩 테마 값

테마를 변경하고 있기 때문에 텍스트 및 버튼 색상과 같은 일부 요소를 하드코딩하지 않는 것이 좋습니다. 하드 코드 색상 중 일부는 어둡거나 밝은 테마에서 제대로 표시되지 않을 수 있기 때문입니다.

버튼 색상 변경

buttonColor 속성을 설정하여 기본 버튼 색상을 설정할 수 있습니다. 또한 비활성화 색상, 높이, 패딩 등을 변경하기 위해 버튼을 더 많이 제어하려면 버튼 테마를 만들 수 있습니다.

     ThemeData _darkTheme = ThemeData(
          accentColor: Colors.red,
          brightness: Brightness.dark,
          primaryColor: Colors.amber,

          buttonTheme: ButtonThemeData(
            buttonColor: Colors.amber,
            disabledColor: Colors.black
          )
        );

시스템 테마에 따라 테마 조정

휴대폰의 어두운 모양을 활성화한 경우 MaterialApp 위젯에서 darkTheme 속성을 지정하여 기본 어두운 테마를 설정할 수 있습니다. 이전에 만든 동일한 어두운 테마 데이터 개체를 사용할 수 있습니다. 이제 휴대폰을 다크 모드로 전환하면 앱이 변경 없이 자동으로 다크 모드로 전환됩니다. 이 경우 강제로 색상을 변경하기 때문에 토글에서 전환하면 작동하지 않습니다.

     MaterialApp(
          theme: _light ? _lightTheme : _darkTheme,
          title: 'Material App',
          darkTheme: _darkTheme)

선택한 테마를 지속적으로 유지

사용자가 애플리케이션을 닫아도 현재 선택된 테마를 유지하려면 현재 선택된 테마를 지속적으로 저장해야 합니다.

Flutter에서 공유 기본 설정 라이브러리를 사용하여 현재 선택한 테마를 저장하고 애플리케이션이 로드될 때 테마를 확인하고 설정할 수 있습니다.

종속성 추가 및 설치

 dependencies:
    shared_preferences: ^0.5.7+3

 flutter pub get

플러그인을 다트 코드로 가져오기

import 'package:shared_preferences/shared_preferences.dart';

이제 이 플러그인 기능을 사용할 수 있습니다. 먼저 테마 값을 저장하고 검색하는 두 가지 방법을 만듭니다.

 Future <SharedPreferences> _prefs = SharedPreferences.getInstance();

        _saveTheme() async{
            SharedPreferences pref = await _prefs;
            pref.setBool('theme', _light);
          }

          _getTheme() async{
            _lightF = _prefs.then((SharedPreferences prefs) {
                return prefs.getBool('theme') != null ? prefs.getBool('theme') : true;
            });
            _light = await _lightF;
          }

initState 메서드가 호출되면 _getTheme 메서드를 호출하여 현재 저장된 테마를 가져올 수 있습니다.

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getTheme();
  }

공유 기본 설정에서 값을 가져오고 값을 공유 기본 설정으로 설정하는 것은 비동기 방식으로 발생합니다. 따라서 검색 부분이 완료된 후 FutureBuilder 위젯을 사용하여 테마를 할당해야 합니다.

따라서 MaterialApp 위젯을 FutureBuilder 위젯 안에 래핑하고 future 속성을 _lightF 변수 값으로 설정할 수 있습니다.

마지막으로 사용자가 스위치를 어두운 상태에서 밝은 상태로 또는 그 반대로 변경할 때 _saveTheme 메서드를 호출해야 합니다.

        Switch(value: _light, onChanged: (state){
                  setState(() {
                    _light = state;
                  });
                  _saveTheme();
                }),

애플리케이션이 이미 실행 중인 경우 실행 중인 프로세스를 중지하고 애플리케이션을 다시 실행하여 변경 사항을 확인합니다.

어둡고 밝은 테마 - 파트 1


어둡고 밝은 테마 - 파트 2


나와 연결 - | Blog |