Flutter广播通信插件fbroadcast的使用

✨ 特性

fbroadcast 插件提供了强大的广播系统，帮助开发者在应用中构建高效的广播通信。以下是其主要特性：

发送和接收指定类型的消息：支持发送和接收特定类型的消息。
消息支持携带任意类型的数据包：可以携带任何类型的数据。
上下文绑定：通过一行代码可以移除上下文中所有的接收器。
粘性广播（Sticky Broadcast）：支持发送粘性广播。
双向通信支持：支持发送者与接收者之间的双向通信。
简单清晰的状态管理：易于构建局部或全局状态管理。

🛠 使用指南

基础广播

注册并发送广播非常简单：

// 注册接收器
FBroadcast.instance().register(Key_Message, (value, callback) {
  // 处理接收到的消息
});

// 发送消息
FBroadcast.instance().broadcast(Key_Message);

粘性广播

当没有对应的接收器时，粘性广播会暂时停留在系统中，直到有接收器注册：

FBroadcast.instance().stickyBroadcast(
  Key_Message, 
  value: data, 
);

双向通信

实现发送者与接收者之间的双向通信：

// 发送消息并接收返回值
FBroadcast.instance().broadcast(
  Key_Message, 
  value: data, 
  callback: (value){
    // 处理返回值
  }
);

// 接收消息并返回结果
FBroadcast.instance().register(Key_Message, (value, callback) {
  var result = logic();
  callback(result);
});

上下文绑定

支持传递环境对象，在环境销毁时移除所有注册的接收器：

FBroadcast.instance().register(
  Key_Message1,
  (value, callback) {
    // 处理消息
  },
  context: this,
);

// 移除该环境中所有的接收器
FBroadcast.instance().unregister(this);

👀 示例代码

跑步示例

创建跑步者

class Runner {
  Runner() {
    FBroadcast.instance().register(Key_RunnerState, (value, callback) {
      if (value is String && value.contains("Run")) {
        FBroadcast.instance().broadcast(Key_RunnerState, value: "0m..");
        run(20);
      }
    });
  }

  void run(double distance) {
    Timer(Duration(milliseconds: 500), () {
      FBroadcast.instance().broadcast(Key_RunnerState, value: "${distance.toInt()}m..");
      var newDistance = distance + 20;
      if (newDistance > 100) {
        FBroadcast.instance().broadcast(Key_RunnerState, value: "Win!\nTotal time is 2.5s");
      } else {
        run(newDistance);
      }
    });
  }
}

创建UI

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Stateful(
      initState: (setState, data) {
        FBroadcast.instance().register(
          Key_RunnerState,
          (value, callback) {
            setState(() {});
          },
          context: data,
        );
      },
      builder: (context, setState, data) {
        return FSuper(
          text: FBroadcast.value(Key_RunnerState) ?? "Preparing..",
        );
      },
    ),
    const SizedBox(height: 100),
    FButton(
      text: "Start",
      onPressed: () {
        FBroadcast.instance().broadcast(Key_RunnerState, value: "Running...");
      },
    ),
  ],
)

定位服务示例

全局定位服务提供者

class LocationServer {
  LocationServer() {
    init();
  }

  void init() {
    FBroadcast.instance().register(Key_Location, (value, callback) async {
      var loc = await location();
      callback(loc);
    });
  }

  Future<List<double>> location() async {
    await Future.delayed(Duration(milliseconds: 2000));
    return [Random().nextDouble() * 280, Random().nextDouble() * 150];
  }
}

发送定位请求并接收返回消息

FButton(
  text: "Location",
  onPressed: () {
    FLoading.show(context);
    FBroadcast.instance().broadcast(Key_Location, callback: (location) {
      setState(() {
        FLoading.hide();
        this.location = location;
      });
    });
  },
)

局部状态管理示例

点击改变颜色

FButton(
  text: "Change Color",
  onPressed: () {
    FBroadcast.instance().broadcast(Key_Color, value: reduceColor());
  },
)

Stateful(
  initState: (setState, data) {
    FBroadcast.instance().register(
      Key_Color,
      (value, callback) {
        setState(() {});
      },
      context: data,
    );
  },
  builder: (context, setState, data) {
    return FSuper(
      backgroundColor: FBroadcast.value<Color>(Key_Color) ?? mainBackgroundColor,
    );
  },
)

全局状态管理示例

用户信息组件注册接收器

class Avatar extends StatefulWidget {
  @override
  _AvatarState createState() => _AvatarState();
}

class _AvatarState extends State<Avatar> {
  User user;
  int msgCount = 0;

