Un package Flutter qui vous permet d'intégrer Chat View avec des options hautement personnalisées

Un package Flutter qui vous permet d’intégrer Chat View avec des options hautement personnalisées

Un package Flutter qui vous permet d’intégrer Chat View avec des options hautement personnalisées.

Aperçu

Installation

Ajouter une dépendance à pubspec.yaml

dependencies:
  chatview: <latest-version>

Obtenez la dernière version dans l’onglet « Installation » sur pub.dev

Importer le paquet

import 'package:chatview/chatview.dart';

Ajout d’un contrôleur de chat.

final chatController = ChatController(
  initialMessageList: messageList,
  scrollController: ScrollController(),
  chatUsers: [ChatUser(id: '2', name: 'Simform')],
);

Ajout d’un ChatView widget.

ChatView(
  currentUser: ChatUser(id: '1', name: 'Flutter'),
  chatController: chatController,
  onSendTap: onSendTap,
  chatViewState: ChatViewState.hasMessages, // Add this state once data is available.
)

Ajout d’une liste de messages avec Message classe.

List<Message> messageList = [
  Message(
    id: '1',
    message: "Hi",
    createdAt: createdAt,
    sendBy: userId,
  ),
  Message(
    id: '2',
    message: "Hello",
    createdAt: createdAt,
    sendBy: userId,
  ),
];

Ajout d’un onSendTap.

void onSendTap(String message, ReplyMessage replyMessage){
  final message = Message(
    id: '3',
    message: "How are you",
    createdAt: DateTime.now(),
    sendBy: currentUser.id,
  );
  chatController.addMessage(message);
}

Envoi d’une URL d’image.

void onSendTap(String message, ReplyMessage replyMessage){
  final message = Message(
    id: '3',
    message: imageLink,    
    createdAt: DateTime.now(),
    sendBy: currentUser.id,
    messageType: MessageType.image,
  );
  chatController.addMessage(message);
}

Configuration spécifique à la plate-forme pour le sélecteur d’images

iOS

Ajoutez les clés suivantes à votre Info.plist fichier, situé dans <project root>/ios/Runner/Info.plist:

NSPhotoLibraryUsageDescription – décrivez pourquoi votre application a besoin d’une autorisation pour la photothèque. C’est appelé Confidentialité – Description de l’utilisation de la photothèque dans l’éditeur visuel.
NSCameraUsageDescription – décrivez pourquoi votre application a besoin d’accéder à la caméra. C’est appelé Confidentialité – Description de l’utilisation de la caméra dans l’éditeur visuel.
NSMicrophoneUsageDescription – décrivez pourquoi votre application a besoin d’accéder au microphone, si vous avez l’intention d’enregistrer des vidéos. C’est appelé Confidentialité – Description de l’utilisation du microphone dans l’éditeur visuel.

Quelques paramètres supplémentaires facultatifs

Ajout d’une appbar avec ChatViewAppBar.

ChatView(
  appBar: ChatViewAppBar(
    profilePicture: profileImage,
    chatTitle: "Simform",
    userStatus: "online",
    actions: [
      Icon(Icons.more_vert),
    ],
  ),
)

Ajout d’une configuration de liste de messages avec ChatBackgroundConfiguration classe.

ChatView(
  ...
  chatBackgroundConfig: ChatBackgroundConfiguration(
    backgroundColor: Colors.white,
    backgroundImage: backgroundImage,
  ),
  ...
)

Ajout d’une configuration d’envoi de message avec SendMessageConfiguration classe.

ChatView(
  ...
  sendMessageConfig: SendMessageConfiguration(
    replyMessageColor: Colors.grey,
    replyDialogColor:Colors.blue,
    replyTitleColor: Colors.black,
    closeIconColor: Colors.black,
    horizontalDragToShowMessageTime: true, // to show message created time
  ),
  ...
)

Ajout de l’image de profil d’un destinataire.

ChatView(
  ...
  showReceiverProfileCircle: true,
  profileCircleConfig: ProfileCircleConfiguration(profileImageUrl: profileImage),
  /// Add profileImage url of recevier
  ...
)

Ajout d’une configuration de bulle de chat avec ChatBubbleConfiguration classe.

ChatView(
  ...
  chatBubbleConfig: ChatBubbleConfiguration(
    onDoubleTap: (){
       // Your code goes here
    },
    outgoingChatBubbleConfig: ChatBubble(      // Sender's message chat bubble 
      color: Colors.blue,
      borderRadius: const BorderRadius.only(  
        topRight: Radius.circular(12),
        topLeft: Radius.circular(12),
        bottomLeft: Radius.circular(12),
      ),
    ),
    inComingChatBubbleConfig: ChatBubble(      // Receiver's message chat bubble
      color: Colors.grey.shade200,
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(12),
        topRight: Radius.circular(12),
        bottomRight: Radius.circular(12),
      ),
    ),
  )
  ...
)

