synw / fluxmap

A reactive map that handle real time location updates for multiple devices for Flutter

Fluxmap

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

Screenshot

View this example on the web

Usage

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));
_devicesFlux.sink.add(device);_

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';

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

In the widget:

@override
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;
      break;
    case DeviceNetworkStatus.disconnected:
      color = Colors.orange;
      break;
    case DeviceNetworkStatus.offline:
      color = Colors.lightBlueAccent;
      break;
    default:
      color = Colors.grey[300];
  }
  /// ...
  return SomeWidget();
}

fluxmap's Issues

example real app

is posible to add in example a real app that load location from firebase realtime database?

thank you