Flutter插件phinx_provider_package的使用

Flutter插件phinx_provider_package的使用

phinx_provider_package 是一个用于管理状态的应用程序的 Flutter 插件。它提供了工具来使用 Provider 管理应用程序的状态。

Flutter插件phinx_provider_package特性

• ServiceProvider: 这是一个基于 ChangeNotifier 的包装类，用于管理特定服务的状态。
• MultiServiceProvider: 这个类扩展了 ChangeNotifier，允许你在一个单一的提供者下管理多个服务的状态。
• LinkedProviderManager: 它允许你在不依赖于 Flutter 上下文的情况下注册和获取提供者实例。
• LinkedProvider: 这个类扩展了 ListenableProvider 并允许自动连接到 LinkedProviders。
• LinkedProviders: 这是一个 widget，用于管理多个提供者，并自动注册 LinkedProviders。
• LinkedWidget: 这是一个抽象 widget，简化了与 LinkedProviderManager 注册的提供者进行绑定的过程。

Flutter插件phinx_provider_package开始使用

要开始使用该插件，你需要将其添加到你的 pubspec.yaml 文件中。

在 dependencies 部分添加以下代码：

dependencies:
  flutter:
    sdk: flutter
  phinx_provider_package: 0.1.3

使用示例

ServiceProvider

ServiceProvider 是一个抽象类，它扩展了 ChangeNotifier 以管理服务的状态。

基本示例

在这个例子中，MyServiceProvider 扩展了 ServiceProvider 来管理一个更新值的服务。

import 'package:phinx_provider_package/provider/service_provider.dart';

class MyServiceProvider extends ServiceProvider<int> {
  MyServiceProvider() : super(data: 0);

  Future<void> updateData() async {
    await baseCall(() async {
      // 模拟服务调用
      await Future.delayed(Duration(seconds: 1));
      data = data + 1;
    });
  }
}

void main() {
  MyServiceProvider provider = MyServiceProvider();

  provider.updateData().then((_) {
    print(provider.data); // 输出 "1"
  });
}

MultiServiceProvider

MultiServiceProvider 扩展了 ChangeNotifier，允许你在同一个提供者下管理多个服务的状态。

基本示例

假设你有两个不同的服务 ServiceA 和 ServiceB，并且你想同时管理它们的状态。

import 'package:phinx_provider_package/provider/multi_service_provider.dart';

class MyMultiServiceProvider extends MultiServiceProvider<Map<String, int>> {
  MyMultiServiceProvider() : super(data: {});

  Future<void> fetchData(String serviceKey) async {
    await baseCall(serviceKey, () async {
      switch (serviceKey) {
        case 'serviceA':
          // 模拟调用服务A
          await Future.delayed(Duration(seconds: 1));
          data['serviceA'] = (data['serviceA'] ?? 0) + 1;
          break;
        case 'serviceB':
          // 模拟调用服务B
          await Future.delayed(Duration(seconds: 1));
          data['serviceB'] = (data['serviceB'] ?? 0) + 1;
          break;
        default:
          throw Exception('Unknown service key: $serviceKey');
      }
    });
  }
}

void main() {
  MyMultiServiceProvider provider = MyMultiServiceProvider();

  provider.fetchData('serviceA').then((_) {
    print(provider.data['serviceA']); // 输出 "1"
  });

  provider.fetchData('serviceB').then((_) {
    print(provider.data['serviceB']); // 输出 "1"
  });
}

LinkedProviderManager

LinkedProviderManager 允许你集中管理和获取提供者实例，而无需直接访问 Flutter 上下文。

基本示例

假设你有一个名为 CounterProvider 的提供者，用于管理计数器。

import 'package:phinx_provider_package/provider/linked_provider_manager.dart';

class CounterProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  LinkedProviderManager().register(CounterProvider(), name: "counterProvider");

  CounterProvider provider = LinkedProviderManager().get<CounterProvider>(name: "counterProvider");
  provider.increment();
  print(provider.count); // 输出 "1"
}

LinkedProvider

LinkedProvider 是一个扩展了 ListenableProvider 的类，允许自动连接到 LinkedProviders。

基本示例

