DEV Community: Ayush Raina

Why Cross-Platform Flutter Apps Still Need Native Kotlin MethodChannels for Low-Latency Hardware

Ayush Raina — Sun, 25 Oct 2026 18:10:02 +0000

The "100% Dart" Myth in Production Mobile Engineering
One of the most common architectural mistakes teams make when adopting Flutter is assuming that every feature should be written purely in Dart. While Flutter's rendering engine and pub.dev ecosystem handle 90% of standard CRUD and UI workflows effortlessly, forcing high-frequency hardware interactions—such as raw stylus ink prediction, custom WebRTC media tracks, or USB serial communication—through pure Dart abstractions often introduces unacceptable latency.

Where Pure Dart Hits a Bottleneck
In a recent interactive whiteboard project deployed on large Android touch panels, relying purely on standard Flutter gesture arenas resulted in a noticeable 70.7ms stylus stroke lag. Why? Because touch events had to travel from the Android OS input pipeline, across the Flutter engine boundary, through Dart's gesture disambiguation arena, and back into the render tree before a single pixel appeared on screen.

The Hybrid Solution: Native Kotlin + Flutter UI
Instead of fighting the framework, the cleanest architectural decision is knowing when to drop down into native Kotlin via MethodChannel and EventChannel:

Let Native Handle Raw Hardware Interrupts: By capturing motion events and rendering predictive hardware-accelerated overlays directly on the Android SurfaceView layer in Kotlin, we reduced stroke latency from 70.7ms down to 8.7ms (an 88% reduction).

Use Flutter for State Orchestration and Cross-Platform Sync: Once a stroke is completed, the coordinate array is passed over a binary messenger channel to Flutter, which manages the Undo/Redo stack, BLoC state, and WebSocket broadcasting to 300+ participants.

Example: Clean Binary Messenger Bridge in Kotlin

class StylusLatencyPlugin : FlutterPlugin, MethodCallHandler {
private lateinit var channel: MethodChannel

override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
    channel = MethodChannel(binding.binaryMessenger, "com.inboard/stylus_accel")
    channel.setMethodCallHandler(this)
}

override fun onMethodCall(call: MethodCall, result: Result) {
    when (call.method) {
        "enablePredictiveOverlay" -> {
            val strokeWidth = call.argument<Double>("width") ?: 3.0
            // Trigger native Android front-buffered rendering
            result.success(true)
        }
        else -> result.notImplemented()
    }
}

override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
    channel.setMethodCallHandler(null)
}

}

Final Verdict
Choosing Flutter shouldn't mean abandoning native Android engineering. The strongest mobile architectures treat Flutter as a supercharged UI and business-logic layer while unapologetically leveraging native Kotlin whenever sub-10ms hardware performance is on the line.

Implementing Streaming RAG Responses in Flutter with Server-Sent Events (SSE)

Ayush Raina — Sun, 25 Oct 2026 18:08:10 +0000

Why Standard REST Calls Fail for Mobile AI UX
When integrating Large Language Models (LLMs) and Retrieval-Augmented Generation (RAG) into mobile apps, waiting 5 to 10 seconds for a complete JSON payload blocks the user interface and makes the application feel unresponsive. By consuming Server-Sent Events (SSE) over a Dart Stream, we can render tokens in real time as soon as the vector retrieval step finishes.

Creating the Dart SSE Stream Client Using the standard http package, we can send a http.Request and listen directly to the chunked byte stream instead of awaiting http.post:

import 'dart:convert';
import 'package:http/http.dart' as http;

class RagStreamService {
final http.Client _client = http.Client();

Stream streamQuery({
required String prompt,
required List retrievedContextIds,
}) async* {
final request = http.Request(
'POST',
Uri.parse('https://api.example.com/v1/rag/stream'),
);
request.headers['Content-Type'] = 'application/json';
request.headers['Accept'] = 'text/event-stream';
request.body = jsonEncode({
'prompt': prompt,
'context_ids': retrievedContextIds,
'stream': true,
});

final response = await _client.send(request);

if (response.statusCode != 200) {
  throw Exception('Failed to connect to RAG stream: ${response.statusCode}');
}

await for (final chunk in response.stream
    .transform(utf8.decoder)
    .transform(const LineSplitter())) {
  if (chunk.startsWith('data: ')) {
    final data = chunk.substring(6).trim();
    if (data == '[DONE]') break;

    final decoded = jsonDecode(data) as Map<String, dynamic>;
    final token = decoded['token'] as String?;
    if (token != null) {
      yield token;
    }
  }
}

}
}

