From c0736b4f4a398b27649acc70c3040a0788042813 Mon Sep 17 00:00:00 2001 From: Apurva Kanthraviya Date: Fri, 17 May 2024 16:11:47 +0530 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20added=20profile=20picture?= =?UTF-8?q?=20support=20with=20base=2064=20string=20data=20#142?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 3 +++ README.md | 25 +++++++++++++++++++- lib/src/models/chat_user.dart | 11 ++++++++- lib/src/models/profile_circle.dart | 4 ++++ lib/src/widgets/chat_bubble_widget.dart | 2 ++ lib/src/widgets/chat_groupedlist_widget.dart | 4 ++++ lib/src/widgets/profile_circle.dart | 12 ++++++++-- lib/src/widgets/type_indicator_widget.dart | 5 ++++ 8 files changed, 62 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 158def18..bc780a40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +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**: [126](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/126) Added flag to hide user name in chat. * **Feat**: [161](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/161) Added diff --git a/README.md b/README.md index 0f0352a4..b606d649 100644 --- a/README.md +++ b/README.md @@ -482,7 +482,7 @@ ChatView( ) ``` -19. Flag `enableOtherUserName` to hide user name in chat. +20. Flag `enableOtherUserName` to hide user name in chat. ```dart ChatView( @@ -495,6 +495,29 @@ ChatView( ) ``` +21. Field `profilePhotoBase64Data` for support of profile picture in base64 string data. + +```dart +final chatController = ChatController( + ... + chatUsers: [ + ChatUser( + id: '1', + name: 'Simform', + profilePhotoBase64Data: '', + ), + ], + ... +); +ChatView( + ... + profileCircleConfig: const ProfileCircleConfiguration( + profilePhotoBase64Data: '', + ), + ... +) +``` + ## How to use diff --git a/lib/src/models/chat_user.dart b/lib/src/models/chat_user.dart index 46840ac7..4890ddac 100644 --- a/lib/src/models/chat_user.dart +++ b/lib/src/models/chat_user.dart @@ -29,21 +29,30 @@ class ChatUser { /// Provides profile picture URL of user. final String? profilePhoto; + /// Provides profile picture's data in base64 string + final String? profilePhotoBase64Data; + ChatUser({ required this.id, required this.name, this.profilePhoto, - }); + this.profilePhotoBase64Data, + }) : assert( + !(profilePhoto != null && profilePhotoBase64Data != null), + 'Please provide either profilePhoto or profilePhotoData', + ); factory ChatUser.fromJson(Map json) => ChatUser( id: json["id"], name: json["name"], profilePhoto: json["profilePhoto"], + profilePhotoBase64Data: json['profilePhotoBase64Data'], ); Map toJson() => { 'id': id, 'name': name, 'profilePhoto': profilePhoto, + 'profilePhotoData': profilePhotoBase64Data, }; } diff --git a/lib/src/models/profile_circle.dart b/lib/src/models/profile_circle.dart index dd4ad94c..f668bfee 100644 --- a/lib/src/models/profile_circle.dart +++ b/lib/src/models/profile_circle.dart @@ -30,6 +30,9 @@ class ProfileCircleConfiguration { /// Provides image url of user final String? profileImageUrl; + /// Provides profile picture's data in base64 string + final String? profilePhotoBase64Data; + /// Used for give bottom padding to profile circle final double? bottomPadding; @@ -49,5 +52,6 @@ class ProfileCircleConfiguration { this.bottomPadding, this.circleRadius, this.onAvatarLongPress, + this.profilePhotoBase64Data, }); } diff --git a/lib/src/widgets/chat_bubble_widget.dart b/lib/src/widgets/chat_bubble_widget.dart index 06cdf003..6e17e2c6 100644 --- a/lib/src/widgets/chat_bubble_widget.dart +++ b/lib/src/widgets/chat_bubble_widget.dart @@ -172,6 +172,7 @@ class _ChatBubbleWidgetState extends State { : profileCircleConfig?.bottomPadding ?? 2, profileCirclePadding: profileCircleConfig?.padding, imageUrl: messagedUser?.profilePhoto, + imageBase64Data: messagedUser?.profilePhotoBase64Data, circleRadius: profileCircleConfig?.circleRadius, onTap: () => _onAvatarTap(messagedUser), onLongPress: () => _onAvatarLongPress(messagedUser), @@ -231,6 +232,7 @@ class _ChatBubbleWidgetState extends State { : profileCircleConfig?.bottomPadding ?? 2, profileCirclePadding: profileCircleConfig?.padding, imageUrl: currentUser?.profilePhoto, + imageBase64Data: currentUser?.profilePhotoBase64Data, circleRadius: profileCircleConfig?.circleRadius, onTap: () => _onAvatarTap(messagedUser), onLongPress: () => _onAvatarLongPress(messagedUser), diff --git a/lib/src/widgets/chat_groupedlist_widget.dart b/lib/src/widgets/chat_groupedlist_widget.dart index f7add934..e76655ba 100644 --- a/lib/src/widgets/chat_groupedlist_widget.dart +++ b/lib/src/widgets/chat_groupedlist_widget.dart @@ -198,6 +198,8 @@ class _ChatGroupedListWidgetState extends State chatBubbleConfig: chatBubbleConfig?.inComingChatBubbleConfig, showIndicator: widget.showTypingIndicator, profilePic: profileCircleConfig?.profileImageUrl, + profilePicBase64Data: + profileCircleConfig?.profilePhotoBase64Data, ) : ValueListenableBuilder( valueListenable: ChatViewInheritedWidget.of(context)! @@ -209,6 +211,8 @@ class _ChatGroupedListWidgetState extends State chatBubbleConfig?.inComingChatBubbleConfig, showIndicator: value, profilePic: profileCircleConfig?.profileImageUrl, + profilePicBase64Data: + profileCircleConfig?.profilePhotoBase64Data, )), SizedBox( height: (MediaQuery.of(context).size.width * diff --git a/lib/src/widgets/profile_circle.dart b/lib/src/widgets/profile_circle.dart index 06235e01..641e70fe 100644 --- a/lib/src/widgets/profile_circle.dart +++ b/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,6 +33,7 @@ class ProfileCircle extends StatelessWidget { this.circleRadius, this.onTap, this.onLongPress, + this.imageBase64Data, }) : super(key: key); /// Allow users to give default bottom padding according to user case. @@ -39,6 +42,9 @@ class ProfileCircle extends StatelessWidget { /// Allow user to pass image url of user's profile picture. final String? imageUrl; + /// Provides profile picture's data in base64 string + final String? imageBase64Data; + /// Allow user to set whole padding of profile circle view. final EdgeInsetsGeometry? profileCirclePadding; @@ -61,7 +67,9 @@ class ProfileCircle extends StatelessWidget { onTap: onTap, child: CircleAvatar( radius: circleRadius ?? 16, - backgroundImage: NetworkImage(imageUrl ?? profileImage), + backgroundImage: imageBase64Data != null + ? MemoryImage(base64Decode(imageBase64Data!)) + : NetworkImage(imageUrl ?? profileImage) as ImageProvider, ), ), ); diff --git a/lib/src/widgets/type_indicator_widget.dart b/lib/src/widgets/type_indicator_widget.dart index 9f0dd5ed..66264835 100644 --- a/lib/src/widgets/type_indicator_widget.dart +++ b/lib/src/widgets/type_indicator_widget.dart @@ -34,6 +34,7 @@ class TypingIndicator extends StatefulWidget { this.profilePic, this.chatBubbleConfig, this.typeIndicatorConfig, + this.profilePicBase64Data, }) : super(key: key); /// Allow user to turn on/off typing indicator. @@ -42,6 +43,9 @@ class TypingIndicator extends StatefulWidget { /// Represents profile picture url of user. final String? profilePic; + /// Provides profile picture's data in base64 string + final String? profilePicBase64Data; + /// Provides configurations related to chat bubble such as padding, margin, max /// width etc. final ChatBubble? chatBubbleConfig; @@ -237,6 +241,7 @@ class _TypingIndicatorState extends State ProfileCircle( bottomPadding: 0, imageUrl: widget.profilePic, + imageBase64Data: widget.profilePicBase64Data, ), bubble, ],