Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 🐛 add support for customize view for the reply of any message #139 #176

Merged
merged 1 commit into from
May 31, 2024
Merged

fix: 🐛 add support for customize view for the reply of any message #139 #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
## [1.3.2] (Unreleased)

* **Fix**: [139](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/139) Added
support to customize view for the reply of any message.
* **Fix**: [174](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/174) Fix
wrong username shown while replying to any messages.
* **Fix**: [134](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/134)
Added a reply message view for custom message type.
* **Feat**: [157](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/157)
Added onTap of reacted user from reacted user list
Added onTap of reacted user from reacted user list.
* **Fix**: [137](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/137) Added
support for cancel voice recording and field to provide cancel record icon.
* **Feat**: [93](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/93) Added support
Expand Down
63 changes: 63 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -681,6 +681,69 @@ ChatView(
)
```

30. Added a `replyMessageBuilder` to customize view for the reply.

```dart
ChatView(
...
replyMessageBuilder: (context, state) {
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(14),
),
),
margin: const EdgeInsets.only(
bottom: 17,
right: 0.4,
left: 0.4,
),
padding: const EdgeInsets.fromLTRB(10, 10, 10, 30),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
state.message,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
IconButton(
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: const Icon(
Icons.close,
size: 16,
),
onPressed: () => ChatView.closeReplyMessageView(context),
),
],
),
],
),
),
);
},
...
)
```



## How to use
Expand Down
8 changes: 8 additions & 0 deletions lib/src/values/typedefs.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,12 @@ typedef ReactedUserCallback = void Function(
ChatUser reactedUser,
String reaction,
);

/// customMessageType view for a reply of custom message type
typedef CustomMessageReplyViewBuilder = Widget Function(ReplyMessage state);

/// customView for replying to any message
typedef CustomViewForReplyMessage = Widget Function(
BuildContext context,
ReplyMessage state,
);
14 changes: 14 additions & 0 deletions lib/src/widgets/chat_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ class ChatView extends StatefulWidget {
this.featureActiveConfig = const FeatureActiveConfig(),
this.chatTextFieldTopPadding = 0,
this.emojiPickerSheetConfig,
this.replyMessageBuilder,
}) : chatBackgroundConfig =
chatBackgroundConfig ?? const ChatBackgroundConfiguration(),
chatViewStateConfig =
Expand Down Expand Up @@ -145,6 +146,16 @@ class ChatView extends StatefulWidget {
/// Configuration for emoji picker sheet
final Config? emojiPickerSheetConfig;

/// Provides a callback for the view when replying to message
final CustomViewForReplyMessage? replyMessageBuilder;

static void closeReplyMessageView(BuildContext context) {
final state = context.findAncestorStateOfType<_ChatViewState>();
if (state == null) return;

state.replyMessageViewClose();
}

@override
State<ChatView> createState() => _ChatViewState();
}
Expand Down Expand Up @@ -276,6 +287,7 @@ class _ChatViewState extends State<ChatView>
onReplyCloseCallback: () =>
replyMessage.value = const ReplyMessage(),
messageConfig: widget.messageConfig,
replyMessageBuilder: widget.replyMessageBuilder,
),
],
),
Expand All @@ -300,6 +312,8 @@ class _ChatViewState extends State<ChatView>
chatController.scrollToLastMessage();
}

void replyMessageViewClose() => _sendMessageKey.currentState?.onCloseTap();

void _assignReplyMessage() {
if (replyMessage.value.message.isNotEmpty) {
replyMessage.value = const ReplyMessage();
Expand Down
1 change: 0 additions & 1 deletion lib/src/widgets/reactions_bottomsheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:chatview/src/controller/chat_controller.dart';
import 'package:chatview/src/models/models.dart';
import 'package:chatview/src/utils/constants/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ReactionsBottomSheet {
Expand Down
160 changes: 87 additions & 73 deletions lib/src/widgets/send_message_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ class SendMessageWidget extends StatefulWidget {
this.onReplyCallback,
this.onReplyCloseCallback,
this.messageConfig,
this.replyMessageBuilder,
}) : super(key: key);

/// Provides call back when user tap on send button on text field.
Expand All @@ -68,6 +69,9 @@ class SendMessageWidget extends StatefulWidget {
/// Provides configuration of all types of messages.
final MessageConfiguration? messageConfig;

/// Provides a callback for the view when replying to message
final CustomViewForReplyMessage? replyMessageBuilder;

@override
State<SendMessageWidget> createState() => SendMessageWidgetState();
}
Expand Down Expand Up @@ -138,83 +142,93 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
final replyTitle =
"${PackageStrings.replyTo} $_replyTo";
if (state.message.isNotEmpty) {
return Container(
decoration: BoxDecoration(
color: widget.sendMessageConfig
?.textFieldBackgroundColor ??
Colors.white,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(14),
),
),
margin: const EdgeInsets.only(
bottom: 17,
right: 0.4,
left: 0.4,
),
padding: const EdgeInsets.fromLTRB(
leftPadding,
leftPadding,
leftPadding,
30,
),
child: Container(
margin: const EdgeInsets.only(bottom: 2),
padding: const EdgeInsets.symmetric(
vertical: 4,
horizontal: 6,
),
decoration: BoxDecoration(
color: widget.sendMessageConfig
?.replyDialogColor ??
Colors.grey.shade200,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
return widget.replyMessageBuilder
?.call(context, state) ??
Container(
decoration: BoxDecoration(
color: widget.sendMessageConfig
?.textFieldBackgroundColor ??
Colors.white,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(14),
),
),
margin: const EdgeInsets.only(
bottom: 17,
right: 0.4,
left: 0.4,
),
padding: const EdgeInsets.fromLTRB(
leftPadding,
leftPadding,
leftPadding,
30,
),
child: Container(
margin: const EdgeInsets.only(bottom: 2),
padding: const EdgeInsets.symmetric(
vertical: 4,
horizontal: 6,
),
decoration: BoxDecoration(
color: widget.sendMessageConfig
?.replyDialogColor ??
Colors.grey.shade200,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
replyTitle,
style: TextStyle(
color: widget.sendMessageConfig
?.replyTitleColor ??
Colors.deepPurple,
fontWeight: FontWeight.bold,
letterSpacing: 0.25,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
replyTitle,
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: TextStyle(
color: widget
.sendMessageConfig
?.replyTitleColor ??
Colors.deepPurple,
fontWeight: FontWeight.bold,
letterSpacing: 0.25,
),
),
),
IconButton(
constraints:
const BoxConstraints(),
padding: EdgeInsets.zero,
icon: Icon(
Icons.close,
color: widget
.sendMessageConfig
?.closeIconColor ??
Colors.black,
size: 16,
),
onPressed: onCloseTap,
),
],
),
IconButton(
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: Icon(
Icons.close,
color: widget.sendMessageConfig
?.closeIconColor ??
Colors.black,
size: 16,
),
onPressed: _onCloseTap,
ReplyMessageView(
message: state,
customMessageReplyViewBuilder: widget
.messageConfig
?.customMessageReplyViewBuilder,
sendMessageConfig:
widget.sendMessageConfig,
),
],
),
ReplyMessageView(
message: state,
customMessageReplyViewBuilder: widget
.messageConfig
?.customMessageReplyViewBuilder,
sendMessageConfig:
widget.sendMessageConfig,
),
],
),
),
);
),
);
} else {
return const SizedBox.shrink();
}
Expand Down Expand Up @@ -287,7 +301,7 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
if (widget.onReplyCallback != null) widget.onReplyCallback!(replyMessage);
}

void _onCloseTap() {
void onCloseTap() {
_replyMessage.value = const ReplyMessage();
if (widget.onReplyCloseCallback != null) widget.onReplyCloseCallback!();
}
Expand Down