Consuming the Token Stream Efficiently in the UI To avoid rebuilding the entire screen on every token arrival, isolate the streaming text area inside a dedicated StreamBuilder or a scoped ValueNotifier:

class StreamingAnswerCard extends StatefulWidget {
final Stream tokenStream;
const StreamingAnswerCard({super.key, required this.tokenStream});

@override
State createState() => _StreamingAnswerCardState();
}

class _StreamingAnswerCardState extends State {
final StringBuffer _buffer = StringBuffer();

@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: widget.tokenStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
_buffer.write(snapshot.data);
}
return Padding(
padding: const EdgeInsets.all(16.0),
child: SelectableText(
_buffer.toString(),
style: const TextStyle(fontSize: 16, height: 1.5),
),
);
},
);
}
}

Key Production Takeaway
Always decouple your vector search retrieval latency from token generation by sending an initial status event over the stream, and ensure your http.Client is properly closed on widget disposal to prevent memory and socket leaks when users navigate away mid-generation.

Optimizing High-Frequency Stylus Input and Real-Time Canvas Rendering in Flutter

Ayush Raina — Sun, 25 Oct 2026 17:49:40 +0000

The Problem with Default Canvas Rendering
When building interactive whiteboard applications in Flutter for large touch panels and tablets, standard widget rebuilds and naive CustomPainter implementations often introduce noticeable input latency (50–70ms+). When hundreds of stylus points are captured per second alongside real-time WebSocket synchronization, calling setState() on every pointer move triggers unnecessary widget tree rebuilds and frame drops.
Decoupling Input Capture from Widget Tree Rebuilds
Instead of calling setState() on every onPanUpdate or onPointerMove event, high-frequency stylus points should be buffered and passed directly to the canvas repaint listener using a ChangeNotifier:

import 'package:flutter/material.dart';

class StrokeController extends ChangeNotifier {
final List _points = [];
List get points => List.unmodifiable(_points);

void addPoint(Offset point) {
_points.add(point);
notifyListeners(); // Marks only RenderCustomPaint as dirty
}

void clear() {
_points.clear();
notifyListeners();
}
}

Passing the Repaint Listenable to CustomPainter By passing the StrokeController directly to super(repaint: controller), Flutter bypasses the widget build and layout phases completely during active drawing and jumps straight to the paint phase:

class WhiteboardPainter extends CustomPainter {
final StrokeController controller;

WhiteboardPainter(this.controller) : super(repaint: controller);

@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.black87
..strokeWidth = 3.5
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke;

final points = controller.points;
for (int i = 0; i < points.length - 1; i++) {
  canvas.drawLine(points[i], points[i + 1], paint);
}

}

@override
bool shouldRepaint(covariant WhiteboardPainter oldDelegate) => false;
}

Capturing Raw Pointer Events Without Gesture Arena Delay Standard GestureDetector widgets wait briefly to disambiguate taps from drags. For zero-latency stylus input, wrapping the CustomPaint in a raw Listener widget captures hardware pointer events at the exact millisecond they touch the glass:

class WhiteboardCanvas extends StatefulWidget {
const WhiteboardCanvas({super.key});

@override
State createState() => _WhiteboardCanvasState();
}

class _WhiteboardCanvasState extends State {
final StrokeController _controller = StrokeController();

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Listener(
onPointerMove: (PointerMoveEvent event) {
_controller.addPoint(event.localPosition);
},
child: CustomPaint(
painter: WhiteboardPainter(_controller),
size: Size.infinite,
),
);
}
}

Batching WebSocket Synchronization Rather than awaiting network acknowledgment before rendering ink on the screen, render strokes locally immediately (optimistic rendering) and stream batched coordinate deltas over WebSockets every 10–16ms (matching a 60–120Hz refresh cycle). Combined with direct hardware-accelerated overlay rendering on Android interactive panels, this architecture reduced our production stylus latency by 88% (from 70.7ms down to 8.7ms) while keeping up to 300 connected participants in real-time sync.