Flutter EventBus message bus

1 Introduction

In APP, we often need a broadcast mechanism for cross-page event notification. In Flutter, we can use the event bus function provided by event_bus to implement some state updates. The core is based on Dart Streams; event bus is usually The subscriber mode is implemented. The subscriber mode includes two roles: publisher and subscriber. Events can be triggered and monitored through the event bus. Next, I will learn event_bus and implement the theme color update asynchronously.

2. Integrate EventBus in Flutter

Add event_bus to the pubspec.yaml file, the current version is 1.1.0:

event_bus: ^1.1.0

Introduced in the dart code:

import 'package:event_bus/event_bus.dart';

Now that the event_bus plug-in library has been introduced, the event_bus can be introduced and used in the corresponding class. Maybe using the flutter plug-in library is the same step!

3. Create EventBus

Usually there is only one event bus for each application, but multiple event buses can be set to group a set of specific events, so create a new event_bus.dart class, create an EventBus instance in the class, and enable it to be used in other classes , And defines the ThemeColorEvent notification event to modify the theme color:

import 'package:event_bus/event_bus.dart';
/// 创建EventBus
EventBus eventBus = EventBus();

/// Event 修改主题色
class ThemeColorEvent {
  String colorStr;

  ThemeColorEvent(this.colorStr);
}

Here is to create an EventBus instance through EventBus eventBus = EventBus();, first look at the library source code EventBus() method:

  EventBus({bool sync = false})
      : _streamController = StreamController.broadcast(sync: sync);

In the process of creating EventBus, the creation of the event bus is realized through the StreamController.broadcast method. As mentioned earlier, the core of EventBus is based on Dart Streams. StreamController.broadcast is a broadcast stream of Streams. Here you can see when EventBus was created. You can also pass in a sync, the default sync is false, namely asynchronous operation; when sync is true, namely synchronous operation.

4. Register event listener

Next, in the main.dart program entry class, I registered a listener to monitor and modify the theme color to receive a color value, and then setState to update the theme state.

  //订阅eventbus
    _colorSubscription = eventBus.on<ThemeColorEvent>().listen((event) {
      Color color = AppColors.getColor(event.colorStr);
      setState(() {
        _primaryColor = color;
      });

Since the core of EventBus is based on Dart Streams (stream), here I define StreamSubscription _colorSubscription; equivalent to a subscriber, so when you exit the page, you must unsubscribe to prevent memory leaks:

@override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //取消订阅
    _colorSubscription.cancel();
  }

5. Send event

I created a new sub-page, in the sub-page there is an input box for inputting the color value, and then click the button, it will bring the color value of the input box, execute EventBus to send an event to modify the theme color:

//发送订阅消息去修改颜色
eventBus.fire(ThemeColorEvent(_colorController.text));

In this way, the listener registered in the previous main.dart class can receive the color value passed by the subpage, and the function of modifying the theme color of the APP is realized here.

Effect picture:

gfone.gif

Source address:

https://github.com/ChessLuo/flutter_study_app

Author: Programs ape in Guangdong
link: https: //www.jianshu.com/p/bc4ed6ca7d79
Source: Jane books
are copyrighted by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

Flutter EventBus message bus

Guess you like