Flutter状态管理插件unistate_provider的使用

Flutter状态管理插件unistate_provider的使用

unistate_provider 是一个用于Flutter的状态管理解决方案，它采用了provider模式，并且支持ValueListenable。以下是关于如何使用unistate_provider的一些关键信息。

特性

• 简单的provider模式实现
• 支持与ValueListenable集成
• 提供上下文扩展以进行观察（watch）和读取（read）操作
• 类型安全的状态管理

使用方法

基本Provider使用

// 使用静态方法
final value = UnistateProvider.of<int>(context);

其他信息

此包是Unistate生态系统的一部分，旨在与unistate_adapter无缝协作。

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用unistate_provider。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    MultiUniState(
      notifiers: [
        // 可以在这里添加不同的notifiers
      ],
      child: const MyApp(),
    ),
  );
}

class CounterPage extends StatelessWidget {
  const CounterPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final counterBloc = CounterBloc();
    final counterCubit = CounterCubit();
    final counterProvider = CounterProvider();
    debugPrint('build CounterPage');
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Column(
        spacing: 20,
        children: [
          const NotifierCounterDisplay(),
          ValueListenableBuilder(
              valueListenable: counterProvider,
              builder: (context, state, child) {
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Provider: $state'),
                      const SizedBox(height: 20),
                    ],
                  ),
                );
              }),
          ValueListenableBuilder(
              valueListenable: counterCubit,
              builder: (context, state, child) {
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Cubit: $state'),
                      const SizedBox(height: 20),
                    ],
                  ),
                );
              }),
          ValueListenableBuilder(
            valueListenable: counterBloc,
            builder: (context, state, child) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Bloc: $state'),
                    const SizedBox(height: 20),
                  ],
                ),
              );
            },
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  counterBloc.add(Increment());
                  counterCubit.increment();
                  counterProvider.value++;
                  context.read<CounterProvider>()?.increment();
                },
                child: const Text('Increment'),
              ),
              ElevatedButton(
                onPressed: () {
                  counterBloc.add(Decrement());
                  counterCubit.decrement();
                  counterProvider.decrement();
                  context.read<CounterProvider>()?.decrement();
                },
                child: const Text('Decrement'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class NotifierCounterDisplay extends StatelessWidget {
  const NotifierCounterDisplay({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    debugPrint('build NotifierCounterDisplay');
    final counterNotifier = context.watch<CounterProvider>();
    return Text(
      'Counter: ${counterNotifier?.value ?? 0}',
      style: TextStyle(fontSize: 24),
    );
  }
}