chat_package 1.0.0 copy "chat_package: ^1.0.0" to clipboard
chat_package: ^1.0.0 copied to clipboard

Fully functional chat ui for flutter, with functionality to send text, voice notes,and images

chat_package #

Pub Version likes popularity GitHub Pub

This package provides an easy-to-implement chat UI in your flutter project with audio recording and image-sending support.
This package also is highly customizable to suit your project.

Created by Omar Mouki #

GitHub LinkedIn

Screenshots #

Coming Soon #

The next update of this package will add the support of recording videos, adding caption to captured/storage images, and much more features.

Usage #

Permission Setup #

You only have to add permissions in your project and the package will do the rest. The following permissions are required:

  1. camera
  2. microphone
  3. local storage

Android

  1. Add the following to your "gradle.properties" file:
android.useAndroidX=true
android.enableJetifier=true
  1. In order to use the recording feature, make sure you set the compileSdkVersion in your "android/app/build.gradle" file to 21:
android {
  compileSdkVersion 21
  ...
}
  1. Make sure you replace all the android. dependencies to their AndroidX counterparts (a full list can be found here: https://developer.android.com/jetpack/androidx/migrate).

Add permissions to your AndroidManifest.xml file.

 <uses-permission android:name="android.permission.INTERNET"/>
    <!-- Permissions options for the `storage` group -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <!-- Permissions options for the `camera` group -->
    <uses-permission android:name="android.permission.CAMERA"/>
    <!-- Permissions options for the `RECORD_AUDIO` group -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

IOS

    <!-- Permission options for the `camera` group -->
    <key>NSCameraUsageDescription</key>
    <string>camera</string>
    <!-- Permission options for the `microphone` group -->
    <key>NSMicrophoneUsageDescription</key>
    <string>microphone</string>
    <!-- Permission options for the `photos` group -->
    <key>NSPhotoLibraryUsageDescription</key>
    <string>photos</string>

add this to your Podfile

  target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',

        'PERMISSION_CAMERA=1',
        'PERMISSION_MICROPHONE=1',
        'PERMISSION_PHOTOS=1',

      ]

    end

Calling #

Simply call the ChatScreen
ChatMessages: the chat screen requires a list of chat messages, and to make it easy, the ChatMessage model contains a fromJson() method so you can iterate the list of stored ChatMessage from your back-end, and an example of a ChatMessage

ChatMessage(
      isSender: true,
      text: 'this is a banana',
      chatMedia: ChatMedia(
        url:
            'https://images.pexels.com/photos/7194915/pexels-photo-7194915.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
        mediaType: MediaType.imageMediaType(),
      ),
    )

This package also provides you with a ChatMessage model when using these required methodsonTextSubmit, handleRecord , handleImageSelect and the full code will be like this:

 ChatScreen(
        scrollController: scrollController,
        messages: messages,
        onSlideToCancelRecord: () {
          log('not sent');
        },
        onTextSubmit: (textMessage) {
          setState(() {
            messages.add(textMessage);

            scrollController
                .jumpTo(scrollController.position.maxScrollExtent + 50);
          });
        },
        handleRecord: (audioMessage, canceled) {
          if (!canceled) {
            setState(() {
              messages.add(audioMessage!);
              scrollController
                  .jumpTo(scrollController.position.maxScrollExtent + 90);
            });
          }
        },
        handleImageSelect: (imageMessage) async {
          if (imageMessage != null) {
            setState(() {
              messages.add(
                imageMessage,
              );
              scrollController
                  .jumpTo(scrollController.position.maxScrollExtent + 300);
            });
          }
        },
      )

Properties #

You can customize almost everything in this package and here is the entire properties that you can change.

 ///color of all message containers if its belongs to the user
  final Color? senderColor;

  ///color of the inactive part of the audio slider
  final Color? inActiveAudioSliderColor;

  ///color of the active part of the audio slider
  final Color? activeAudioSliderColor;

  ///[required]scrollController for the chat screen
  final ScrollController scrollController;

  /// the color of the outer container and the color used to hide
  /// the text on slide
  final Color chatInputFieldColor;

  ///hint text to be shown for sending messages
  final String sendMessageHintText;

  /// these parameters for changing the text and icons in the [attachment-bottom-sheet]
  /// text shown wen trying to chose image attachment from gallery in attachment
  /// bottom sheet
  final String imageAttachmentFromGalleryText;

  /// Icon shown wen trying to chose image attachment from gallery in attachment
  /// bottom sheet
  final Icon? imageAttachmentFromGalleryIcon;

  /// text shown wen trying to chose image attachment from camera in attachment
  /// bottom sheet
  final String imageAttachmentFromCameraText;

  /// Icon shown wen trying to chose image attachment from camera in attachment
  /// bottom sheet
  final Icon? imageAttachmentFromCameraIcon;

  /// text shown wen trying to chose image attachment cancel text in attachment
  /// bottom sheet
  final String imageAttachmentCancelText;

  /// Icon shown wen trying to chose image attachment cancel text in attachment
  /// bottom sheet
  final Icon? imageAttachmentCancelIcon;

  /// image attachment text style in attachment
  /// bottom sheet
  final TextStyle? imageAttachmentTextStyle;

  ///hint text to be shown for recording voice note
  final String recordingNoteHintText;

  /// [required] handel [text message] on submit
  /// this method will pass a [ChatMessage]
  final Function(ChatMessage textMessage) onTextSubmit;

  /// [required] the list of chat messages
  final List<ChatMessage> messages;

  /// [required] function to handel successful recordings, bass to override
  /// this method will pass a [ChatMessage] and if the used [canceled] the recording
  final Function(ChatMessage? audioMessage, bool canceled) handleRecord;

  /// [required] function to handel image selection
  /// this method will pass a [ChatMessage]
  final Function(ChatMessage? imageMessage) handleImageSelect;

  /// to handel canceling of the record
  final VoidCallback? onSlideToCancelRecord;

  ///TextEditingController to handel input text
  final TextEditingController? textEditingController;

  /// to change the appearance of the chat input field
  final BoxDecoration? chatInputFieldDecoration;

  /// use this flag to disable the input
  final bool disableInput;

  /// git the chat input field padding
  final EdgeInsets? chatInputFieldPadding;

  /// text style for the message container
  final TextStyle? messageContainerTextStyle;

  /// text style for the message container date
  final TextStyle? sendDateTextStyle;

  /// this is an optional parameter to override the default attachment bottom sheet
  final Function(BuildContext context)? attachmentClick;

Found this project useful? #

If you found this project useful, then please consider giving it a ⭐️ on Github and why don't you share it with your friends.

Issues and feedback #

Feel free to open a Github issue to give a suggestion.

32
likes
110
pub points
72%
popularity

Publisher

unverified uploader

Fully functional chat ui for flutter, with functionality to send text, voice notes,and images

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, freezed_annotation, image_picker, intl, just_audio, permission_handler, photo_view, provider, record, stop_watch_timer

More

Packages that depend on chat_package