Ajout de la configuration de balayage pour répondre avec SwipeToReplyConfiguration classe.

ChatView(
  ...
  swipeToReplyConfig: SwipeToReplyConfiguration(
    onLeftSwipe: (message, sendBy){
        // Your code goes here
    },
    onRightSwipe: (message, sendBy){
        // Your code goes here
    },              
  ),
  ...
)

Ajout de la configuration des messages avec MessageConfiguration classe.

ChatView(
  ...
  messageConfig: MessageConfiguration(
    messageReactionConfig: MessageReactionConfiguration(),      // Emoji reaction configuration for single message 
    imageMessageConfig: ImageMessageConfiguration(
      onTap: (){
          // Your code goes here
      },                          
      shareIconConfig: ShareIconConfiguration(
        onPressed: (){
           // Your code goes here
        },
      ),
    ),
  ),
  ...
)

Ajout d’une configuration contextuelle de réaction avec ReactionPopupConfiguration classe.

ChatView(
  ...
  reactionPopupConfig: ReactionPopupConfiguration(
    backgroundColor: Colors.white,
    onEmojiTap: (emoji, messageId){
      chatController.setReaction(emoji,messageId);
    },
  ),
  ...
)

Ajout de la configuration de la fenêtre contextuelle de réponse avec ReplyPopupConfiguration classe.

ChatView(
  ...
  replyPopupConfig: ReplyPopupConfiguration(
    backgroundColor: Colors.white,
    onUnsendTap:(message){                   // message is 'Message' class instance
       // Your code goes here
    },
    onReplyTap:(message){                    // message is 'Message' class instance
       // Your code goes here
    },
    onReportTap:(){
       // Your code goes here
    },
    onMoreTap:(){
       // Your code goes here
    },
  ),
  ...
)

Ajout de la configuration des messages répondus avec RepliedMessageConfiguration classe.

ChatView(
  ...
  repliedMessageConfig: RepliedMessageConfiguration(
    backgroundColor: Colors.blue,
    verticalBarColor: Colors.black,
  ),
  ...
)

Afficher l’indicateur de saisie et ajouter la configuration.

ChatView(
  ...
  showTypingIndicator: true, // To show idicator when receiver satrted typing
  typeIndicatorConfig: TypeIndicatorConfiguration(
    flashingCircleBrightColor: Colors.grey,
    flashingCircleDarkColor: Colors.black,
  ),
  ...
)

Ajout de la configuration de linkpreview avec LinkPreviewConfiguration classe.

ChatView(
  ...
  chatBubbleConfig: ChatBubbleConfiguration(
    linkPreviewConfig: LinkPreviewConfiguration(
      linkStyle: const TextStyle(
        color: Colors.white,
        decoration: TextDecoration.underline,
      ),
      backgroundColor: Colors.grey,
      bodyStyle: const TextStyle(
        color: Colors.grey.shade200,
        fontSize:16,
      ),
      titleStyle: const TextStyle(
        color: Colors.black,
        fontSize:20,
      ),
    ),
  )
  ...
)

Ajout de pagination.

ChatView(
  ...
  isLastPage: false,
  enablePagination: true,
  loadMoreData: chatController.loadMoreData,
  ...
)

Obtenez le chemin d’image du sélecteur d’image et ajoutez la configuration de l’icône du sélecteur d’image.

ChatView(
  ...
  sendMessageConfig: SendMessageConfiguration(
    imagePickerIconsConfig: ImagePickerIconsConfiguration(
      onImageSelected: (imagePath, error){

      },
      cameraIconColor: Colors.black,
      galleryIconColor: Colors.black,
    )
  )
  ...
)

Ajouter ChatViewState personnalisations.

ChatView(
  ...
  chatViewStateConfig: ChatViewStateConfiguration(
    loadingWidgetConfig: ChatViewStateWidgetConfiguration(
      loadingIndicatorColor: Colors.pink,
    ),
    onReloadButtonTap: () {},
  ),
  ...
)

Comment utiliser

Vérifiez Exemple application dans le Exemple ou l’onglet « Exemple » sur pub.dartlang.org pour un exemple plus complet.

Principaux contributeurs

Licence

MIT License
Copyright (c) 2022 Simform Solutions
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.