Flutter通知管理插件get_notifier的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter通知管理插件get_notifier的使用

介绍

get_notifier 插件旨在结合 ChangeNotifier 和 GetIt DI（依赖注入）插件的功能，使它们能够协同工作。它可以帮助我们避免在应用程序的不同部分进行上下文跟踪。

功能

  • 使用 Get_It 插件注入单例或工厂依赖项，可以在代码的任何地方使用；
  • 使用 Consumer 小部件轻松执行 ChangeNotifier UI 变更；

入门指南

  1. 添加依赖项

    在 pubspec.yaml 文件中添加 get_it 和 get_notifier 依赖项：

    dependencies:
  ...
  get_notifier:
  get_it:

    然后运行以下命令以获取依赖项：

    flutter pub get

  2. 创建状态文件

    创建一个扩展 ChangeNotifier 的状态文件 app_model.dart：

    import 'package:flutter/material.dart';

class AppModel extends ChangeNotifier {
  int _counter = 0;

  // 获取计数器值
  int get counter => _counter;

  // 设置计数器值并通知监听者
  set counter(int val) {
    _counter = val;
    notifyListeners();
  }
}

  3. 注册依赖项

    在 main.dart 中注册 AppModel 和其他依赖项：

    import 'package:flutter/material.dart';
import 'package:get_notifier/get_notifier.dart';
import 'app_model.dart';
import 'service.dart';

// 全局 ServiceLocator
GetIt getIt = GetIt.instance;

void main() {
  getIt
    ..registerSingleton(AppModel(), signalsReady: true)
    ..registerFactory(() => Service());

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Get Notifier Example Page'),
    );
  }
}

  4. 分离状态和操作

    创建一个服务类 service.dart 来处理状态的变更操作：

    import 'app_model.dart';

class Service {
  final appModel = GetIt.I.get<AppModel>();

  void incrementCounter() {
    appModel.counter += 1;
  }

  void decrementCounter() {
    appModel.counter -= 1;
  }
}

在UI中使用

  1. 注入依赖项

    在需要的地方注入 AppModel 或 Service：

    final appModel = GetIt.I.get<AppModel>();

  2. 使用 Consumer 和 Worker

    • Consumer 用于构建响应式UI部分，当 notifyListeners() 被调用时会重建。
    • Worker 用于构建不响应 notifyListeners() 的静态UI部分。

    例如，在 MyHomePage 中使用 Consumer 和 Worker：

    import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:get_notifier/get_notifier.dart';
import 'app_model.dart';
import 'service.dart';

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Material(
      child: FutureBuilder(
          future: GetIt.I.allReady(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Scaffold(
                appBar: AppBar(
                  title: Text(title),
                ),
                body: Consumer2<AppModel, Service>(builder: (appModel, service, child) {
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Text(
                          'You have pushed the button this many times:',
                        ),
                        Text(
                          appModel.counter.toString(),
                          style: Theme.of(context).textTheme.headlineMedium,
                        ),
                        ElevatedButton(
                            onPressed: () {
                              appModel.counter += 1;
                            },
                            child: const Text('Straight Increment')),
                        ElevatedButton(onPressed: service.incrementCounter, child: const Text('Service Increment')),
                        ElevatedButton(
                            onPressed: () {
                              GetIt.I.get<AppModel>().counter += 1;
                            },
                            child: const Text('Other Increment'))
                      ],
                    ),
                  );
                }),
                floatingActionButton: Worker<Service>(builder: (s, child) {
                  return FloatingActionButton(
                    onPressed: () {
                      s.decrementCounter();
                    },
                    tooltip: 'Decrement',
                    child: const Icon(Icons.remove),
                  );
                }),
              );
            } else {
              return const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('Waiting for initialisation'),
                  SizedBox(
                    height: 16,
                  ),
                  CircularProgressIndicator(),
                ],
              );
            }
          }),
    );
  }
}

完整示例

以下是一个完整的示例项目结构和代码：

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  get_notifier:
  get_it:

app_model.dart

import 'package:flutter/material.dart';

class AppModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  set counter(int val) {
    _counter = val;
    notifyListeners();
  }
}

service.dart

import 'app_model.dart';

class Service {
  final appModel = GetIt.I.get<AppModel>();

  void incrementCounter() {
    appModel.counter += 1;
  }

