Flutter Streaming UI: How the Typewriter Experience of AI Replies Is Built

The typewriter effect looks simple: characters appear one by one. But behind "skip animation", "no truncation", and "no performance regression" lies a whole set of engineering decisions. The implementation in this article is Flutter/Dart based, but the core semantic decisions — "skip ≠ abort" and "buffer and batch" — are framework-agnostic : Web's EventSource, and native/RN SSE clients, face the same choices. Prologue: a "skip typewriter" button that kept breaking In an AI narrative app (where the user influences an AI-driven interactive story by entering fate instructions), I built a "⏩ skip typewriter" button — users click it to see the full AI reply immediately instead of waiting for the text to appear character by character. The button went through three stages in the dev log: V1 : clicking does nothing — the callback fires, but the user experiences no change V2 : clicking truncates the content — the animation is gone, but the reply is incomplete too Final : clicking reveals the partial text immediately, while the LLM keeps generating the full reply in the background, which appears all at once when done Behind these three versions lie the three most common pitfalls in "streaming UI". This article breaks them down. 1. From SSE to screen: the streaming rendering pipeline Why the LLM "pops" text out The LLM's reply comes back in chunks via HTTP SSE (Server-Sent Events). A typical chunk looks like this: data: { "choices" :[{ "delta" :{ "content" : "Mephistopheles appears" }}]} data: { "choices" :[{ "delta" :{ "content" : "at the study door." }}]} data: [ DONE ] The interval between chunks is determined by the model's generation speed — tens of milliseconds when fast, possibly a full second when slow. That "character-by-character appearance" is what the user perceives as the typewriter animation. Why you can't update the UI on every chunk If you trigger a state update on every chunk, a reply of a few hundred characters can cause dozens or hundreds of UI rebuilds, whi