공급자 패키지를 사용한 Flutter 상태 관리

더 이상 고민하지 않고 앱에서 다크 모드를 구현하고 공급자 패키지를 사용하여 Flutter 상태를 관리하는 방법에 대해 설명하는 오늘의 기사부터 시작하겠습니다.

Flutter에서 상태 관리란 무엇인가요?

상태 관리는 비즈니스 논리 요구 사항에 따라 UI 컨트롤의 상태를 관리하는 것을 의미합니다. 대부분의 경우 하나 이상의 컨트롤이 서로 종속되기 때문입니다.

참고: Flutter에서 위젯의 상태를 변경하려면 setState 메서드를 사용합니다.

예

ToDo 앱이 있고 목록에 항목을 추가했다고 가정해 보겠습니다. 항목을 보려면 페이지를 새로 고쳐야 합니다. 이 상황에서 상태 관리가 시작되어 페이지를 다시 로드하지 않고도 ToDo 항목을 추가, 편집 및 삭제할 수 있습니다.

다음link을 방문하여 Flutter 상태 관리에 대해 자세히 알아볼 수 있습니다.

공급자 패키지는 무엇입니까?

공급자 패키지는 상태를 가능한 한 깔끔하게 처리하기 위해 Remi Rousselet에 의해 생성됩니다. Provider의 위젯은 상태 변경을 인식하는 즉시 업데이트됩니다.

예시

앱이 있고 다크 모드 기능을 추가하고 싶지만 다크 모드를 활성화하면 단일 페이지가 아니라 전체 앱의 색 구성표가 변경되어야 한다고 가정해 보겠습니다. setState는 전체 앱의 변경 사항을 반영하지 않으므로 이 시점에서 공급자 패키지가 필요합니다.

공급자 패키지를 사용하기 전에 몇 가지 방법을 이해해 봅시다.

ChangeNotifierProvider: 공급자 패키지를 활성화하기 위한 앱의 진입점입니다.

Provider.of<>(): 데이터 홀더(ChangeNotifier)와 소비자 간에 상호 작용합니다.

소비자: ChangeNotifier의 데이터를 사용합니다.

ChangeNotifier: ChangeNotifier 클래스는 데이터를 보유합니다.

notifierListener: 이 방법은 setState와 동일합니다.

자세한 내용은 여기link에서 확인할 수 있습니다.

Flutter 앱에서 다크 모드 구현

먼저 pubspec.yaml 파일에 이 두 패키지를 포함해야 합니다.

provider: ^6.0.2
shared_preferences: ^2.0.13

pubspec.yaml에 이 두 종속성을 추가한 후 pub get을 수행합니다.

lib 폴더 아래에 이러한 파일을 생성합니다.



테마/theme_color_scheme.dart

import 'package:flutter/material.dart';

class ThemeColor {
  static ThemeData themeData(bool isDarkMode, BuildContext context) {
    return ThemeData(
      primarySwatch: Colors.blue,
      primaryColor: isDarkMode ? Colors.black : Colors.white,
      backgroundColor: isDarkMode ? Colors.black : Color(0xFFF1F5FB),
      indicatorColor: isDarkMode ? Color(0xFF0E1D36) : Color(0xFFCBDCF8),
      buttonColor: isDarkMode ? Color(0xFF3B3B3B) : Color(0xff133762),
      hintColor: isDarkMode ? Color(0xFF280C0B) : Color(0xff133762),
      highlightColor: isDarkMode ? Color(0xFF372901) : Color(0xff133762),
      hoverColor: isDarkMode ? Color(0xFF3A3A3B) : Color(0xff133762),
      focusColor: isDarkMode ? Color(0xFF0B2512) : Color(0xff133762),
      disabledColor: Colors.grey,
      textSelectionColor: isDarkMode ? Colors.white : Colors.black,
      cardColor: isDarkMode ? Color(0xFF151515) : Colors.white,
      canvasColor: isDarkMode ? Colors.black : Colors.grey[50],
      brightness: isDarkMode ? Brightness.dark : Brightness.light,
      buttonTheme: Theme.of(context).buttonTheme.copyWith(
          colorScheme: isDarkMode ? ColorScheme.dark() : ColorScheme.light()),
      appBarTheme: AppBarTheme(
        elevation: 0,
      ),
    );
  }
}

테마/theme_preference.dart

import 'package:shared_preferences/shared_preferences.dart';

class ThemePreference {
  static const theme_status = "THEMESTATUS";

  setDarkTheme(bool value) async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    preferences.setBool(theme_status, value);
  }

  Future<bool> getTheme() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    return preferences.getBool(theme_status) ?? false;
  }
}

테마/theme_provider.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter_dark_mode/themes/theme_preference.dart';

class ThemeProvider with ChangeNotifier {
  ThemePreference themePreference = ThemePreference();
  bool _darkTheme = false;

  bool get darkTheme => _darkTheme;

  set darkTheme(bool value) {
    _darkTheme = value;
    themePreference.setDarkTheme(value);
    notifyListeners();
  }
}

스크린/home_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_dark_mode/themes/theme_provider.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    final themeChange = Provider.of<ThemeProvider>(context);
    void toggleSwitch(bool value) {
      if (themeChange.darkTheme == false) {
        setState(() {
          themeChange.darkTheme = true;
        });
      } else {
        setState(() {
          themeChange.darkTheme = false;
        });
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("Dark Theme Demo"),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          child: Column(
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      "Dark theme",
                      style: TextStyle(fontSize: 18),
                    ),
                    Switch(
                      onChanged: toggleSwitch,
                      value: themeChange.darkTheme,
                    ),
                  ],
                ),
              ),
              const Divider(),
            ],
          ),
        ),
      ),
    );
  }
}

메인 다트

import 'package:flutter/material.dart';
import 'package:flutter_dark_mode/screens/home_screen.dart';
import 'package:flutter_dark_mode/themes/theme_color_scheme.dart';
import 'package:flutter_dark_mode/themes/theme_provider.dart';
import 'package:provider/provider.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeProvider themeChangeProvider = ThemeProvider();

  @override
  void initState() {
    super.initState();
    getCurrentAppTheme();
  }

  void getCurrentAppTheme() async {
    themeChangeProvider.darkTheme =
        await themeChangeProvider.themePreference.getTheme();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) {
        return themeChangeProvider;
      },
      child: Consumer<ThemeProvider>(
        builder: (BuildContext context, value, child) {
          return MaterialApp(
            title: 'Dark Theme',
            debugShowCheckedModeBanner: false,
            theme: ThemeColor.themeData(themeChangeProvider.darkTheme, context),
            home: HomeScreen(),
          );
        },
      ),
    );
  }
}

모든 것이 완료되었습니다. 지금 앱을 실행하세요.




GitHubrepository에서 소스 코드를 다운로드할 수 있습니다.

결론

이 문서에서는 공급자 패키지를 사용하여 Flutter 앱 상태를 관리하고 앱에서 어두운 모드 기능을 만드는 방법을 보여줍니다. 이 글이 마음에 드셨다면 공유, 좋아요, 댓글 부탁드립니다.

이 기사의 후원자: UniqueApps