Skip to content

Commit

Permalink
fix: 🐛 add support for customize view for the reply of any message #139
Browse files Browse the repository at this point in the history
  • Loading branch information
@apurva010
apurva010 committed May 30, 2024
1 parent 8816795 commit f5ad0d7
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 75 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
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
61 changes: 61 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,6 +681,67 @@ 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: [
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.replyMessageViewClose(context),
),
],
),
],
),
),
);
},
...
)
```



## How to use
Expand Down
8 changes: 8 additions & 0 deletions lib/src/values/typedefs.dart
View file
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,
);
16 changes: 16 additions & 0 deletions lib/src/widgets/chat_view.dart
View file
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 callback for reply view of message
final CustomViewForReplyMessage? replyMessageBuilder;

static void replyMessageViewClose(BuildContext context) {
final state = context.findAncestorStateOfType<_ChatViewState>();
if (state != null) {
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,10 @@ 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
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
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 callback for reply view of 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

0 comments on commit f5ad0d7

Please sign in to comment.