  @override
  void initState() {
    super.initState();
    FBroadcast.instance().register(
      Key_MsgCount,
      (value, callback) => setState(() {
        msgCount = value;
      }),
      more: {
        Key_User: (value, callback) => setState(() {
          user = value;
        }),
      },
      context: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return FSuper(
      backgroundImage: (user == null || _textIsEmpty(user.avatar)) ? null : AssetImage(user.avatar),
      redPoint: user != null && msgCount > 0,
      redPointText: msgCount.toString(),
      text: user != null ? null : "Click Login",
      onClick: user != null
          ? null
          : () => Navigator.push(context, MaterialPageRoute(builder: (context) => LoginPage())),
    );
  }

  @override
  void dispose() {
    super.dispose();
    FBroadcast.instance().unregister(this);
  }
}

登录页面逻辑处理

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  LoginHandler handler = LoginHandler();
  FSearchController _controller1 = FSearchController();
  FSearchController _controller2 = FSearchController();

  @override
  void initState() {
    super.initState();
    _controller1.setListener(() {
      handler.userName = _controller1.text;
    });
    _controller2.setListener(() {
      handler.password = _controller2.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FSearch(
          controller: _controller1,
        ),
        FSearch(
          controller: _controller2,
        ),
        Stateful(
          initState: (setState, data) {
            FBroadcast.instance().register(
              Key_Login,
              (value, callback) => setState(() {}),
              more: {
                Key_User: (value, callback) {
                  FLoading.hide();
                  Navigator.pop(context);
                },
              },
              context: data,
            );
          }, 
          builder: (context, setState, data) {
            return FButton(
              text: "LOGIN",
              onPressed: !(FBroadcast.value(Key_Login) ?? false)
                  ? null
                  : () {
                      _controller1.clearFocus();
                      _controller2.clearFocus();
                      FLoading.show(context);
                      handler.login();
                    },
            );
          },
        ),
      ],
    );
  }
}

以上示例展示了如何使用 fbroadcast 插件进行广播通信，实现模块间的解耦合以及局部和全局状态管理。希望这些示例能帮助您更好地理解和使用 fbroadcast 插件。

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

nodeper 1楼•12 小时前

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

在Flutter中，fbroadcast 插件可以用于实现跨组件的广播通信。这个插件允许你在应用的不同部分发送和接收事件，非常适合用于状态管理或事件驱动的架构。以下是如何在Flutter项目中使用 fbroadcast 插件的一个简单示例。

首先，确保你已经在 pubspec.yaml 文件中添加了 fbroadcast 依赖：

dependencies:
  flutter:
    sdk: flutter
  fbroadcast: ^最新版本号  # 替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，我们编写一个简单的示例，展示如何使用 fbroadcast 进行广播通信。

1. 创建一个 Flutter 应用

假设你已经有一个 Flutter 应用，如果没有，可以使用 flutter create my_app 创建一个新的 Flutter 应用。

2. 导入 `fbroadcast` 并设置广播

在 main.dart 中，导入 fbroadcast 并设置广播监听和发送。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FBroadcast _fBroadcast = FBroadcast();

  @override
  void initState() {
    super.initState();

    // 订阅广播事件
    _fBroadcast.subscribe('my_event', (data) {
      print('Received event: $data');
      // 更新UI，如果需要的话
      // setState(() {
      //   // 更新状态
      // });
    });
  }

  @override
  void dispose() {
    // 取消订阅广播事件
    _fBroadcast.unsubscribe('my_event');
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter fbroadcast Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 发送广播事件
            _fBroadcast.publish('my_event', 'Hello, Flutter!');
          },
          child: Text('Send Event'),
        ),
      ),
    );
  }
}

代码解释

导入 fbroadcast：在文件顶部导入 fbroadcast 包。
创建 FBroadcast 实例：在 _MyHomePageState 类中创建一个 FBroadcast 实例。
订阅事件：在 initState 方法中，使用 _fBroadcast.subscribe 方法订阅一个名为 'my_event' 的事件。当事件被触发时，会调用提供的回调函数，并打印接收到的数据。
发送事件：在按钮的 onPressed 回调中，使用 _fBroadcast.publish 方法发送一个名为 'my_event' 的事件，并附带数据 'Hello, Flutter!'。
取消订阅：在 dispose 方法中，使用 _fBroadcast.unsubscribe 方法取消订阅，以避免内存泄漏。

这个示例展示了如何使用 fbroadcast 插件在 Flutter 应用中实现简单的广播通信。你可以根据需要扩展这个示例，处理更复杂的事件和数据。

Flutter广播通信插件fbroadcast的使用

Flutter广播通信插件fbroadcast的使用

✨ 特性

🛠 使用指南

基础广播

粘性广播

双向通信

上下文绑定

👀 示例代码

跑步示例

创建跑步者

创建UI

定位服务示例

全局定位服务提供者

发送定位请求并接收返回消息

局部状态管理示例

点击改变颜色

全局状态管理示例

用户信息组件注册接收器

登录页面逻辑处理

1. 创建一个 Flutter 应用

2. 导入 fbroadcast 并设置广播

代码解释

2. 导入 `fbroadcast` 并设置广播