pub package Build Status

A map to handle real time location updates for multiple devices. The map takes a stream of Device objects for input and manages their state on the map

  • Automatic network status management: the devices network status is calculated from their last position report. Callbacks are available for state changes
  • Access to the map state: the state of the map is available via a provider




Declare state mutations actions

Define you callbacks and options for devices state changes:

   final flux = FluxMapState(
      onDeviceDisconnect: (device) =>
          print("Device ${device.name} is disconnected"),
      onDeviceOffline: (device) =>
          print("Device ${device.name} is offline"),
      onDeviceBackOnline: (device) =>
          print("Device ${device.name} is back online"),
      markerGestureDetectorBuilder: (context, device, child) {
          return GestureDetector(
              child: child,
              onTap: () {
                print("Tap $device");
              onDoubleTap: () {
                print("Double tap $device");
              onLongPress: () {
                print("Long press $device");

Use the positions stream

Create a stream controller for your positions updates:

   final StreamController<Device> _devicesFlux = StreamController<Device>();

Place the map widget in your widgets tree:

   Widget map = FluxMap(state: flux,
           devicesFlux: _devicesFlux.stream));

Then feed the map with location updates:

   final device = Device(
      name: "phone 1",
      position: GeoPoint(latitude: 0.0, longitude: 0.0, speed: 31.0));

Use map controls

To manage the map assets and controls an instance of Map controller is available:

   flux.map.addMarker(name: "My marker",
                      marker: Marker( /* A Flutter Map marker*/))

Access to the map state

It is possible to plug on the map state with Provider: in a parent widget:

   import 'package:fluxmap/fluxmap.dart';
   import 'package:provider/provider.dart';

   Widget build(BuildContext context) {
     return StreamProvider<FluxMapStore>.value(
         initialData: FluxMapStore(),
         value: fluxMapStoreController.stream,
         child: MyWidget());

In the widget:

   Widget build(BuildContext context) {
     final mapState = Provider.of<FluxMapStore>(context).state;
     final device = mapState.devices[deviceId];
     Color color;
     switch (device.networkStatus) {
       case DeviceNetworkStatus.online:
         color = Colors.green;
       case DeviceNetworkStatus.disconnected:
         color = Colors.orange;
       case DeviceNetworkStatus.offline:
         color = Colors.lightBlueAccent;
         color = Colors.grey[300];
     /// ...
     return SomeWidget();