在这个例子中，CounterProvider 是一个管理计数器的提供者。我们使用 LinkedProvider 将其注册到 widget 层次结构中。

import 'package:flutter/material.dart';
import 'package:phinx_provider_package/provider/linked_provider.dart';
import 'package:phinx_provider_package/widget/linked_providers.dart';

void main() {
  runApp(const MyApp());
}

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

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

class CounterProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LinkedProvider Example'),
      ),
      body: LinkedProviders(
        providers: [
          LinkedProvider(create: (_) => CounterProvider()),
        ],
        child: const Body(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final provider = Provider.of<CounterProvider>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Counter: ${provider.count}',
            style: const TextStyle(fontSize: 24),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            child: const Text('Increment Counter'),
            onPressed: () => provider.increment(),
          ),
        ],
      ),
    );
  }
}

LinkedProviders

LinkedProviders 是一个 widget，作为多个提供者的容器，并自动注册 LinkedProviders。

基本示例

在这里，我们使用 LinkedProviders 来管理 CounterProvider 和 OtherProvider。

import 'package:flutter/material.dart';
import 'package:phinx_provider_package/provider/linked_provider.dart';
import 'package:phinx_provider_package/widget/linked_providers.dart';

void main() {
  runApp(const MyApp());
}

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

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

class CounterProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class OtherProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Modal & Counter Example'),
      ),
      body: LinkedProviders(
        providers: [
          LinkedProvider(create: (_) => OtherProvider(), name: "counter"),
          LinkedProvider(create: (_) => CounterProvider())
        ],
        child: const Body(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    void showModal(BuildContext context) {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return const Alerta();
        },
      );
    }

    final provider = Provider.of<CounterProvider>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            child: const Text('Show Modal'),
            onPressed: () => showModal(context),
          ),
          const SizedBox(height: 20),
          Text(
            'Counter: ${provider.count}',
            style: const TextStyle(fontSize: 24),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            child: const Text('Increment Counter'),
            onPressed: () => provider.increment(),
          ),
          const InSameTree()
        ],
      ),
    );
  }
}

class Alerta extends LinkedWidget {
  const Alerta({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context, Linked linked) {
    final provider = linked.get<CounterProvider>();

    return AlertDialog(
      title: const Text('Modal Title'),
      content: Text('This is the content of the modal. ${provider.count}'),
      actions: <Widget>[
        TextButton(
          child: const Text('Increment'),
          onPressed: () {
            provider.increment();
          },
        ),
        TextButton(
          child: const Text('Close'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }
}

class InSameTree extends LinkedWidget {
  const InSameTree({super.key});

  [@override](/user/override)
  Widget build(BuildContext context, Linked linked) {
    final provider = linked.get<CounterProvider>();
    return Column(
      children: [
        const Text("In the same tree using LinkedWidget"),
        Text(provider.count.toString()),
      ],
    );
  }
}

LinkedWidget

LinkedWidget 是一个抽象 widget，它简化了与 LinkedProviderManager 注册的提供者进行绑定的过程。

基本示例

在这个例子中，Alerta 和 InSameTree 是使用 LinkedWidget 访问在 LinkedProviderManager 中注册的提供者的 widget。

import 'package:flutter/material.dart';
import 'package:phinx_provider_package/widget/linked_widget.dart';
import 'package:phinx_provider_package/provider/linked_provider.dart';

class Alerta extends LinkedWidget {
  const Alerta({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context, Linked linked) {
    final provider = linked.get<CounterProvider>();

    return AlertDialog(
      title: const Text('Modal Title'),
      content: Text('This is the content of the modal. ${provider.count}'),
      actions: <Widget>[
        TextButton(
          child: const Text('Increment'),
          onPressed: () {
            provider.increment();
          },
        ),
        TextButton(
          child: const Text('Close'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }
}

class InSameTree extends LinkedWidget {
  const InSameTree({super.key});

  [@override](/user/override)
  Widget build(BuildContext context, Linked linked) {
    final provider = linked.get<CounterProvider>();
    return Column(
      children: [
        const Text("In the same tree using LinkedWidget"),
        Text(provider.count.toString()),
      ],
    );
  }
}