v_chat_input_ui 3.1.0

A customizable Flutter chat composer with text, mentions, emoji, attachments, typing state, location sharing, and voice recording.

V Chat Input UI

A production-ready Flutter chat composer for text, emoji, mentions, media, files, locations, typing state, and voice messages. It is part of the V Chat SDK ecosystem, but works as a standalone package with any messaging backend.

[V Chat Input UI example]

Features

• Text input with automatic RTL/LTR direction and multiline support
• Emoji picker and asynchronous @mention suggestions
• Media, document, camera, and optional Google Maps location actions
• Voice recording with a configurable maximum duration
• Typed callbacks for every submitted payload and typing-state transition
• Light/dark theming through VInputTheme
• Custom labels, tooltips, attachment flow, reply UI, and closed-chat UI
• Independently configurable emoji, attachment, camera, and recorder actions

Installation

flutter pub add v_chat_input_ui

The package currently requires Flutter 3.44 or newer and Dart 3.12 or newer.

Quick start

import 'package:flutter/foundation.dart';
import 'package:v_chat_input_ui/v_chat_input_ui.dart';

VMessageInputWidget(
  onSubmitText: (message) => debugPrint('Text: $message'),
  onSubmitMedia: (files) => debugPrint('Media: ${files.length}'),
  onSubmitFiles: (files) => debugPrint('Files: ${files.length}'),
  onSubmitLocation: (_) => debugPrint('Location selected'),
  onSubmitVoice: (voice) =>
      debugPrint('Voice duration: ${voice.durationObj}'),
  onTypingChange: (state) => debugPrint('Composer state: $state'),
);

All callbacks are local; this package does not upload files or send network requests on your behalf.

Customize the composer

Register VInputTheme as a Flutter theme extension:

MaterialApp(
  theme: ThemeData(
    extensions: [
      VInputTheme.light(
        containerDecoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(24),
        ),
        sendBtn: const CircleAvatar(
          backgroundColor: Colors.teal,
          child: Icon(Icons.send, color: Colors.white),
        ),
      ),
    ],
  ),
);

Disable actions that your product does not need:

VMessageInputWidget(
  enableEmojiPicker: true,
  enableAttachments: true,
  enableCamera: false,
  enableVoiceRecording: false,
  // Required submission callbacks...
);

Localize visible text and accessibility labels with VInputLanguage:

const VInputLanguage(
  textFieldHint: 'Write a message',
  media: 'Photos and videos',
  files: 'Documents',
  sendButtonLabel: 'Send message',
  recordButtonLabel: 'Record voice message',
);

Mentions, attachments, and location

Return mention candidates when the user types @:

onMentionSearch: (query) => users.search(query),
mentionItemBuilder: (user) => ListTile(
  title: Text(user.name),
),

By default, the attachment button opens the built-in media/file sheet. Supply onAttachIconPress to use your own action sheet and return an AttachEnumRes value.

Location sharing appears only when googleMapsApiKey is set. Follow the google_maps_flutter platform setup for every target and never commit production API keys to source control.

Platform setup

Enable only the native permissions used by your app:

• Android voice/camera: RECORD_AUDIO and CAMERA in AndroidManifest.xml.
• iOS voice/camera/media: NSMicrophoneUsageDescription, NSCameraUsageDescription, and NSPhotoLibraryUsageDescription in Info.plist.
• Web voice recording requires browser microphone permission and a secure context.

Text, emoji, and file selection work on Android, iOS, web, macOS, and Windows. The built-in recorder is available on Android, iOS, and web; the camera action is shown on supported mobile platforms.

Run the example

The bundled example is an interactive conversation screen using the real package widget:

cd example
flutter pub get
flutter run

Support

Open bugs and feature requests in the package issue tracker. Broader V Chat SDK documentation is available at v-chat-sdk.github.io.

License

This package is available under the MIT License.