Streaming Text

Real-time streaming text renderer with cursor animation for AI responses. Displays text as it arrives token-by-token from the AI provider.

Preview

Flutter is a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase

Installation

$ flai add streaming_text

Import

import 'package:my_app/flai/components/streaming_text/streaming_text.dart';

Usage

// Basic streaming text
FlaiStreamingText(
  text: partialResponse,
  isStreaming: true,
)

// With custom text style
FlaiStreamingText(
  text: partialResponse,
  isStreaming: controller.isStreaming,
  style: theme.typography.bodyLarge(
    color: theme.colors.foreground,
  ),
)

// Completed (cursor hidden)
FlaiStreamingText(
  text: fullResponse,
  isStreaming: false,
)

Properties

Property	Type	Default	Description
text	String	required	The text content to display (partial or complete).
isStreaming	bool	false	Whether text is still being streamed. Shows cursor when true.
style	TextStyle?	null	Text style. Falls back to theme's bodyBase.
cursorColor	Color?	null	Color of the blinking cursor. Falls back to text color.

How It Works

The streaming text component renders the current text content with an animated blinking cursor at the end. As new tokens arrive from the AI provider via SSE (Server-Sent Events), the parent widget updates the text prop, and the component re-renders with the new content.

The cursor uses a CurvedAnimation with Curves.easeInOut for a smooth breathing effect, repeating every 600ms.

⚡

For optimal performance, use StreamingText inside a MessageBubble which handles the streaming state automatically via the ChatScreenController.

Previous ← Input Bar Next Typing Indicator →