Flutter状态管理插件 minimals_state_manager 的使用

minimals_state_manager 是一个轻量级的状态管理插件，旨在简化Flutter应用中的状态管理。它基于Flutter的原生功能（如InheritedWidget、ChangeNotifier、ValueNotifier等）来实现状态管理。

主要特性

Providers

• MinProvider：用于单一状态管理。
• MinMultiProvider：用于多个状态管理。

示例代码

class YourController1 extends ChangeNotifier {
  ValueNotifier<int> count = 0.minx;

  void increment() {
    count.value++;
    notifyListeners();
  }

  void decrement() {
    count.value--;
    notifyListeners();
  }
}

使用 MinProvider 或 MinMultiProvider：

// 使用 MinProvider
MinProvider(
  controller: YourController1(),
  child: YourPage(),
)

// 使用 MinMultiProvider
MinMultiProvider(
  controllers: [YourController1(), YourController2()],
  child: YourPage(),
)

MinService

MinService 用于保持控制器在整个应用生命周期内保持活跃状态。例如，购物车控制器可以在整个应用中保持状态。

MinMultiProvider(
  controllers: [
    DashboardController(),
    MinService.permanentController(CartController()),
  ],
  child: DashPage(),
)

Observable Widget

Observable widget 可以监听 ValueNotifier 的变化并更新UI。

$(controller.count, (count) => Text('Count $count'))

也可以使用 ValueListenableBuilder：

ValueListenableBuilder(
  valueListenable: controller.count,
  builder: (context, count, child) => Text('Count $count'),
)

使用步骤

安装插件

在 pubspec.yaml 文件中添加依赖：

dependencies:
  minimals_state_manager: <latest_version>

然后运行以下命令安装插件：

$ flutter pub add minimals_state_manager

示例代码

以下是一个完整的示例，展示如何使用 minimals_state_manager 插件。

main.dart

import 'package:flutter/material.dart';
import 'package:minimals_state_manager/minimals_state_manager.dart';

void main() {
  runApp(
    MaterialApp(
      home: MinProvider(
        controller: MyController(),
        child: const MyPage(),
      ),
    ),
  );
}

class MyController extends ChangeNotifier {
  final count = 0.minx;
  ValueNotifier<User> user = User().minx;

  void increment() {
    count.value++;
    notifyListeners();
  }

  void decrement() {
    count.value--;
    notifyListeners();
  }

  void refresh() {
    count.value = 0;
    notifyListeners();
  }

  void onChangedName(String str) {
    user.update((val) => val.name = str);
    notifyListeners();
  }

  String? validateName(String? str) {
    return str?.length ?? 0 < 2 ? 'insert valid name' : null;
  }

  void onSaveName(String? newValue) {
    user.update((val) => val.name = newValue ?? '');
    notifyListeners();
  }
}

class User {
  User({this.name});
  String? name;
}

class MyPage extends StatelessWidget {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    final controller = MinProvider.use<MyController>(context);

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            backgroundColor: Colors.lightGreen,
            onPressed: () => controller.increment(),
            child: const Icon(Icons.add),
          ),
          const SizedBox(height: 16.0),
          FloatingActionButton(
            backgroundColor: Colors.redAccent,
            onPressed: () => controller.decrement(),
            child: const Icon(Icons.remove),
          ),
          const SizedBox(height: 16.0),
          FloatingActionButton(
            onPressed: () => controller.refresh(),
            child: const Icon(Icons.refresh),
          ),
        ],
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Check out the full example in the example folder'),
            Container(
              margin: const EdgeInsets.only(left: 32.0, right: 32.0, bottom: 32.0),
              child: Form(
                key: formKey,
                child: Column(
                  children: [
                    $(controller.user, (user) => Text(user.name ?? '')),
                    TextFormField(
                      onChanged: (value) => controller.onChangedName(value),
                      validator: (value) => controller.validateName(value),
                      onSaved: (newValue) => controller.onSaveName(newValue),
                    ),
                  ],
                ),
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    $(controller.count, (count) => Text('Count $count')),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}