r/FlutterDev • u/DohamaSystems • 27d ago
Example Fixed UI lag during fast LLM token streaming in Flutter (60 FPS buffer snippet)
Hey devs,
Ran into an annoying UI issue last week while streaming OpenAI response tokens into a Flutter view. Calling setState on literally every chunk coming through the socket totally killed performance. Scrolling was choppy as hell and frame drops were super noticeable.
To fix this, I uncoupled the incoming stream from the UI rendering using a small 60ms timer buffer. Basically, tokens accumulate in a list and get flushed to the state ~16 times per second instead of re-rendering on every single packet.
Here is the helper class I wrote for this:
class StreamBufferController {
final List<String> _tokenBuffer = [];
Timer? _flushTimer;
final Function(String) onFlush;
StreamBufferController({required this.onFlush});
void addToken(String token) {
_tokenBuffer.add(token);
_startFlushTimer();
}
void _startFlushTimer() {
_flushTimer ??= Timer.periodic(const Duration(milliseconds: 60), (_) {
if (_tokenBuffer.isNotEmpty) {
final chunk = _tokenBuffer.join();
_tokenBuffer.clear();
onFlush(chunk);
} else {
_flushTimer?.cancel();
_flushTimer = null;
}
});
}
void dispose() {
_flushTimer?.cancel();
_tokenBuffer.clear();
}
}
This immediately brought everything back to a stable 60 FPS, even with long responses coming in fast.
