flutter_message_composer #

An adaptive Flutter message composer for chat and messaging experiences. It provides multiline text input, configurable actions, typed submissions, and tap-or-hold audio recording while leaving transport and persistence to the host application.

The package currently targets Android and iOS.

Features #

• Compact input that animates into a multiline composer.
• Configurable attachment menu and prompt actions.
• Text, attachment, and recorded-audio submission payloads.
• Tap to manage a recording or hold to record and send on release.
• Disabled and sending states.
• Theme-aware defaults with optional colors, shapes, icons, and tooltips.
• A host-owned suggestion area for mentions, hashtags, commands, quick replies, or any other contextual content.
• Callbacks for typing, recording lifecycle, permission denial, and errors.
• An injectable recorder contract for custom native or DSP-backed capture.
• No dependency on a chat backend or state-management package.

Installation #

While developing the package locally, add a path dependency:

dependencies:
  flutter_message_composer:
    path: ../flutter_message_composer

After it is published to pub.flutter-io.cn, use the hosted dependency:

dependencies:
  flutter_message_composer: ^0.1.0

Platform setup #

Audio recording uses the record package. Android requires API 23 or newer and the microphone permission in android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

iOS requires version 12.0 or newer and a usage description in ios/Runner/Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>Audio messages require access to the microphone.</string>

Usage #

import 'package:flutter/material.dart';
import 'package:flutter_message_composer/flutter_message_composer.dart';

final controller = TextEditingController();
final focusNode = FocusNode();

MessageComposer(
  controller: controller,
  focusNode: focusNode,
  hintText: 'Message',
  sendTooltip: 'Send',
  attachTooltip: 'Attachments',
  recordTooltip: 'Record audio',
  suggestions: activeSuggestions.isEmpty
      ? null
      : SuggestionsList(
          suggestions: activeSuggestions,
          onSelected: handleSuggestion,
        ),
  menuActions: [
    ChatInputMenuAction(
      id: 'photo',
      label: 'Photo',
      icon: const Icon(Icons.image_outlined),
      onPressed: pickPhoto,
    ),
  ],
  attachments: selectedAttachments,
  onChanged: handleTyping,
  onSend: (submission) {
    if (submission.hasAudio) {
      uploadAndSendAudio(submission.audio!);
      return;
    }

    sendMessage(
      text: submission.text,
      attachments: submission.attachments,
    );
  },
)

The host owns suggestion detection and selection. Pass null when no suggestions are active and the area collapses automatically. Because controller accepts any TextEditingController, applications can combine the composer with a specialized token-aware controller without adding that parser as a dependency of this package.

The caller owns attachment picking, uploads, message creation, retries, and clearing the text controller after a submission is accepted. Pass sending: true to temporarily lock the composer while an operation is in progress.

The default recorder uses record. A host that needs a different capture or audio-processing pipeline can implement MessageComposerRecorder and provide an isolated instance with audioRecorderFactory. The composer owns and disposes the returned backend.

All user-facing labels are supplied by the host application, so the composer can use the application's localization system. See example/lib/main.dart for a complete runnable example.

Scope #

flutter_message_composer is a presentation component. It does not prescribe a message model, networking client, storage layer, or state-management solution. This keeps it reusable across REST, WebSocket, Firebase, and offline messaging implementations.