update deleted message

lib/src/deleted_message.dart

@@ -1,25 +1,56 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 class DeletedMessage extends StatelessWidget {
   const DeletedMessage({
     Key key,
     @required this.messageTheme,
+    this.borderRadiusGeometry,
+    this.shape,
+    this.borderSide,
   }) : super(key: key);
 
+  /// The theme of the message
   final MessageTheme messageTheme;
 
+  /// The border radius of the message text
+  final BorderRadiusGeometry borderRadiusGeometry;
+
+  /// The shape of the message text
+  final ShapeBorder shape;
+
+  /// The borderside of the message text
+  final BorderSide borderSide;
+
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Material(
-      padding: const EdgeInsets.symmetric(vertical: 8.0),
+      color: messageTheme.messageBackgroundColor,
-      child: Text(
+      shape: shape ??
-        'This message was deleted...',
+          RoundedRectangleBorder(
-        style: messageTheme.messageText.copyWith(
+            borderRadius: borderRadiusGeometry ?? BorderRadius.zero,
-          fontStyle: FontStyle.italic,
+            side: borderSide ??
-          color: Theme.of(context).brightness == Brightness.dark
+                BorderSide(
-              ? Colors.white
+                  color: Theme.of(context).brightness == Brightness.dark
-              : Colors.black,
+                      ? Colors.white.withAlpha(24)
+                      : Colors.black.withAlpha(24),
+                ),
+          ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: 8.0,
+          horizontal: 16,
+        ),
+        child: Text(
+          'Message deleted',
+          style: messageTheme.messageText.copyWith(
+            fontStyle: FontStyle.italic,
+            color: (Theme.of(context).brightness == Brightness.dark
+                    ? Colors.white
+                    : Colors.black)
+                .withOpacity(.5),
+          ),
         ),
       ),
     );

lib/src/message_list_view.dart

@@ -176,10 +176,12 @@ class _MessageListViewState extends State<MessageListView> {
         : streamChannel.channel.state.messagesStream;
 
     return StreamBuilder<List<Message>>(
-        stream: messagesStream,
+        stream: messagesStream.map((messages) => messages
-        initialData: widget.parentMessage != null
+            .where((e) =>
-            ? streamChannel.channel.state.threads[widget.parentMessage.id]
+                !e.isDeleted ||
-            : streamChannel.channel.state.messages,
+                (e.isDeleted &&
+                    e.user.id == streamChannel.channel.client.state.user.id))
+            .toList()),
         builder: (context, snapshot) {
           if (!snapshot.hasData) {
             return Center(

lib/src/message_widget.dart

@@ -286,6 +286,10 @@ class _MessageWidgetState extends State<MessageWidget> {
                                           transform: Matrix4.rotationY(
                                               widget.reverse ? pi : 0),
                                           child: DeletedMessage(
+                                            borderRadiusGeometry:
+                                                widget.borderRadiusGeometry,
+                                            borderSide: widget.borderSide,
+                                            shape: widget.shape,
                                             messageTheme: widget.messageTheme,
                                           ),
                                         )
@@ -410,6 +414,34 @@ class _MessageWidgetState extends State<MessageWidget> {
                 ),
               ),
             ),
+          if (widget.message.isDeleted)
+            Transform(
+              transform: Matrix4.rotationY(widget.reverse ? pi : 0),
+              alignment: Alignment.center,
+              child: Padding(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    StreamSvgIcon.eye(
+                      color: Colors.black.withOpacity(0.5),
+                      size: 16.0,
+                    ),
+                    SizedBox(
+                      width: 8.0,
+                    ),
+                    Text(
+                      'Only visible to you',
+                      style: TextStyle(
+                        color: Colors.black.withOpacity(0.5),
+                        fontSize: 12.0,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
         ],
       ),
     );