Chat Screen

Full-page AI chat screen composing message bubbles, input bar, streaming text, and typing indicator into a complete chat experience.

Preview

Installation

Import

import 'package:my_app/flai/components/chat_screen/chat_screen.dart';
import 'package:my_app/flai/components/chat_screen/chat_screen_controller.dart';

Usage

Create a ChatScreenController with an AI provider, then pass it to FlaiChatScreen:

class ChatPage extends StatefulWidget {
  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  late final ChatScreenController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ChatScreenController(
      provider: OpenAiProvider(apiKey: 'sk-...'),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return FlaiTheme(
      data: FlaiThemeData.dark(),
      child: Scaffold(
        body: FlaiChatScreen(
          controller: _controller,
          title: 'AI Assistant',
          subtitle: 'GPT-4o',
          onAttachmentTap: () {
            // Handle attachment picker
          },
        ),
      ),
    );
  }
}

Properties

Property	Type	Default	Description
controller	ChatScreenController	required	Controller managing chat state and AI interaction.
title	String?	null	Title displayed in the header.
subtitle	String?	null	Subtitle below the title (e.g., model name).
leading	Widget?	null	Leading widget in the header (e.g., avatar).
actions	List<Widget>?	null	Trailing widgets in the header (e.g., settings).
onTapCitation	Function(Citation)?	null	Called when a citation is tapped in a message.
onLongPress	Function(Message)?	null	Called when a message is long-pressed.
onAttachmentTap	VoidCallback?	null	Called when the attachment button is tapped.
showHeader	bool	true	Whether to show the header bar.
inputPlaceholder	String	'Message...'	Placeholder text for the input field.
emptyState	Widget?	null	Widget to display when there are no messages.

Dependencies

This component automatically installs its required sub-components:

ChatScreenController

The controller manages chat state, message history, and AI provider interaction:

final controller = ChatScreenController(
  provider: myAiProvider,
);

// Send a message
controller.sendMessage('What is Flutter?');

// Access state
controller.messages;       // List<Message>
controller.isStreaming;    // bool
controller.streamingText;  // String (partial response)

// Retry last failed message
controller.retry();

// Clear conversation
controller.clear();