  void decrementCounter() {
    appModel.counter -= 1;
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:get_notifier/get_notifier.dart';
import 'app_model.dart';
import 'service.dart';

GetIt getIt = GetIt.instance;

void main() {
  getIt
    ..registerSingleton(AppModel(), signalsReady: true)
    ..registerFactory(() => Service());

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Get Notifier Example Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Material(
      child: FutureBuilder(
          future: GetIt.I.allReady(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Scaffold(
                appBar: AppBar(
                  title: Text(title),
                ),
                body: Consumer2<AppModel, Service>(builder: (appModel, service, child) {
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Text(
                          'You have pushed the button this many times:',
                        ),
                        Text(
                          appModel.counter.toString(),
                          style: Theme.of(context).textTheme.headlineMedium,
                        ),
                        ElevatedButton(
                            onPressed: () {
                              appModel.counter += 1;
                            },
                            child: const Text('Straight Increment')),
                        ElevatedButton(onPressed: service.incrementCounter, child: const Text('Service Increment')),
                        ElevatedButton(
                            onPressed: () {
                              GetIt.I.get<AppModel>().counter += 1;
                            },
                            child: const Text('Other Increment'))
                      ],
                    ),
                  );
                }),
                floatingActionButton: Worker<Service>(builder: (s, child) {
                  return FloatingActionButton(
                    onPressed: () {
                      s.decrementCounter();
                    },
                    tooltip: 'Decrement',
                    child: const Icon(Icons.remove),
                  );
                }),
              );
            } else {
              return const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('Waiting for initialisation'),
                  SizedBox(
                    height: 16,
                  ),
                  CircularProgressIndicator(),
                ],
              );
            }
          }),
    );
  }
}

更多关于Flutter通知管理插件get_notifier的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter通知管理插件get_notifier的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，get_notifier 是一个用于状态管理和通知管理的插件。尽管 get_notifier 并非一个广泛认知的标准库（如 provider 或 riverpod），但我们可以假设它提供了一个类似于通知或事件总线（Event Bus）的机制来管理应用状态。为了展示如何使用类似功能的插件，这里我会提供一个基于 Flutter 和 provider 插件的示例，因为 provider 是一个成熟且广泛使用的状态管理库。

不过，如果你确实在寻找一个名为 get_notifier 的特定库，并且它提供了类似的功能，通常这样的库会允许你注册监听器并触发通知。以下是一个假设性的代码示例，展示如何使用一个类似的通知管理插件（这里我们将其命名为 get_notifier，但请注意，这只是一个假设的实现，并非真实存在的库）：

假设的 get_notifier 使用示例

1. 假设的 get_notifier 库安装（伪代码）

dependencies:
  flutter:
    sdk: flutter
  get_notifier: ^1.0.0  # 假设的版本号

2. 创建一个通知类

class MyNotification {
  final String message;

  MyNotification(this.message);
}

3. 使用 get_notifier 管理通知（伪代码）

import 'package:flutter/material.dart';
import 'package:get_notifier/get_notifier.dart';  // 假设的导入

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化通知管理器（伪代码）
    NotifierManager notifierManager = NotifierManager();

    return MaterialApp(
      home: NotifierListener<MyNotification>(
        notifierManager: notifierManager,
        onNotification: (context, notification) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(notification.message)),
          );
        },
        child: HomeScreen(notifierManager: notifierManager),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final NotifierManager notifierManager;

  HomeScreen({required this.notifierManager});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notifier Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 发送通知（伪代码）
            notifierManager.notify(MyNotification('Hello, this is a notification!'));
          },
          child: Text('Send Notification'),
        ),
      ),
    );
  }
}

真实案例：使用 provider 进行状态管理

由于 get_notifier 可能是一个假设的库，下面是一个使用 provider 进行类似功能的真实案例：

1. 安装 provider

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

2. 创建一个通知类

class MyNotification {
  final String message;

  MyNotification(this.message);
}

3. 使用 provider 管理通知

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

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => NotificationListener()),
      ],
      child: MyApp(),
    ),
  );
}

class NotificationListener with ChangeNotifier {
  void notify(MyNotification notification) {
    notifyListeners(); // 触发监听器
    // 这里你可以将通知传递给具体的处理逻辑，比如一个事件总线
    print(notification.message);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Notification Example')),
        body: Consumer<NotificationListener>(
          builder: (context, listener, child) {
            return Center(
              child: ElevatedButton(
                onPressed: () {
                  final notification = MyNotification('Hello from Provider!');
                  context.read<NotificationListener>().notify(notification);
                  // 显示SnackBar作为响应（这里需要一些额外的逻辑来显示UI更新）
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text(notification.message)),
                  );
                },
                child: Text('Send Notification'),
              ),
            );
          },
        ),
      ),
    );
  }
}

请注意，provider 示例中的 notify 方法仅仅是调用了 notifyListeners() 来触发监听器，并没有直接将通知传递给监听器。在实际应用中，你可能需要一个更复杂的机制来传递和处理通知，比如使用 ValueNotifier、ValueListenableBuilder 或其他状态管理库提供的功能。

由于 get_notifier 并非一个真实存在的广泛认知的库，上述代码提供了一个使用 provider 进行类似功能管理的示例。如果你确实在寻找一个特定的 get_notifier 库，请确保查阅其官方文档或源代码以获取准确的用法。

回到顶部