fix: 🐛 added profile picture support with base 64 string data #142

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [1.3.2] (Unreleased)
 
+* **Fix**: [142](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/142) Added
+  field to provide base64 string data for profile picture.
 * **Fix**: [164](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/164)
   Add flag to enable/disable chat text field.
 * **Feat**: [121](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/121)Added support

README.md

@@ -574,6 +574,32 @@ ChatView(
  
 )
 ```
+25. Added flag `isProfilePhotoInBase64` that defines whether provided image is url or base64 data.
+
+```dart
+final chatController = ChatController(
+  ...
+    chatUsers: [
+      ChatUser(
+        id: '1',
+        name: 'Simform',
+        isProfilePhotoInBase64: false,
+        profilePhoto: 'ImageNetworkUrl',
+      ),
+    ],
+  ...
+);
+
+ChatView(
+   ...
+      profileCircleConfig: const ProfileCircleConfiguration(
+        isProfilePhotoInBase64: false,
+        profileImageUrl: 'ImageNetworkUrl',
+      ),
+   ...
+)
+```
+
 
 
 ## How to use

lib/src/models/chat_user.dart

@@ -27,23 +27,32 @@ class ChatUser {
   final String name;
 
   /// Provides profile picture URL of user.
+  /// Or
+  /// Provides profile picture's data in base64 string.
+  /// This will be determined by [isProfilePhotoInBase64].
   final String? profilePhoto;
 
+  /// To check whether profile photo is in base64 or network url.
+  final bool? isProfilePhotoInBase64;
+
   ChatUser({
     required this.id,
     required this.name,
     this.profilePhoto,
+    this.isProfilePhotoInBase64,
   });
 
   factory ChatUser.fromJson(Map<String, dynamic> json) => ChatUser(
         id: json["id"],
         name: json["name"],
         profilePhoto: json["profilePhoto"],
+        isProfilePhotoInBase64: json["isProfilePhotoInBase64"],
       );
 
   Map<String, dynamic> toJson() => {
         'id': id,
         'name': name,
         'profilePhoto': profilePhoto,
+        'isProfilePhotoInBase64': isProfilePhotoInBase64,
       };
 }

lib/src/models/profile_circle.dart

@@ -27,7 +27,10 @@ class ProfileCircleConfiguration {
   /// Used to give padding to profile circle.
   final EdgeInsetsGeometry? padding;
 
-  /// Provides image url of user
+  /// Provides image url of user.
+  /// Or
+  /// Provides image data of user in base64
+  /// This will be determined by [isProfilePhotoInBase64].
   final String? profileImageUrl;
 
   /// Used for give bottom padding to profile circle
@@ -42,12 +45,16 @@ class ProfileCircleConfiguration {
   /// Provides callback when user long press on profile circle.
   final void Function(ChatUser)? onAvatarLongPress;
 
+  /// To check whether profile photo is in base64 or network url.
+  final bool? isProfilePhotoInBase64;
+
   const ProfileCircleConfiguration({
     this.onAvatarTap,
     this.padding,
     this.profileImageUrl,
     this.bottomPadding,
     this.circleRadius,
     this.onAvatarLongPress,
+    this.isProfilePhotoInBase64,
   });
 }

lib/src/widgets/chat_bubble_widget.dart

@@ -172,6 +172,7 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
                   : profileCircleConfig?.bottomPadding ?? 2,
               profileCirclePadding: profileCircleConfig?.padding,
               imageUrl: messagedUser?.profilePhoto,
+              isProfilePhotoInBase64: messagedUser?.isProfilePhotoInBase64,
               circleRadius: profileCircleConfig?.circleRadius,
               onTap: () => _onAvatarTap(messagedUser),
               onLongPress: () => _onAvatarLongPress(messagedUser),
@@ -231,6 +232,7 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
                   : profileCircleConfig?.bottomPadding ?? 2,
               profileCirclePadding: profileCircleConfig?.padding,
               imageUrl: currentUser?.profilePhoto,
+              isProfilePhotoInBase64: currentUser?.isProfilePhotoInBase64,
               circleRadius: profileCircleConfig?.circleRadius,
               onTap: () => _onAvatarTap(messagedUser),
               onLongPress: () => _onAvatarLongPress(messagedUser),

lib/src/widgets/chat_groupedlist_widget.dart

@@ -198,6 +198,8 @@ class _ChatGroupedListWidgetState extends State<ChatGroupedListWidget>
                   chatBubbleConfig: chatBubbleConfig?.inComingChatBubbleConfig,
                   showIndicator: widget.showTypingIndicator,
                   profilePic: profileCircleConfig?.profileImageUrl,
+                  isProfilePhotoInBase64:
+                      profileCircleConfig?.isProfilePhotoInBase64,
                 )
               : ValueListenableBuilder(
                   valueListenable: ChatViewInheritedWidget.of(context)!
@@ -209,6 +211,8 @@ class _ChatGroupedListWidgetState extends State<ChatGroupedListWidget>
                             chatBubbleConfig?.inComingChatBubbleConfig,
                         showIndicator: value,
                         profilePic: profileCircleConfig?.profileImageUrl,
+                        isProfilePhotoInBase64:
+                            profileCircleConfig?.isProfilePhotoInBase64,
                       )),
           SizedBox(
             height: (MediaQuery.of(context).size.width *

lib/src/widgets/profile_circle.dart

@@ -19,8 +19,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import 'package:flutter/material.dart';
+import 'dart:convert';
+
 import 'package:chatview/src/utils/constants/constants.dart';
+import 'package:flutter/material.dart';
 
 class ProfileCircle extends StatelessWidget {
   const ProfileCircle({
@@ -31,14 +33,21 @@ class ProfileCircle extends StatelessWidget {
     this.circleRadius,
     this.onTap,
     this.onLongPress,
+    this.isProfilePhotoInBase64,
   }) : super(key: key);
 
   /// Allow users to give  default bottom padding according to user case.
   final double bottomPadding;
 
   /// Allow user to pass image url of user's profile picture.
+  /// Or
+  /// Allow user to pass image data of user's profile picture in base64.
+  /// This will be determined by [isProfilePhotoInBase64].
   final String? imageUrl;
 
+  /// To check whether profile photo is in base64 or network url.
+  final bool? isProfilePhotoInBase64;
+
   /// Allow user to set whole padding of profile circle view.
   final EdgeInsetsGeometry? profileCirclePadding;
 
@@ -61,7 +70,9 @@ class ProfileCircle extends StatelessWidget {
         onTap: onTap,
         child: CircleAvatar(
           radius: circleRadius ?? 16,
-          backgroundImage: NetworkImage(imageUrl ?? profileImage),
+          backgroundImage: (isProfilePhotoInBase64 ?? false) && imageUrl != null
+              ? MemoryImage(base64Decode(imageUrl!))
+              : NetworkImage(imageUrl ?? profileImage) as ImageProvider,
         ),
       ),
     );

lib/src/widgets/type_indicator_widget.dart

@@ -34,14 +34,21 @@ class TypingIndicator extends StatefulWidget {
     this.profilePic,
     this.chatBubbleConfig,
     this.typeIndicatorConfig,
+    this.isProfilePhotoInBase64,
   }) : super(key: key);
 
   /// Allow user to turn on/off typing indicator.
   final bool showIndicator;
 
   /// Represents profile picture url of user.
+  /// Or
+  /// Provides profile picture's data in base64 string.
+  /// This will be determined by [isProfilePhotoInBase64].
   final String? profilePic;
 
+  /// Provides profile picture's data in base64 string
+  final bool? isProfilePhotoInBase64;
+
   /// Provides configurations related to chat bubble such as padding, margin, max
   /// width etc.
   final ChatBubble? chatBubbleConfig;
@@ -237,6 +244,7 @@ class _TypingIndicatorState extends State<TypingIndicator>
             ProfileCircle(
               bottomPadding: 0,
               imageUrl: widget.profilePic,
+              isProfilePhotoInBase64: widget.isProfilePhotoInBase64,
             ),
             bubble,
           ],