Typing Indicator
Animated typing indicator showing the AI is generating a response. Displays three pulsing dots in a bubble, positioned like an assistant message.
Installation
$
flai add typing_indicator
Import
import 'package:my_app/flai/components/typing_indicator/typing_indicator.dart';Preview
Preview
Usage
The typing indicator is typically shown while waiting for the AI's first token. The ChatScreen handles this automatically, but you can use it standalone:
// Show while streaming hasn't started yet
if (isStreaming && streamingText.isEmpty) {
const FlaiTypingIndicator()
}
// The indicator requires no configuration
const FlaiTypingIndicator()Properties
The typing indicator has no configurable properties. It reads all styling from FlaiTheme.of(context) and uses the assistantBubble color tokens.
This is a
const widget with no props — just drop it in. The animation uses three staggered AnimationControllers for the dot bounce effect.Animation Details
The indicator uses three dots that pulse in sequence with a staggered delay:
- Dot 1: 0ms delay
- Dot 2: 160ms delay
- Dot 3: 320ms delay
- Each dot animates opacity between 0.3 and 1.0 with
Curves.easeInOut - Full cycle duration: 800ms