fyral_comms 0.2.1

Communication feature package for Fleet Glide Admin

fyral_comms

A premium, responsive, and interactive messaging and team communication package for Flutter applications. Specifically tailored to handle both mobile and tablet interfaces seamlessly.

Features

• WhatsApp-Style Media Preview (MediaPreviewPage): Interactive fullscreen preview for selected or captured photos and videos. Includes pinch-to-zoom support, video playback controls with live video frame thumbnails, horizontal swipe gestures (PageView), bottom thumbnail gallery strip, embedded Emoji Picker, and popup attachment actions.
• Dual-Source Attachment Picker: Clean popup menu on MessageBox supporting both Camera (ImagePicker) and Gallery (wechat_assets_picker / pickMultipleMedia) with Android 13+ / 14+ runtime permission handling and theme-adaptive upward popups.
• Responsive Dual-Pane Split-Screen: Automatically switches to a split-screen view on tablet-sized screens (width $\ge 600\text{px}$ in landscape, or $\ge 900\text{px}$ in portrait). Includes:
  • Left navigation sidebar panel showing active conversations.
  • Right viewport panel loading detail message logs.
• Integrated WhatsApp-style Replies: Reply card previews are nested cleanly inside the text input pill widget rather than covering the whole screen width, with rounded borders and color contrasts matching light/dark theme modes.
• Dynamic Mentions Suggestions Overlay: Typing @ displays a filtered user list overlay directly above the input container, presenting usernames and initials-based circular avatars.
• Rich-text Mentions Highlighting: Automatically colors active mentions in bold orange text both inside sent/received message bubbles and dynamically as you type inside the text input field.
• Dynamic Selection Highlighting: Sidebars highlight selected conversations with matching theme outline borders.
• Unified Gradient Headers: Left and right app bars share matching, beautiful steel-blue gradient backdrops.
• Morphing AI FAB Input Field: Circular Floating Action Button morphs into a full-width input query box at the bottom of the viewport with a fluid shape-morphing size and cross-fade animation.
• Adaptive Layout Adjustments: Conditionally suppresses screen navigation (like back arrows) in tablet views to prevent accidental page pops.
• Full Theme Support: Adapts typography, background colors, and borders automatically to match system light and dark themes.

Getting started

Add fyral_comms as a dependency in your pubspec.yaml file:

dependencies:
  fyral_comms: ^0.2.1

Or run:

flutter pub add fyral_comms

Usage

Embed the CommsPage inside your application route configuration (e.g. using GoRouter):

import 'package:fyral_comms/comms.dart';

// Use CommsPage in your build widget tree:
@override
Widget build(BuildContext context) {
  return const Scaffold(
    body: CommsPage(),
  );
}

Conversation Detail View

ConversationDetailPage provides a modular chat details view that supports a hybrid state management pattern.

Uncontrolled Mode (Stateful Fallback)

For quick prototyping, testing, or simple apps, you can instantiate the page with just a title. It will automatically initialize and manage its own messages list, text controllers, focus nodes, emoji pickers, and search states:

ConversationDetailPage(
  title: 'Operations Room',
)

Controlled Mode (Stateless Style)

For production applications, or when integrating with state management frameworks like BLoC, Riverpod, or Redux, you can fully drive the page externally by supplying controllers, state values, and event callbacks:

ConversationDetailPage(
  title: 'Operations Room',
  messages: state.messages,
  isSearching: state.isSearching,
  searchQuery: state.searchQuery,
  showEmojiPicker: state.showEmojiPicker,
  messageController: _messageController,
  searchController: _searchController,
  focusNode: _focusNode,
  onSendMessage: () => bloc.add(SendMessageEvent()),
  onSearchQueryChanged: (query) => bloc.add(SearchChangedEvent(query)),
  onToggleEmojiPicker: () => bloc.add(ToggleEmojiEvent()),
  onToggleSearch: () => bloc.add(ToggleSearchEvent()),
  onClearSearch: () => bloc.add(ClearSearchEvent()),
  onMediaPicked: (List<File> files) => bloc.add(MediaPickedEvent(files)),
  onBackPressed: () => Navigator.pop(context),
)

Customization Options

• onMediaPicked (ValueChanged<List<File>>?): Callback invoked when media files are selected/captured and confirmed from the preview screen.
• showMediaPicker (bool?, default: true): Controls visibility of the attachment picker button in the message box.
• addDemoData (bool, default: true): If true, populates mock demo messages on initialization when in uncontrolled mode. Set to false to start with an empty chat log.
• showAppBar (bool, default: true): Set to false to hide the Scaffold's AppBar, allowing you to embed the page inside parent navigators or custom layouts.

Refer to the /example directory for a complete demonstration, including premium custom ThemeData configurations for both light and dark display modes.

Media Preview View (MediaPreviewPage)

You can launch MediaPreviewPage directly to preview picked photos and videos with captions before sending:

final MediaPreviewResult? result = await Navigator.push<MediaPreviewResult>(
  context,
  MaterialPageRoute(
    builder: (context) => MediaPreviewPage(
      filePaths: ['/path/to/image.png', '/path/to/video.mp4'],
      initialCaption: 'Check out the site photos',
    ),
  ),
);

if (result != null) {
  print('Selected files: ${result.filePaths}');
  print('Caption: ${result.caption}');
}

Additional information

• Repository: Find the source code and file issues on GitHub.
• Contributing: Feedback and pull requests are welcome. Feel free to file issues or request enhancements on the repository.