Real-Time SLAM and LiDAR Visualization in Flutter

SLAM, or Simultaneous Localization and Mapping, allows a robot to build a map of an environment while determining its own position. Flutter can provide an interactive visualization layer for this data.

Understanding SLAM

Robots can use:

LiDAR
Cameras
IMUs
Wheel encoders

A SLAM system estimates:

Robot Position
+
Robot Orientation
+
Environment Map

Common ROS 2 topics include:

/map
/scan
/odom
/tf

Architecture

LiDAR Sensor
     |
     v
ROS 2
     |
     +--> SLAM Algorithm
     |
     v
Robot Gateway
     |
     v
WebSocket
     |
     v
Flutter Visualization

Creating a LiDAR Point Model

class LidarPoint {
  final double x;
  final double y;

  LidarPoint({
    required this.x,
    required this.y,
  });
}

Using CustomPainter

class LidarPainter extends CustomPainter {
  final List<LidarPoint> points;

  LidarPainter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();

    for (final point in points) {
      canvas.drawCircle(
        Offset(point.x, point.y),
        2,
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Render it with:

CustomPaint(
  size: Size.infinite,
  painter: LidarPainter(points),
)

Drawing the Robot Position

canvas.save();

canvas.translate(robotX, robotY);
canvas.rotate(robotYaw);

canvas.drawRect(
  const Rect.fromLTWH(-10, -10, 20, 20),
  Paint(),
);

canvas.restore();

Processing High-Frequency Data

LiDAR can generate thousands of points every second. To keep Flutter responsive:

Process sensor data outside the widget tree
Use CustomPainter
Throttle unnecessary updates
Avoid unnecessary allocations
Use binary messages when appropriate
Move expensive transformations to isolates

Using an Isolate

final result = await compute(
  processLidarData,
  rawData,
);

Adding Map Interaction

Flutter can support pan and zoom:

InteractiveViewer(
  child: CustomPaint(
    painter: LidarPainter(points),
  ),
)

You can also add:

Robot tracking
Map rotation
Obstacle layers
Sensor overlays
Navigation paths

Optimizing Large Maps

For large environments:

Divide maps into tiles
Render only visible regions
Simplify distant points
Cache static layers
Reduce update frequency when possible

Conclusion

Flutter can become a powerful visualization layer for robotics systems. Combining ROS 2 sensor data with Flutter rendering makes it possible to create interactive dashboards for SLAM, LiDAR, localization, and autonomous navigation.