flutter状态管理provider（使用 Provider 包进行 Flutter 状态管理）-慕源网

在今天的文章中，我将讨论使用 provider 包进行 Flutter 状态管理，以及使用 provider 包在应用程序中实现暗模式，所以让我们立即开始吧。

Flutter 中的状态管理是什么？

状态管理是指根据业务逻辑需求管理 UI 控件的状态，因为通常一个或多个控件相互依赖。

注意
要在 Flutter 中更改小部件的状态，我们使用 setState 方法。

例子

假设您有一个 ToDo 应用程序，并且您已将一个项目添加到您的列表中。要查看该项目，您需要刷新页面。在这种情况下，状态管理就会发挥作用，您可以添加、编辑和删除 ToDo 项目，而无需刷新页面。

强烈推荐

海量程序代码，编程资源，无论你是小白还是大神研究借鉴别人优秀的源码产品学习成熟的专业技术强势助力帮你提高技巧与技能。在此处获取，给你一个全面升级的机会。只有你更值钱，才能更赚钱

如果你是初级程序员可以研究别人的代码提高技术，如果你喜欢搞网盟或者外包，可以让你快速建站，还等什么赶快关注吧，我们会持续输出相关资源

海量源码程序，学习别人的产品设计思维与技术实践

什么是provider package？

provider package由 Remi Rousselet 创建，以尽可能干净地处理状态。Provider 中的小部件一旦意识到状态的变化就会更新。

例子

假设您有一个应用程序，并且您想为其添加暗模式功能，但是当您启用暗模式时，它应该更改整个应用程序的配色方案，而不仅仅是单个页面。由于 setState 并不能反映整个应用程序的变化，因此我们此时需要一个提供程序包。

在使用provider包之前我们先了解一些方法：

ChangeNotifierProvider：这是应用程序启用提供程序包的入口点。
Provider.of<>()：数据持有者（ChangeNotifier）和消费者之间的交互。
Consumer：使用来自 ChangeNotifier 的数据。
ChangeNotifier：ChangeNotifier 类保存数据。
notifierListener：这个方法等价于setState。

有关更多信息，您可以查看此链接。

在 Flutter 应用中实现暗模式

首先，您必须在 pubspec.yaml 文件中包含这两个包。

将这两个依赖项添加到 pubspec.yaml 后做 pub get。

在您的 lib 文件夹下创建这些文件，

themes/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,
      ),
    );
  }
}

themes/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;
  }
}

themes/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();
  }
}

screens/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(),
            ],
          ),
        ),
      ),
    );
  }
}

main.dart

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(),
          );
        },
      ),
    );
  }
}

一切都完成了。立即运行您的应用程序。