From 65414a5ec25d21cef79555143638d88ab2d9bcf3 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 | 2 ++ README.md | 26 ++++++++++++++++++++ lib/src/models/chat_user.dart | 9 +++++++ lib/src/models/profile_circle.dart | 9 ++++++- lib/src/widgets/chat_bubble_widget.dart | 2 ++ lib/src/widgets/chat_groupedlist_widget.dart | 4 +++ lib/src/widgets/profile_circle.dart | 15 +++++++++-- lib/src/widgets/type_indicator_widget.dart | 8 ++++++ 8 files changed, 72 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d1f58c2..8c707ee7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index f95c2fb1..a6ea91b4 100644 --- a/README.md +++ b/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 diff --git a/lib/src/models/chat_user.dart b/lib/src/models/chat_user.dart index 46840ac7..ac5fc92d 100644 --- a/lib/src/models/chat_user.dart +++ b/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 json) => ChatUser( id: json["id"], name: json["name"], profilePhoto: json["profilePhoto"], + isProfilePhotoInBase64: json["isProfilePhotoInBase64"], ); Map toJson() => { 'id': id, 'name': name, 'profilePhoto': profilePhoto, + 'isProfilePhotoInBase64': isProfilePhotoInBase64, }; } diff --git a/lib/src/models/profile_circle.dart b/lib/src/models/profile_circle.dart index dd4ad94c..8e396aa2 100644 --- a/lib/src/models/profile_circle.dart +++ b/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,6 +45,9 @@ 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, @@ -49,5 +55,6 @@ class ProfileCircleConfiguration { this.bottomPadding, this.circleRadius, this.onAvatarLongPress, + this.isProfilePhotoInBase64, }); } diff --git a/lib/src/widgets/chat_bubble_widget.dart b/lib/src/widgets/chat_bubble_widget.dart index 06cdf003..1c62903f 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, + isProfilePhotoInBase64: messagedUser?.isProfilePhotoInBase64, 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, + isProfilePhotoInBase64: currentUser?.isProfilePhotoInBase64, 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..32eb607c 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, + isProfilePhotoInBase64: + profileCircleConfig?.isProfilePhotoInBase64, ) : ValueListenableBuilder( valueListenable: ChatViewInheritedWidget.of(context)! @@ -209,6 +211,8 @@ class _ChatGroupedListWidgetState extends State chatBubbleConfig?.inComingChatBubbleConfig, showIndicator: value, profilePic: profileCircleConfig?.profileImageUrl, + isProfilePhotoInBase64: + profileCircleConfig?.isProfilePhotoInBase64, )), 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..ffa0fdd9 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,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, ), ), ); diff --git a/lib/src/widgets/type_indicator_widget.dart b/lib/src/widgets/type_indicator_widget.dart index 9f0dd5ed..36febd83 100644 --- a/lib/src/widgets/type_indicator_widget.dart +++ b/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 ProfileCircle( bottomPadding: 0, imageUrl: widget.profilePic, + isProfilePhotoInBase64: widget.isProfilePhotoInBase64, ), bubble, ],