Merge branch 'feature/new-ui' into feature/image-detail

2020-11-26 17:17:24 +01:00
parent e746a6e16f 5ac0c60d6f
commit 87cc2f2ff5
134 changed files with 3100 additions and 2585 deletions
@@ -1,18 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/unread_indicator.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';

 class StreamBackButton extends StatelessWidget {
  const StreamBackButton({
    Key key,
    this.onPressed,
-    this.icon = Icons.arrow_back_ios_outlined,
    this.showUnreads = false,
  }) : super(key: key);

  final VoidCallback onPressed;
-  final IconData icon;
  final bool showUnreads;

  @override
@@ -33,11 +30,10 @@ class StreamBackButton extends StatelessWidget {
              if (onPressed != null) {
                onPressed();
              } else {
-                Navigator.of(context).pop();
+                Navigator.maybePop(context);
              }
            },
-            child: Icon(
-              icon ?? StreamIcons.left,
+            child: StreamSvgIcon.left(
              size: 24,
              color: Theme.of(context).brightness == Brightness.dark
                  ? Colors.white
@@ -1,7 +1,6 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';

 import 'channel_info.dart';
@@ -73,8 +72,7 @@ class ChannelBottomSheet extends StatelessWidget {
                initialData: channel.isMuted,
                builder: (context, snapshot) {
                  return ListTile(
-                    leading: Icon(
-                      StreamIcons.mute,
+                    leading: StreamSvgIcon.mute(
                      size: 22,
                      color: StreamChatTheme.of(context).primaryIconTheme.color,
                    ),
@@ -94,8 +92,7 @@ class ChannelBottomSheet extends StatelessWidget {
            Divider(),
            if (channel.isGroup && !channel.isDistinct)
              ListTile(
-                leading: Icon(
-                  StreamIcons.user_minus,
+                leading: StreamSvgIcon.userRemove(
                  size: 22,
                  color: Colors.black,
                ),
@@ -64,12 +64,16 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
  /// Callback to call when the image is tapped.
  final VoidCallback onImageTap;

+  /// If true the typing indicator will be rendered if a user is typing
+  final bool showTypingIndicator;
+
  /// Creates a channel header
  ChannelHeader({
    Key key,
    this.showBackButton = true,
    this.onBackPressed,
    this.onTitleTap,
+    this.showTypingIndicator = true,
    this.onImageTap,
  })  : preferredSize = Size.fromHeight(kToolbarHeight),
        super(key: key);
@@ -114,7 +118,9 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
                    .channelHeaderTheme
                    .title,
              ),
+              SizedBox(height: 2),
              ChannelInfo(
+                showTypingIndicator: showTypingIndicator,
                channel: channel,
                textStyle:
                    StreamChatTheme.of(context).channelPreviewTheme.subtitle,
@@ -8,16 +8,47 @@ class ChannelInfo extends StatelessWidget {
  /// The style of the text displayed
  final TextStyle textStyle;

+  /// If true the typing indicator will be rendered if a user is typing
+  final bool showTypingIndicator;
+
  const ChannelInfo({
    Key key,
    @required this.channel,
    this.textStyle,
+    this.showTypingIndicator = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
+    final client = StreamChat.of(context).client;
+    return StreamBuilder<List<Member>>(
+      stream: channel.state.membersStream,
+      initialData: channel.state.members,
+      builder: (context, snapshot) {
+        return ValueListenableBuilder(
+          valueListenable: client.wsConnectionStatus,
+          builder: (context, status, child) {
+            switch (status) {
+              case ConnectionStatus.connected:
+                return _buildConnectedTitleState(context, snapshot.data);
+              case ConnectionStatus.connecting:
+                return _buildConnectingTitleState(context);
+              case ConnectionStatus.disconnected:
+                return _buildDisconnectedTitleState(context, client);
+              default:
+                return Offstage();
+            }
+          },
+        );
+      },
+    );
+  }
+
+  Widget _buildConnectedTitleState(BuildContext context, List<Member> members) {
+    var alternativeWidget;
+
    if (channel.memberCount != null && channel.memberCount > 2) {
-      return Text(
+      alternativeWidget = Text(
        '${channel.memberCount} Members, ${channel.state.watcherCount} Online',
        style: StreamChatTheme.of(context)
            .channelTheme
@@ -25,35 +56,89 @@ class ChannelInfo extends StatelessWidget {
            .lastMessageAt,
      );
    } else {
-      return StreamBuilder<List<Member>>(
-        stream: channel.state.membersStream,
-        initialData: channel.state.members,
-        builder: (context, snapshot) {
-          final otherMember = snapshot.data.firstWhere(
-            (element) => element.userId != StreamChat.of(context).user.id,
-            orElse: () => null,
+      final otherMember = members.firstWhere(
+        (element) => element.userId != StreamChat.of(context).user.id,
+        orElse: () => null,
+      );
+
+      if (otherMember != null) {
+        if (otherMember.user.online) {
+          alternativeWidget = Text(
+            'Online',
+            style: StreamChatTheme.of(context)
+                .channelTheme
+                .channelHeaderTheme
+                .lastMessageAt,
          );
-
-          if (otherMember == null) {
-            return SizedBox();
-          }
-
-          if (otherMember.user.online) {
-            return Text(
-              'Online',
-              style: StreamChatTheme.of(context)
-                  .channelTheme
-                  .channelHeaderTheme
-                  .lastMessageAt,
-            );
-          }
-
-          return Text(
+        } else {
+          alternativeWidget = Text(
            'Last seen ${Jiffy(otherMember.user.lastActive).fromNow()}',
            style: textStyle,
          );
-        },
-      );
+        }
+      }
    }
+
+    if (!showTypingIndicator) {
+      return alternativeWidget;
+    }
+
+    return TypingIndicator(
+      alignment: Alignment.center,
+      alternativeWidget: alternativeWidget,
+      style: textStyle,
+    );
+  }
+
+  Widget _buildConnectingTitleState(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Container(
+          height: 16,
+          width: 16,
+          child: Center(
+            child: CircularProgressIndicator(),
+          ),
+        ),
+        SizedBox(width: 10),
+        Text(
+          'Searching for Network',
+          style: textStyle,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildDisconnectedTitleState(BuildContext context, Client client) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(
+          'Offline...',
+          style: textStyle,
+        ),
+        TextButton(
+          style: TextButton.styleFrom(
+            padding: const EdgeInsets.all(0),
+            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+            visualDensity: VisualDensity(
+              horizontal: VisualDensity.minimumDensity,
+              vertical: VisualDensity.minimumDensity,
+            ),
+          ),
+          onPressed: () async {
+            await client.disconnect();
+            return client.connect();
+          },
+          child: Text(
+            'Try Again',
+            style: textStyle.copyWith(
+              color: Color(0xFF006CFF),
+            ),
+          ),
+        ),
+      ],
+    );
  }
 }
@@ -0,0 +1,223 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+import 'stream_chat.dart';
+
+typedef _TitleBuilder = Widget Function(
+  BuildContext context,
+  ConnectionStatus status,
+  Client client,
+);
+
+///
+/// It shows the current [Client] status.
+///
+/// ```dart
+/// class MyApp extends StatelessWidget {
+///   final Client client;
+///
+///   MyApp(this.client);
+///
+///   @override
+///   Widget build(BuildContext context) {
+///     return MaterialApp(
+///       home: StreamChat(
+///         client: client,
+///         child: Scaffold(
+///             appBar: ChannelListHeader(),
+///           ),
+///         ),
+///     );
+///   }
+/// }
+/// ```
+///
+/// Usually you would use this widget as an [AppBar] inside a [Scaffold].
+/// However you can also use it as a normal widget.
+///
+/// The widget by default uses the inherited [Client] to fetch information about the status.
+/// However you can also pass your own [Client] if you don't have it in the widget tree.
+///
+/// The widget components render the ui based on the first ancestor of type [StreamChatTheme] and on its [ChannelTheme.channelHeaderTheme] property.
+/// Modify it to change the widget appearance.
+class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
+  /// Instantiates a ChannelListHeader
+  const ChannelListHeader({
+    Key key,
+    this.client,
+    this.titleBuilder,
+    this.onUserAvatarTap,
+    this.onNewChatButtonTap,
+  }) : super(key: key);
+
+  /// Pass this if you don't have a [Client] in your widget tree.
+  final Client client;
+
+  /// Use this to build your own title as per different [ConnectionStatus]
+  final _TitleBuilder titleBuilder;
+
+  /// Callback to call when pressing the user avatar button.
+  /// By default it calls Scaffold.of(context).openDrawer()
+  final Function(User) onUserAvatarTap;
+
+  /// Callback to call when pressing the new chat button.
+  final VoidCallback onNewChatButtonTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final _client = client ?? StreamChat.of(context).client;
+    final user = _client.state.user;
+    return AppBar(
+      brightness: Theme.of(context).brightness,
+      elevation: 1,
+      backgroundColor:
+          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+      centerTitle: true,
+      leading: Center(
+        child: UserAvatar(
+          user: user,
+          showOnlineStatus: false,
+          onTap: onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
+          borderRadius: BorderRadius.circular(20),
+          constraints: BoxConstraints.tightFor(
+            height: 40,
+            width: 40,
+          ),
+        ),
+      ),
+      actions: [
+        StreamNeumorphicButton(
+          child: IconButton(
+            icon: ValueListenableBuilder<ConnectionStatus>(
+              valueListenable: _client.wsConnectionStatus,
+              builder: (context, status, child) {
+                var color;
+                switch (status) {
+                  case ConnectionStatus.connected:
+                    color = Color(0xFF006CFF);
+                    break;
+                  case ConnectionStatus.connecting:
+                    color = Colors.grey;
+                    break;
+                  case ConnectionStatus.disconnected:
+                    color = Colors.grey;
+                    break;
+                }
+                return SvgPicture.asset(
+                  'svgs/icon_pen_write.svg',
+                  package: 'stream_chat_flutter',
+                  width: 24.0,
+                  height: 24.0,
+                  color: color,
+                );
+              },
+            ),
+            onPressed: onNewChatButtonTap,
+          ),
+        )
+      ],
+      title: ValueListenableBuilder<ConnectionStatus>(
+        valueListenable: _client.wsConnectionStatus,
+        builder: (context, status, child) {
+          if (titleBuilder != null) {
+            return titleBuilder(context, status, _client);
+          }
+          switch (status) {
+            case ConnectionStatus.connected:
+              return _buildConnectedTitleState(context);
+            case ConnectionStatus.connecting:
+              return _buildConnectingTitleState(context);
+            case ConnectionStatus.disconnected:
+              return _buildDisconnectedTitleState(context, _client);
+            default:
+              return Offstage();
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildConnectedTitleState(BuildContext context) => Text(
+        'Stream Chat',
+        style: StreamChatTheme.of(context)
+            .channelTheme
+            .channelHeaderTheme
+            .title
+            .copyWith(
+              fontSize: 16,
+              fontWeight: FontWeight.bold,
+            ),
+      );
+
+  Widget _buildConnectingTitleState(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Container(
+          height: 16,
+          width: 16,
+          child: Center(
+            child: CircularProgressIndicator(),
+          ),
+        ),
+        SizedBox(width: 10),
+        Text(
+          'Searching for Network',
+          style: StreamChatTheme.of(context)
+              .channelTheme
+              .channelHeaderTheme
+              .title
+              .copyWith(
+                fontSize: 16,
+                fontWeight: FontWeight.bold,
+              ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildDisconnectedTitleState(BuildContext context, Client client) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(
+          'Offline...',
+          style: StreamChatTheme.of(context)
+              .channelTheme
+              .channelHeaderTheme
+              .title
+              .copyWith(
+                fontSize: 16,
+                fontWeight: FontWeight.bold,
+              ),
+        ),
+        TextButton(
+          onPressed: () async {
+            await client.disconnect();
+            return client.connect();
+          },
+          child: Text(
+            'Try Again',
+            style: StreamChatTheme.of(context)
+                .channelTheme
+                .channelHeaderTheme
+                .title
+                .copyWith(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                  color: Color(0xFF006CFF),
+                ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(kToolbarHeight);
+}
@@ -7,6 +7,7 @@ import 'package:flutter_slidable/flutter_slidable.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/channels_bloc.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';

 import '../stream_chat_flutter.dart';
@@ -166,123 +167,123 @@ class _ChannelListViewState extends State<ChannelListView>
    ChannelsBlocState channelsBlocState,
  ) {
    return StreamBuilder<List<Channel>>(
-        stream: channelsBlocState.channelsStream,
-        builder: (context, snapshot) {
-          var child;
-          if (snapshot.hasError) {
-            child = _buildErrorWidget(
-              snapshot,
-              context,
-              channelsBlocState,
-            );
-          } else if (!snapshot.hasData) {
-            child = _buildLoadingWidget();
-          } else {
-            final channels = snapshot.data;
+      stream: channelsBlocState.channelsStream,
+      builder: (context, snapshot) {
+        var child;
+        if (snapshot.hasError) {
+          child = _buildErrorWidget(
+            snapshot,
+            context,
+            channelsBlocState,
+          );
+        } else if (!snapshot.hasData) {
+          child = _buildLoadingWidget();
+        } else {
+          final channels = snapshot.data;

-            if (channels.isEmpty && widget.emptyBuilder != null) {
-              child = widget.emptyBuilder(context);
-            }
+          if (channels.isEmpty && widget.emptyBuilder != null) {
+            child = widget.emptyBuilder(context);
+          }

-            if (channels.isEmpty && widget.emptyBuilder == null) {
-              child = LayoutBuilder(
-                builder: (context, viewportConstraints) {
-                  return SingleChildScrollView(
-                    physics: AlwaysScrollableScrollPhysics(),
-                    child: Stack(
-                      children: [
-                        ConstrainedBox(
-                          constraints: BoxConstraints(
-                            minHeight: viewportConstraints.maxHeight,
-                          ),
-                          child: Column(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [
-                              Padding(
-                                padding: const EdgeInsets.all(8.0),
-                                child: Icon(
-                                  StreamIcons.message,
-                                  size: 136,
-                                  color: Color(0xffDBDBDB),
-                                ),
-                              ),
-                              Padding(
-                                padding: const EdgeInsets.all(8.0),
-                                child: Text(
-                                  'Let’s start chatting!',
-                                  style: TextStyle(
-                                    fontSize: 16,
-                                  ),
-                                ),
-                              ),
-                              Padding(
-                                padding: const EdgeInsets.symmetric(
-                                  vertical: 8.0,
-                                  horizontal: 52,
-                                ),
-                                child: Text(
-                                  'How about sending your first message to a friend?',
-                                  textAlign: TextAlign.center,
-                                  style: TextStyle(
-                                    fontSize: 14,
-                                    color: Color(0xff7A7A7A),
-                                  ),
-                                ),
-                              ),
-                            ],
-                          ),
+          if (channels.isEmpty && widget.emptyBuilder == null) {
+            child = LayoutBuilder(
+              builder: (context, viewportConstraints) {
+                return SingleChildScrollView(
+                  physics: AlwaysScrollableScrollPhysics(),
+                  child: Stack(
+                    children: [
+                      ConstrainedBox(
+                        constraints: BoxConstraints(
+                          minHeight: viewportConstraints.maxHeight,
                        ),
-                        if (widget.onStartChatPressed != null)
-                          Positioned(
-                            right: 0,
-                            left: 0,
-                            bottom: 32,
-                            child: Center(
-                              child: FlatButton(
-                                onPressed: widget.onStartChatPressed,
-                                child: Text(
-                                  'Start a chat',
-                                  style: TextStyle(
-                                    color:
-                                        StreamChatTheme.of(context).accentColor,
-                                    fontWeight: FontWeight.bold,
-                                  ),
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Padding(
+                              padding: const EdgeInsets.all(8.0),
+                              child: StreamSvgIcon.message(
+                                size: 136,
+                                color: Color(0xffDBDBDB),
+                              ),
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.all(8.0),
+                              child: Text(
+                                'Let’s start chatting!',
+                                style: TextStyle(
+                                  fontSize: 16,
+                                ),
+                              ),
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.symmetric(
+                                vertical: 8.0,
+                                horizontal: 52,
+                              ),
+                              child: Text(
+                                'How about sending your first message to a friend?',
+                                textAlign: TextAlign.center,
+                                style: TextStyle(
+                                  fontSize: 14,
+                                  color: Color(0xff7A7A7A),
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      if (widget.onStartChatPressed != null)
+                        Positioned(
+                          right: 0,
+                          left: 0,
+                          bottom: 32,
+                          child: Center(
+                            child: FlatButton(
+                              onPressed: widget.onStartChatPressed,
+                              child: Text(
+                                'Start a chat',
+                                style: TextStyle(
+                                  color:
+                                      StreamChatTheme.of(context).accentColor,
+                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
-                      ],
-                    ),
-                  );
-                },
-              );
-            }
-
-            if (channels.isNotEmpty) {
-              child = ListView.custom(
-                physics: AlwaysScrollableScrollPhysics(),
-                controller: _scrollController,
-                childrenDelegate: SliverChildBuilderDelegate(
-                  (context, i) {
-                    return _itemBuilder(context, i, channels);
-                  },
-                  childCount: (channels.length * 2) + 1,
-                  findChildIndexCallback: (key) {
-                    final ValueKey<String> valueKey = key;
-                    final index = channels.indexWhere(
-                        (channel) => 'CHANNEL-${channel.id}' == valueKey.value);
-                    return index != -1 ? (index * 2) : null;
-                  },
-                ),
-              );
-            }
+                        ),
+                    ],
+                  ),
+                );
+              },
+            );
          }

-          return AnimatedSwitcher(
-            child: child,
-            duration: Duration(milliseconds: 500),
-          );
-        });
+          if (channels.isNotEmpty) {
+            child = ListView.custom(
+              physics: AlwaysScrollableScrollPhysics(),
+              controller: _scrollController,
+              childrenDelegate: SliverChildBuilderDelegate(
+                (context, i) {
+                  return _itemBuilder(context, i, channels);
+                },
+                childCount: (channels.length * 2) + 1,
+                findChildIndexCallback: (key) {
+                  final ValueKey<String> valueKey = key;
+                  final index = channels.indexWhere(
+                      (channel) => 'CHANNEL-${channel.id}' == valueKey.value);
+                  return index != -1 ? (index * 2) : null;
+                },
+              ),
+            );
+          }
+        }
+
+        return AnimatedSwitcher(
+          child: child,
+          duration: Duration(milliseconds: 500),
+        );
+      },
+    );
  }

  Widget _buildLoadingWidget() {
@@ -517,7 +518,7 @@ class _ChannelListViewState extends State<ChannelListView>
                  ),
                  IconSlideAction(
                    color: backgroundColor,
-                    icon: StreamIcons.mute,
+                    iconWidget: StreamSvgIcon.mute(),
                    onTap: () async {
                      if (!channel.isMuted) {
                        await channel.mute();
@@ -529,7 +530,7 @@ class _ChannelListViewState extends State<ChannelListView>
                  if (channel.isGroup && !channel.isDistinct)
                    IconSlideAction(
                      color: backgroundColor,
-                      icon: StreamIcons.user_minus,
+                      iconWidget: StreamSvgIcon.userRemove(),
                      onTap: () async {
                        final confirm = await showConfirmationDialog(
                          context,
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';

 import '../stream_chat_flutter.dart';
 import 'channel_name.dart';
@@ -103,7 +104,7 @@ class ChannelPreview extends StatelessWidget {
                                        .isAfter(channel
                                            .state.lastMessage.createdAt))
                                    .length ==
-                                (channel.memberCount ?? 0) - 1,
+                                (channel.memberCount ?? 0),
                          ),
                        );
                      }
@@ -152,8 +153,7 @@ class ChannelPreview extends StatelessWidget {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
-          Icon(
-            StreamIcons.mute,
+          StreamSvgIcon.mute(
            size: 16,
          ),
          Text(
@@ -0,0 +1,20 @@
+import 'dart:async';
+import 'package:synchronized/synchronized.dart';
+import 'package:video_compress/video_compress.dart';
+
+class ICompressVideoService {
+  static final ICompressVideoService instance = ICompressVideoService._();
+  final _lock = Lock();
+  ICompressVideoService._();
+
+  Future<MediaInfo> compressVideo(String path) async {
+    return _lock.synchronized(() {
+      return VideoCompress.compressVideo(
+        path,
+      );
+    });
+  }
+}
+
+ICompressVideoService get CompressVideoService =>
+    ICompressVideoService.instance;
@@ -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(
-      padding: const EdgeInsets.symmetric(vertical: 8.0),
-      child: Text(
-        'This message was deleted...',
-        style: messageTheme.messageText.copyWith(
-          fontStyle: FontStyle.italic,
-          color: Theme.of(context).brightness == Brightness.dark
-              ? Colors.white
-              : Colors.black,
+    return Material(
+      color: messageTheme.messageBackgroundColor,
+      shape: shape ??
+          RoundedRectangleBorder(
+            borderRadius: borderRadiusGeometry ?? BorderRadius.zero,
+            side: borderSide ??
+                BorderSide(
+                  color: Theme.of(context).brightness == Brightness.dark
+                      ? 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),
+          ),
        ),
      ),
    );
@@ -1,6 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';

 import '../stream_chat_flutter.dart';
 import 'attachment_error.dart';
@@ -119,8 +120,7 @@ class GiphyAttachment extends StatelessWidget {
                        ),
                        child: Row(
                          children: [
-                            Icon(
-                              StreamIcons.lightning,
+                            StreamSvgIcon.lightning(
                              color: StreamChatTheme.of(context).accentColor,
                              size: 16.0,
                            ),
@@ -152,8 +152,7 @@ class GiphyAttachment extends StatelessWidget {
                          child: IconButton(
                            padding: const EdgeInsets.all(0),
                            constraints: BoxConstraints.tight(Size(32, 32)),
-                            icon: Icon(
-                              StreamIcons.left,
+                            icon: StreamSvgIcon.left(
                              size: 24.0,
                            ),
                            splashRadius: 16,
@@ -180,8 +179,7 @@ class GiphyAttachment extends StatelessWidget {
                          child: IconButton(
                            padding: const EdgeInsets.all(0),
                            constraints: BoxConstraints.tight(Size(32, 32)),
-                            icon: Icon(
-                              StreamIcons.right,
+                            icon: StreamSvgIcon.right(
                              size: 24.0,
                            ),
                            splashRadius: 16,
@@ -261,8 +259,7 @@ class GiphyAttachment extends StatelessWidget {
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
-                Icon(
-                  StreamIcons.eye,
+                StreamSvgIcon.eye(
                  color: Colors.black.withOpacity(0.5),
                  size: 16.0,
                ),
@@ -342,8 +339,7 @@ class GiphyAttachment extends StatelessWidget {
                  ),
                  child: Row(
                    children: [
-                      Icon(
-                        StreamIcons.lightning,
+                      StreamSvgIcon.lightning(
                        color: Colors.white,
                        size: 16,
                      ),
@@ -0,0 +1,81 @@
+import 'package:flutter/widgets.dart';
+
+enum LoadingStatus { LOADING, STABLE }
+
+/// Signature for EndOfPageListeners
+typedef EndOfPageListenerCallback = void Function();
+
+/// A widget that wraps a [Widget] and will trigger [onEndOfPage] when it
+/// reaches the bottom of the list
+class LazyLoadScrollView extends StatefulWidget {
+  /// The [Widget] that this widget watches for changes on
+  final Widget child;
+
+  /// Called when the [child] reaches the end of the list
+  final EndOfPageListenerCallback onEndOfPage;
+
+  /// The offset to take into account when triggering [onEndOfPage] in pixels
+  final int scrollOffset;
+
+  /// Used to determine if loading of new data has finished. You should use set this if you aren't using a FutureBuilder or StreamBuilder
+  final bool isLoading;
+
+  LazyLoadScrollView({
+    Key key,
+    @required this.child,
+    @required this.onEndOfPage,
+    this.isLoading = false,
+    this.scrollOffset = 100,
+  })  : assert(onEndOfPage != null),
+        assert(child != null),
+        super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _LazyLoadScrollViewState();
+}
+
+class _LazyLoadScrollViewState extends State<LazyLoadScrollView> {
+  LoadingStatus _loadMoreStatus = LoadingStatus.STABLE;
+
+  @override
+  void didUpdateWidget(LazyLoadScrollView oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (!widget.isLoading) {
+      _loadMoreStatus = LoadingStatus.STABLE;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return NotificationListener(
+      child: widget.child,
+      onNotification: _onNotification,
+    );
+  }
+
+  bool _onNotification(Notification notification) {
+    if (notification is ScrollUpdateNotification) {
+      if (notification.metrics.maxScrollExtent > notification.metrics.pixels &&
+          notification.metrics.maxScrollExtent - notification.metrics.pixels <=
+              widget.scrollOffset) {
+        if (_loadMoreStatus != null &&
+            _loadMoreStatus == LoadingStatus.STABLE) {
+          _loadMoreStatus = LoadingStatus.LOADING;
+          widget.onEndOfPage();
+        }
+      }
+      return true;
+    }
+    if (notification is OverscrollNotification) {
+      if (notification.overscroll > 0) {
+        if (_loadMoreStatus != null &&
+            _loadMoreStatus == LoadingStatus.STABLE) {
+          _loadMoreStatus = LoadingStatus.LOADING;
+          widget.onEndOfPage();
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+}
@@ -1,12 +1,14 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:media_gallery/media_gallery.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
-import 'package:transparent_image/transparent_image.dart';
+import 'package:photo_manager/photo_manager.dart';
+import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
+import 'dart:ui' as ui;

 class MediaListView extends StatefulWidget {
  final List<String> selectedIds;
-  final void Function(Media media) onSelect;
+  final void Function(AssetEntity media) onSelect;

  const MediaListView({
    Key key,
@@ -18,84 +20,94 @@ class MediaListView extends StatefulWidget {
 }

 class _MediaListViewState extends State<MediaListView> {
-  final _media = <Media>[];
+  final _media = <AssetEntity>[];
  final ScrollController _scrollController = ScrollController();
+  int _currentPage = 0;
+  bool _endPagination = false;

  @override
  Widget build(BuildContext context) {
-    return GridView.builder(
-      itemCount: _media.length,
-      controller: _scrollController,
-      gridDelegate:
-          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
-      itemBuilder: (
-        context,
-        position,
-      ) {
-        final media = _media.elementAt(position);
-        return Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 1.0),
-          child: InkWell(
-            child: Stack(
-              children: [
-                AspectRatio(
-                  aspectRatio: 1.0,
-                  child: FadeInImage(
-                    fadeInDuration: Duration(milliseconds: 300),
-                    placeholder: MemoryImage(kTransparentImage),
-                    image: MediaThumbnailProvider(
-                      media: media,
-                      highQuality: true,
+    return LazyLoadScrollView(
+      onEndOfPage: () {
+        _getMedia();
+      },
+      child: GridView.builder(
+        itemCount: _media.length,
+        controller: _scrollController,
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 3,
+        ),
+        cacheExtent: 1000,
+        itemBuilder: (
+          context,
+          position,
+        ) {
+          final media = _media.elementAt(position);
+          return Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 1.0),
+            child: InkWell(
+              child: Stack(
+                children: [
+                  AspectRatio(
+                    aspectRatio: 1.0,
+                    child: FadeInImage(
+                      fadeInDuration: Duration(milliseconds: 300),
+                      placeholder: AssetImage(
+                        'images/placeholder.png',
+                        package: 'stream_chat_flutter',
+                      ),
+                      image: MediaThumbnailProvider(
+                        media: media,
+                      ),
+                      fit: BoxFit.cover,
                    ),
-                    fit: BoxFit.cover,
                  ),
-                ),
-                Positioned.fill(
-                  child: IgnorePointer(
-                    child: AnimatedOpacity(
-                      duration: Duration(milliseconds: 300),
-                      opacity: widget.selectedIds.any((id) => id == media.id)
-                          ? 1.0
-                          : 0.0,
-                      child: Container(
-                        color: Colors.black.withOpacity(0.5),
-                        alignment: Alignment.topRight,
-                        padding: const EdgeInsets.only(
-                          top: 8,
-                          right: 8,
-                        ),
-                        child: CircleAvatar(
-                          radius: 12,
-                          backgroundColor: Colors.white,
-                          child: Icon(
-                            StreamIcons.check,
-                            size: 24,
-                            color: Colors.black,
+                  Positioned.fill(
+                    child: IgnorePointer(
+                      child: AnimatedOpacity(
+                        duration: Duration(milliseconds: 300),
+                        opacity: widget.selectedIds.any((id) => id == media.id)
+                            ? 1.0
+                            : 0.0,
+                        child: Container(
+                          color: Colors.black.withOpacity(0.5),
+                          alignment: Alignment.topRight,
+                          padding: const EdgeInsets.only(
+                            top: 8,
+                            right: 8,
+                          ),
+                          child: CircleAvatar(
+                            radius: 12,
+                            backgroundColor: Colors.white,
+                            child: StreamSvgIcon.check(
+                              size: 24,
+                              color: Colors.black,
+                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
-                ),
-                if (media.mediaType == MediaType.video)
-                  Positioned(
-                    left: 8,
-                    bottom: 10,
-                    child: SvgPicture.asset(
-                      'svgs/video_call_icon.svg',
-                      package: 'stream_chat_flutter',
+                  if (media.type == AssetType.video)
+                    Positioned(
+                      left: 8,
+                      bottom: 10,
+                      child: SvgPicture.asset(
+                        'svgs/video_call_icon.svg',
+                        package: 'stream_chat_flutter',
+                      ),
                    ),
-                  ),
-              ],
+                ],
+              ),
+              onTap: () {
+                if (widget.onSelect != null) {
+                  widget.onSelect(media);
+                }
+              },
            ),
-            onTap: () {
-              if (widget.onSelect != null) {
-                widget.onSelect(media);
-              }
-            },
-          ),
-        );
-      },
+          );
+        },
+      ),
    );
  }

@@ -106,42 +118,67 @@ class _MediaListViewState extends State<MediaListView> {
  }

  void _getMedia() async {
-    final List<MediaCollection> collections =
-        await MediaGallery.listMediaCollections(
-      mediaTypes: [
-        MediaType.video,
-        MediaType.image,
-      ],
-    );
+    final assetList = await PhotoManager.getAssetPathList(
+      hasAll: true,
+    ).then((value) => value.singleWhere((element) => element.isAll));

-    if (collections.isEmpty) {
-      return;
+    final media = await assetList.getAssetListPaged(_currentPage, 50);
+
+    if (media.isEmpty) {
+      setState(() {
+        _endPagination = true;
+      });
+    } else {
+      setState(() {
+        _media.addAll(media);
+      });
    }
-    final collection = collections.firstWhere(
-      (element) => element.isAllCollection,
-      orElse: () => collections.first,
-    );
-
-    final videoPage = await collection.getMedias(
-      mediaType: MediaType.video,
-      take: 500,
-    );
-    final imagePage = await collection.getMedias(
-      mediaType: MediaType.image,
-      take: 500,
-    );
-
-    final allItems = [
-      ...videoPage.items,
-      ...imagePage.items,
-    ]..sort((
-        a,
-        b,
-      ) =>
-          b.creationDate.compareTo(a.creationDate));
-
-    setState(() {
-      _media.addAll(allItems);
-    });
+    ++_currentPage;
  }
 }
+
+class MediaThumbnailProvider extends ImageProvider<MediaThumbnailProvider> {
+  const MediaThumbnailProvider({
+    @required this.media,
+  }) : assert(media != null);
+
+  final AssetEntity media;
+
+  @override
+  ImageStreamCompleter load(key, decode) {
+    return MultiFrameImageStreamCompleter(
+      codec: _loadAsync(key, decode),
+      scale: 1.0,
+      informationCollector: () sync* {
+        yield ErrorDescription('Id: ${media?.id}');
+      },
+    );
+  }
+
+  Future<ui.Codec> _loadAsync(
+      MediaThumbnailProvider key, DecoderCallback decode) async {
+    assert(key == this);
+    final bytes = await media.thumbData;
+    if (bytes.isEmpty) return null;
+
+    return await decode(bytes);
+  }
+
+  @override
+  Future<MediaThumbnailProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture<MediaThumbnailProvider>(this);
+  }
+
+  @override
+  bool operator ==(dynamic other) {
+    if (other.runtimeType != runtimeType) return false;
+    final MediaThumbnailProvider typedOther = other;
+    return media?.id == typedOther.media?.id;
+  }
+
+  @override
+  int get hashCode => media?.id?.hashCode ?? 0;
+
+  @override
+  String toString() => '$runtimeType("${media?.id}")';
+}
@@ -6,7 +6,7 @@ import 'package:flutter/services.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';

 import 'message_input.dart';
 import 'message_widget.dart';
@@ -95,59 +95,82 @@ class MessageActionsModal extends StatelessWidget {
                          messageTheme: messageTheme,
                        ),
                      ),
-                    IgnorePointer(
-                      child: MessageWidget(
-                        key: Key('MessageWidget'),
-                        reverse: reverse,
-                        message: message.copyWith(
-                          text: message.text.length > 200
-                              ? '${message.text.substring(0, 200)}...'
-                              : message.text,
-                        ),
-                        messageTheme: messageTheme,
-                        showReactions: false,
-                        showUsername: false,
-                        showReplyIndicator: false,
-                        showUserAvatar: showUserAvatar,
-                        showTimestamp: false,
-                        translateUserAvatar: false,
-                        showReactionPickerIndicator: true,
-                        showSendingIndicator: DisplayWidget.gone,
-                        shape: messageShape,
-                      ),
-                    ),
+                    TweenAnimationBuilder<double>(
+                        tween: Tween(begin: 0.0, end: 1.0),
+                        duration: Duration(milliseconds: 300),
+                        builder: (context, val, snapshot) {
+                          return Transform.scale(
+                            scale: val,
+                            child: IgnorePointer(
+                              child: MessageWidget(
+                                key: Key('MessageWidget'),
+                                reverse: reverse,
+                                message: message.copyWith(
+                                  text: message.text.length > 200
+                                      ? '${message.text.substring(0, 200)}...'
+                                      : message.text,
+                                ),
+                                messageTheme: messageTheme,
+                                showReactions: false,
+                                showUsername: false,
+                                showReplyIndicator: false,
+                                showUserAvatar: showUserAvatar,
+                                showTimestamp: false,
+                                translateUserAvatar: false,
+                                showReactionPickerIndicator: true,
+                                showSendingIndicator: DisplayWidget.gone,
+                                shape: messageShape,
+                              ),
+                            ),
+                          );
+                        }),
                    SizedBox(
                      height: 8,
                    ),
-                    Padding(
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 48.0,
-                      ),
-                      child: Material(
-                        clipBehavior: Clip.hardEdge,
-                        shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(16),
-                        ),
-                        child: Column(
-                          crossAxisAlignment: CrossAxisAlignment.stretch,
-                          children: ListTile.divideTiles(
-                            context: context,
-                            tiles: [
-                              if (showReply &&
-                                  (message.status ==
-                                          MessageSendingStatus.SENT ||
-                                      message.status == null) &&
-                                  message.parentId == null)
-                                _buildReplyButton(context),
-                              if (showEditMessage) _buildEditMessage(context),
-                              if (showDeleteMessage)
-                                _buildDeleteButton(context),
-                              if (showCopyMessage) _buildCopyButton(context),
-                            ],
-                          ).toList(),
-                        ),
-                      ),
-                    )
+                    TweenAnimationBuilder<double>(
+                        tween: Tween(begin: 0.0, end: 1.0),
+                        duration: Duration(milliseconds: 300),
+                        curve: Curves.easeInOut,
+                        builder: (context, val, wid) {
+                          return Transform(
+                            transform: Matrix4.identity()
+                              ..scale(val)
+                              ..rotateZ(-1.0 + val),
+                            alignment: Alignment.topRight,
+                            child: Padding(
+                              padding: const EdgeInsets.symmetric(
+                                horizontal: 48.0,
+                              ),
+                              child: Material(
+                                clipBehavior: Clip.hardEdge,
+                                shape: RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(16),
+                                ),
+                                child: Column(
+                                  crossAxisAlignment:
+                                      CrossAxisAlignment.stretch,
+                                  children: ListTile.divideTiles(
+                                    context: context,
+                                    tiles: [
+                                      if (showReply &&
+                                          (message.status ==
+                                                  MessageSendingStatus.SENT ||
+                                              message.status == null) &&
+                                          message.parentId == null)
+                                        _buildReplyButton(context),
+                                      if (showEditMessage)
+                                        _buildEditMessage(context),
+                                      if (showDeleteMessage)
+                                        _buildDeleteButton(context),
+                                      if (showCopyMessage)
+                                        _buildCopyButton(context),
+                                    ],
+                                  ).toList(),
+                                ),
+                              ),
+                            ),
+                          );
+                        })
                  ],
                ),
              ),
@@ -165,8 +188,7 @@ class MessageActionsModal extends StatelessWidget {
        style:
            Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
      ),
-      leading: Icon(
-        StreamIcons.delete,
+      leading: StreamSvgIcon.delete(
        color: Colors.red,
      ),
      onTap: () {
@@ -185,8 +207,7 @@ class MessageActionsModal extends StatelessWidget {
        'Copy message',
        style: Theme.of(context).textTheme.headline6,
      ),
-      leading: Icon(
-        StreamIcons.copy,
+      leading: StreamSvgIcon.copy(
        color: StreamChatTheme.of(context).primaryIconTheme.color,
      ),
      onTap: () async {
@@ -202,8 +223,7 @@ class MessageActionsModal extends StatelessWidget {
        'Edit message',
        style: Theme.of(context).textTheme.headline6,
      ),
-      leading: Icon(
-        StreamIcons.edit,
+      leading: StreamSvgIcon.edit(
        color: StreamChatTheme.of(context).primaryIconTheme.color,
      ),
      onTap: () async {
@@ -244,8 +264,7 @@ class MessageActionsModal extends StatelessWidget {
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(
-                      icon: Icon(
-                        StreamIcons.edit,
+                      icon: StreamSvgIcon.edit(
                        size: 22,
                        color:
                            StreamChatTheme.of(context).primaryIconTheme.color,
@@ -300,8 +319,7 @@ class MessageActionsModal extends StatelessWidget {
        'Thread reply',
        style: Theme.of(context).textTheme.headline6,
      ),
-      leading: Icon(
-        StreamIcons.sorting_up,
+      leading: StreamSvgIcon.thread(
        color: StreamChatTheme.of(context).primaryIconTheme.color,
      ),
      onTap: () {
@@ -1,6 +1,5 @@
 import 'dart:async';
 import 'dart:io';
-import 'dart:math';

 import 'package:emojis/emoji.dart';
 import 'package:file_picker/file_picker.dart';
@@ -11,16 +10,18 @@ import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:http_parser/http_parser.dart' as httpParser;
 import 'package:image_picker/image_picker.dart';
-import 'package:media_gallery/media_gallery.dart';
 import 'package:mime/mime.dart';
 import 'package:permission_handler/permission_handler.dart';
+import 'package:photo_manager/photo_manager.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/compress_video_service.dart';
 import 'package:stream_chat_flutter/src/media_list_view.dart';
 import 'package:stream_chat_flutter/src/message_list_view.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/user_avatar.dart';
-import 'package:stream_chat_flutter/src/video_thumbnail.dart';
 import 'package:substring_highlight/substring_highlight.dart';
+import 'package:video_compress/video_compress.dart';

 import '../stream_chat_flutter.dart';
 import 'stream_channel.dart';
@@ -44,6 +45,8 @@ enum DefaultAttachmentTypes {

 const _kMinMediaPickerSize = 360.0;

+const _kMaxAttachmentSize = 20480; //20MB
+
 /// Inactive state
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/message_input.png)
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/message_input_paint.png)
@@ -201,6 +204,11 @@ class MessageInputState extends State<MessageInput> {
        onPanUpdate: (details) {
          if (details.delta.dy > 0) {
            _focusNode.unfocus();
+            if (_openFilePickerSection) {
+              setState(() {
+                _openFilePickerSection = false;
+              });
+            }
          }
        },
        child: Column(
@@ -279,8 +287,7 @@ class MessageInputState extends State<MessageInput> {
                    crossFadeState: _sendAsDm
                        ? CrossFadeState.showFirst
                        : CrossFadeState.showSecond,
-                    firstChild: Icon(
-                      StreamIcons.check,
+                    firstChild: StreamSvgIcon.check(
                      size: 16.0,
                      color: Colors.white,
                    ),
@@ -325,8 +332,7 @@ class MessageInputState extends State<MessageInput> {
            _actionsShrunk = false;
          });
        },
-        icon: Icon(
-          StreamIcons.circle_left,
+        icon: StreamSvgIcon.emptyCircleLeft(
          color: StreamChatTheme.of(context).accentColor,
        ),
      ),
@@ -398,8 +404,7 @@ class MessageInputState extends State<MessageInput> {
                                _chosenCommand?.name ?? "",
                                style: TextStyle(color: Colors.white),
                              ),
-                              avatar: Icon(
-                                StreamIcons.lightning,
+                              avatar: StreamSvgIcon.lightning(
                                color: Colors.white,
                              ),
                            ),
@@ -426,26 +431,36 @@ class MessageInputState extends State<MessageInput> {
    );
  }

+  Timer _debounce;
  void _onChanged(BuildContext context, String s) {
-    StreamChannel.of(context).channel.keyStroke().catchError((e) {});
+    if (_debounce?.isActive == true) _debounce.cancel();
+    _debounce = Timer(
+      const Duration(milliseconds: 350),
+      () {
+        if (!mounted) {
+          return;
+        }
+        StreamChannel.of(context).channel.keyStroke().catchError((e) {});

-    setState(() {
-      _messageIsPresent = s.trim().isNotEmpty;
-      _actionsShrunk = s.trim().isNotEmpty;
-    });
+        setState(() {
+          _messageIsPresent = s.trim().isNotEmpty;
+          _actionsShrunk = s.trim().isNotEmpty;
+        });

-    _commandsOverlay?.remove();
-    _commandsOverlay = null;
-    _mentionsOverlay?.remove();
-    _mentionsOverlay = null;
-    _emojiOverlay?.remove();
-    _emojiOverlay = null;
+        _commandsOverlay?.remove();
+        _commandsOverlay = null;
+        _mentionsOverlay?.remove();
+        _mentionsOverlay = null;
+        _emojiOverlay?.remove();
+        _emojiOverlay = null;

-    _checkCommands(s.trim(), context);
+        _checkCommands(s.trim(), context);

-    _checkMentions(s, context);
+        _checkMentions(s, context);

-    _checkEmoji(s, context);
+        _checkEmoji(s, context);
+      },
+    );
  }

  String _getHint() {
@@ -540,86 +555,100 @@ class MessageInputState extends State<MessageInput> {
        bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
        left: 0,
        right: 0,
-        child: Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Card(
-            elevation: 2.0,
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(8.0),
-            ),
-            color: StreamChatTheme.of(context).primaryColor,
-            clipBehavior: Clip.antiAlias,
-            child: Container(
-              constraints: BoxConstraints.loose(Size.fromHeight(400)),
-              decoration: BoxDecoration(
-                  color: StreamChatTheme.of(context).primaryColor,
-                  borderRadius: BorderRadius.circular(8.0)),
-              child: ListView(
-                padding: const EdgeInsets.all(0),
-                shrinkWrap: true,
-                children: [
-                  if (commands.isNotEmpty)
-                    Padding(
-                      padding: const EdgeInsets.only(left: 8.0, top: 8.0),
-                      child: Row(
+        child: TweenAnimationBuilder<double>(
+            tween: Tween(begin: 0.0, end: 1.0),
+            duration: Duration(milliseconds: 300),
+            curve: Curves.easeInOutExpo,
+            builder: (context, val, wid) {
+              return Transform.scale(
+                alignment: Alignment.center,
+                scale: val,
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Card(
+                    elevation: 2.0,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(8.0),
+                    ),
+                    color: StreamChatTheme.of(context).primaryColor,
+                    clipBehavior: Clip.antiAlias,
+                    child: Container(
+                      constraints: BoxConstraints.loose(Size.fromHeight(400)),
+                      decoration: BoxDecoration(
+                          color: StreamChatTheme.of(context).primaryColor,
+                          borderRadius: BorderRadius.circular(8.0)),
+                      child: ListView(
+                        padding: const EdgeInsets.all(0),
+                        shrinkWrap: true,
                        children: [
-                          Padding(
-                            padding:
-                                const EdgeInsets.symmetric(horizontal: 8.0),
-                            child: Icon(
-                              StreamIcons.lightning,
-                              color: StreamChatTheme.of(context).accentColor,
+                          if (commands.isNotEmpty)
+                            Padding(
+                              padding:
+                                  const EdgeInsets.only(left: 8.0, top: 8.0),
+                              child: Row(
+                                children: [
+                                  Padding(
+                                    padding: const EdgeInsets.symmetric(
+                                      horizontal: 8.0,
+                                    ),
+                                    child: StreamSvgIcon.lightning(
+                                      color: StreamChatTheme.of(context)
+                                          .accentColor,
+                                    ),
+                                  ),
+                                  Text(
+                                    'Instant Commands',
+                                    style: TextStyle(
+                                      color: Colors.black.withOpacity(.5),
+                                    ),
+                                  )
+                                ],
+                              ),
                            ),
-                          ),
-                          Text(
-                            'Instant Commands',
-                            style: TextStyle(
-                              color: Colors.black.withOpacity(.5),
-                            ),
-                          )
+                          ...commands
+                              .map(
+                                (c) => ListTile(
+                                  leading: c.name == 'giphy'
+                                      ? _buildGiphyIcon()
+                                      : null,
+                                  title: Text.rich(
+                                    TextSpan(
+                                      text: '${c.name.capitalize()}',
+                                      style: TextStyle(
+                                          fontWeight: FontWeight.bold),
+                                      children: [
+                                        TextSpan(
+                                          text: ' /${c.name} ${c.args}',
+                                          style: TextStyle(
+                                            fontWeight: FontWeight.w300,
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                  trailing: CircleAvatar(
+                                    backgroundColor:
+                                        StreamChatTheme.of(context).accentColor,
+                                    child: StreamSvgIcon.lightning(
+                                      color: Colors.white,
+                                      size: 12.5,
+                                    ),
+                                    maxRadius: 12,
+                                  ),
+                                  //subtitle: Text(c.description),
+                                  onTap: () {
+                                    _setCommand(c);
+                                  },
+                                ),
+                              )
+                              .toList(),
                        ],
                      ),
                    ),
-                  ...commands
-                      .map(
-                        (c) => ListTile(
-                          leading: c.name == 'giphy' ? _buildGiphyIcon() : null,
-                          title: Text.rich(
-                            TextSpan(
-                              text: '${c.name.capitalize()}',
-                              style: TextStyle(fontWeight: FontWeight.bold),
-                              children: [
-                                TextSpan(
-                                  text: ' /${c.name} ${c.args}',
-                                  style: TextStyle(
-                                    fontWeight: FontWeight.w300,
-                                  ),
-                                ),
-                              ],
-                            ),
-                          ),
-                          trailing: CircleAvatar(
-                            backgroundColor:
-                                StreamChatTheme.of(context).accentColor,
-                            child: Icon(
-                              StreamIcons.lightning,
-                              color: Colors.white,
-                              size: 12.5,
-                            ),
-                            maxRadius: 12,
-                          ),
-                          //subtitle: Text(c.description),
-                          onTap: () {
-                            _setCommand(c);
-                          },
-                        ),
-                      )
-                      .toList(),
-                ],
-              ),
-            ),
-          ),
-        ),
+                  ),
+                ),
+              );
+            }),
      );
    });
  }
@@ -636,8 +665,7 @@ class MessageInputState extends State<MessageInput> {
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                IconButton(
-                  icon: Icon(
-                    StreamIcons.picture,
+                  icon: StreamSvgIcon.pictures(
                    size: 24,
                    color: _filePickerIndex == 0
                        ? StreamChatTheme.of(context).accentColor
@@ -650,8 +678,7 @@ class MessageInputState extends State<MessageInput> {
                  },
                ),
                IconButton(
-                  icon: Icon(
-                    StreamIcons.folder,
+                  icon: StreamSvgIcon.files(
                    size: 24,
                    color: _filePickerIndex == 1
                        ? StreamChatTheme.of(context).accentColor
@@ -662,11 +689,8 @@ class MessageInputState extends State<MessageInput> {
                  },
                ),
                IconButton(
-                  icon: SvgPicture.asset(
-                    'svgs/icon_camera.svg',
-                    package: 'stream_chat_flutter',
-                    height: 24,
-                    width: 24,
+                  icon: StreamSvgIcon.camera(
+                    size: 24,
                    color: _filePickerIndex == 2
                        ? StreamChatTheme.of(context).accentColor
                        : Colors.black.withOpacity(0.5),
@@ -676,10 +700,9 @@ class MessageInputState extends State<MessageInput> {
                  },
                ),
                IconButton(
-                  icon: Icon(
-                    StreamIcons.record,
+                  icon: StreamSvgIcon.record(
                    size: 24,
-                    color: _filePickerIndex == 2
+                    color: _filePickerIndex == 3
                        ? StreamChatTheme.of(context).accentColor
                        : Colors.black.withOpacity(0.5),
                  ),
@@ -777,7 +800,6 @@ class MessageInputState extends State<MessageInput> {
                  var status = await (Platform.isAndroid
                      ? Permission.storage.status
                      : Permission.photos.status);
-                  print('status: ${status}');
                  if (status.isPermanentlyDenied || status.isDenied) {
                    if (await openAppSettings()) {
                      setState(() {});
@@ -823,56 +845,105 @@ class MessageInputState extends State<MessageInput> {
    }
  }

-  void _addAttachment(Media medium) async {
+  void _addAttachment(AssetEntity medium) async {
    final attachment = _SendingAttachment(
      id: medium.id,
    );
+    try {
+      setState(() {
+        _attachments.add(attachment);
+      });
+      final mediaFile = await medium.file;

-    setState(() {
-      _attachments.add(attachment);
-    });
-
-    final mediaFile = await medium.getFile();
-
-    final file = PlatformFile(
-      path: mediaFile.path,
-      bytes: mediaFile.readAsBytesSync(),
-    );
-
-    final channel = StreamChannel.of(context).channel;
-    setState(() {
-      attachment
-        ..file = file
-        ..attachment = Attachment(
-          localUri: file.path != null ? Uri.parse(file.path) : null,
-          type: medium.mediaType == MediaType.image ? 'image' : 'video',
-        );
-    });
-
-    final url = await _uploadAttachment(
-        file,
-        medium.mediaType == MediaType.image
-            ? DefaultAttachmentTypes.image
-            : DefaultAttachmentTypes.video,
-        channel);
-
-    final fileType = medium.mediaType == MediaType.image
-        ? DefaultAttachmentTypes.image
-        : DefaultAttachmentTypes.video;
-
-    if (fileType == DefaultAttachmentTypes.image) {
-      attachment.attachment = attachment.attachment.copyWith(
-        imageUrl: url,
+      var file = PlatformFile(
+        path: mediaFile.path,
+        size: ((await mediaFile.length()) / 1024).ceil(),
+        bytes: mediaFile.readAsBytesSync(),
      );
-    } else {
-      attachment.attachment = attachment.attachment.copyWith(
-        assetUrl: url,
+
+      if (file.size > _kMaxAttachmentSize) {
+        if (medium.type == AssetType.video) {
+          final mediaInfo = await CompressVideoService.compressVideo(file.path);
+
+          if (mediaInfo.filesize / (1024 * 1024) > _kMaxAttachmentSize) {
+            Scaffold.of(context).showSnackBar(
+              SnackBar(
+                content: Text(
+                  'The file is too large to upload. The file size limit is 20MB. We tried compressing it, but it was not enough.',
+                ),
+              ),
+            );
+
+            setState(() {
+              _attachments.remove(attachment);
+            });
+            return;
+          }
+          file = PlatformFile(
+            name: file.name,
+            size: mediaInfo.filesize,
+            bytes: await mediaInfo.file.readAsBytes(),
+            path: mediaInfo.path,
+          );
+        } else {
+          Scaffold.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                'The file is too large to upload. The file size limit is 20MB',
+              ),
+            ),
+          );
+        }
+      }
+
+      final channel = StreamChannel.of(context).channel;
+      setState(() {
+        attachment
+          ..file = file
+          ..attachment = Attachment(
+            localUri: file.path != null ? Uri.parse(file.path) : null,
+            type: medium.type == AssetType.image ? 'image' : 'video',
+          );
+      });
+
+      final url = await _uploadAttachment(
+          file,
+          medium.type == AssetType.image
+              ? DefaultAttachmentTypes.image
+              : DefaultAttachmentTypes.video,
+          channel);
+
+      final fileType = medium.type == AssetType.image
+          ? DefaultAttachmentTypes.image
+          : DefaultAttachmentTypes.video;
+
+      if (fileType == DefaultAttachmentTypes.image) {
+        attachment.attachment = attachment.attachment.copyWith(
+          imageUrl: url,
+        );
+      } else {
+        attachment.attachment = attachment.attachment.copyWith(
+          assetUrl: url,
+        );
+      }
+
+      if (mounted) {
+        setState(() {
+          attachment.uploaded = true;
+        });
+      }
+    } catch (e, s) {
+      setState(() {
+        _attachments.remove(attachment);
+      });
+      print(e);
+      print(s);
+      Scaffold.of(context).showSnackBar(
+        SnackBar(
+          content: Text('Error adding the attachment: $e'),
+        ),
      );
    }
-
-    setState(() {
-      attachment.uploaded = true;
-    });
  }

  CircleAvatar _buildGiphyIcon() {
@@ -929,71 +1000,83 @@ class MessageInputState extends State<MessageInput> {
        bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
        left: 0,
        right: 0,
-        child: Card(
-          margin: EdgeInsets.all(8.0),
-          elevation: 2.0,
-          color: StreamChatTheme.of(context).primaryColor,
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(8.0),
-          ),
-          clipBehavior: Clip.antiAlias,
-          child: Container(
-            constraints: BoxConstraints.loose(Size.fromHeight(400)),
-            decoration: BoxDecoration(
-              color: StreamChatTheme.of(context).primaryColor,
-            ),
-            child: FutureBuilder<List<Member>>(
-                future: queryMembers ?? Future.value(members),
-                initialData: members,
-                builder: (context, snapshot) {
-                  return ListView(
-                    padding: const EdgeInsets.all(0),
-                    shrinkWrap: true,
-                    children: snapshot.data
-                        .map((m) => ListTile(
-                              leading: UserAvatar(
-                                constraints: BoxConstraints.tight(
-                                  Size(
-                                    40,
-                                    40,
-                                  ),
-                                ),
-                                user: m.user,
-                              ),
-                              title: Text(
-                                '${m.user.name}',
-                                style: TextStyle(fontWeight: FontWeight.bold),
-                              ),
-                              subtitle: Text('@${m.userId}'),
-                              trailing: Icon(
-                                StreamIcons.at_mention,
-                                color: StreamChatTheme.of(context).accentColor,
-                              ),
-                              onTap: () {
-                                _mentionedUsers.add(m.user);
+        child: TweenAnimationBuilder<double>(
+            tween: Tween(begin: 0.0, end: 1.0),
+            duration: Duration(milliseconds: 300),
+            curve: Curves.easeInOutExpo,
+            builder: (context, val, wid) {
+              return Transform.scale(
+                scale: val,
+                child: Card(
+                  margin: EdgeInsets.all(8.0),
+                  elevation: 2.0,
+                  color: StreamChatTheme.of(context).primaryColor,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(8.0),
+                  ),
+                  clipBehavior: Clip.antiAlias,
+                  child: Container(
+                    constraints: BoxConstraints.loose(Size.fromHeight(400)),
+                    decoration: BoxDecoration(
+                      color: StreamChatTheme.of(context).primaryColor,
+                    ),
+                    child: FutureBuilder<List<Member>>(
+                        future: queryMembers ?? Future.value(members),
+                        initialData: members,
+                        builder: (context, snapshot) {
+                          return ListView(
+                            padding: const EdgeInsets.all(0),
+                            shrinkWrap: true,
+                            children: snapshot.data
+                                .map((m) => ListTile(
+                                      leading: UserAvatar(
+                                        constraints: BoxConstraints.tight(
+                                          Size(
+                                            40,
+                                            40,
+                                          ),
+                                        ),
+                                        user: m.user,
+                                      ),
+                                      title: Text(
+                                        '${m.user.name}',
+                                        style: TextStyle(
+                                            fontWeight: FontWeight.bold),
+                                      ),
+                                      subtitle: Text('@${m.userId}'),
+                                      trailing: StreamSvgIcon.mentions(
+                                        color: StreamChatTheme.of(context)
+                                            .accentColor,
+                                      ),
+                                      onTap: () {
+                                        _mentionedUsers.add(m.user);

-                                splits[splits.length - 1] = m.user.name;
-                                final rejoin = splits.join('@');
+                                        splits[splits.length - 1] = m.user.name;
+                                        final rejoin = splits.join('@');

-                                textEditingController.value = TextEditingValue(
-                                  text: rejoin +
-                                      textEditingController.text.substring(
-                                          textEditingController
-                                              .selection.start),
-                                  selection: TextSelection.collapsed(
-                                    offset: rejoin.length,
-                                  ),
-                                );
+                                        textEditingController.value =
+                                            TextEditingValue(
+                                          text: rejoin +
+                                              textEditingController.text
+                                                  .substring(
+                                                      textEditingController
+                                                          .selection.start),
+                                          selection: TextSelection.collapsed(
+                                            offset: rejoin.length,
+                                          ),
+                                        );

-                                _mentionsOverlay?.remove();
-                                _mentionsOverlay = null;
-                              },
-                            ))
-                        .toList(),
-                  );
-                }),
-          ),
-        ),
+                                        _mentionsOverlay?.remove();
+                                        _mentionsOverlay = null;
+                                      },
+                                    ))
+                                .toList(),
+                          );
+                        }),
+                  ),
+                ),
+              );
+            }),
      );
    });
  }
@@ -1058,8 +1141,7 @@ class MessageInputState extends State<MessageInput> {
                          Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 8.0),
-                            child: Icon(
-                              StreamIcons.smile,
+                            child: StreamSvgIcon.smile(
                              color: StreamChatTheme.of(context).accentColor,
                            ),
                          ),
@@ -1194,8 +1276,7 @@ class MessageInputState extends State<MessageInput> {
        },
        fillColor: Colors.black.withOpacity(.5),
        child: Center(
-          child: Icon(
-            StreamIcons.close,
+          child: StreamSvgIcon.close(
            size: 24,
            color: Colors.white,
          ),
@@ -1236,10 +1317,19 @@ class MessageInputState extends State<MessageInput> {
          children: [
            Positioned.fill(
              child: Container(
-                child: VideoThumbnail(
-                    file: File(
-                  attachment.file.path,
-                )),
+                child: FutureBuilder<File>(
+                  future: VideoCompress.getFileThumbnail(attachment.file.path),
+                  builder: (context, snapshot) {
+                    if (!snapshot.hasData) {
+                      return Offstage();
+                    }
+
+                    return Image.file(
+                      snapshot.data,
+                      fit: BoxFit.cover,
+                    );
+                  },
+                ),
              ),
            ),
            Positioned(
@@ -1266,8 +1356,7 @@ class MessageInputState extends State<MessageInput> {
      child: Padding(
        padding:
            const EdgeInsets.only(left: 4.0, right: 8.0, top: 8.0, bottom: 8.0),
-        child: Icon(
-          StreamIcons.lightning,
+        child: StreamSvgIcon.lightning(
          color: Color(0xFF000000).withAlpha(128),
        ),
      ),
@@ -1290,8 +1379,7 @@ class MessageInputState extends State<MessageInput> {
        child: Padding(
          padding:
              EdgeInsets.only(left: 8.0, right: padding, top: 8.0, bottom: 8.0),
-          child: Icon(
-            StreamIcons.attach,
+          child: StreamSvgIcon.attach(
            color: _openFilePickerSection
                ? StreamChatTheme.of(context).accentColor
                : Color(0xFF000000).withAlpha(128),
@@ -1468,7 +1556,6 @@ class MessageInputState extends State<MessageInput> {
      );
      if (res?.files?.isNotEmpty == true) {
        file = res.files.single;
-        print('file.bytes?.length: ${file.bytes?.length}');
      }
    }

@@ -1480,6 +1567,26 @@ class MessageInputState extends State<MessageInput> {
      return;
    }

+    if (file.size > _kMaxAttachmentSize) {
+      if (attachmentType == 'video') {
+        final mediaInfo = await CompressVideoService.compressVideo(file.path);
+        file = PlatformFile(
+          name: mediaInfo.title,
+          size: mediaInfo.filesize,
+          bytes: await mediaInfo.file.readAsBytes(),
+          path: mediaInfo.path,
+        );
+      } else {
+        Scaffold.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              'The file is too large to upload. The file size limit is 20MB',
+            ),
+          ),
+        );
+      }
+    }
+
    final channel = StreamChannel.of(context).channel;
    final attachment = _SendingAttachment(
      file: file,
@@ -1561,69 +1668,53 @@ class MessageInputState extends State<MessageInput> {
  }

  Widget _buildIdleSendButton(BuildContext context) {
-    return IconTheme(
-      data:
-          StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: Center(
-            child: InkWell(
-          onTap: () {
-            sendMessage();
-          },
-          child: Icon(
-            _getIdleSendIcon(),
-            color: Colors.grey,
-          ),
-        )),
-      ),
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Center(
+          child: InkWell(
+        onTap: () {
+          sendMessage();
+        },
+        child: StreamSvgIcon(
+          assetName: _getIdleSendIcon(),
+          color: Colors.grey,
+        ),
+      )),
    );
  }

  Widget _buildSendButton(BuildContext context) {
-    return IconTheme(
-      data:
-          StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
-      child: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: InkWell(
-            onTap: () {
-              sendMessage();
-            },
-            child: _getSendIcon(),
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: InkWell(
+          onTap: () {
+            sendMessage();
+          },
+          child: StreamSvgIcon(
+            assetName: _getSendIcon(),
+            color: StreamChatTheme.of(context).accentColor,
          ),
        ),
      ),
    );
  }

-  IconData _getIdleSendIcon() {
+  String _getIdleSendIcon() {
    if (_commandEnabled) {
-      return StreamIcons.search;
+      return 'Icon_search.svg';
    } else {
-      return StreamIcons.send_message;
+      return 'Icon_circle_up.svg';
    }
  }

-  Widget _getSendIcon() {
+  String _getSendIcon() {
    if (widget.editMessage != null) {
-      return Icon(
-        StreamIcons.check_send,
-        color: StreamChatTheme.of(context).accentColor,
-      );
+      return 'Icon_circle_right.svg';
    } else if (_commandEnabled) {
-      return Icon(
-        StreamIcons.search,
-        color: StreamChatTheme.of(context).accentColor,
-      );
+      return 'Icon_search.svg';
    } else {
-      return Transform.rotate(
-          angle: -pi / 2,
-          child: Icon(
-            StreamIcons.send_message,
-            color: StreamChatTheme.of(context).accentColor,
-          ));
+      return 'Icon_circle_right.svg';
    }
  }

@@ -6,6 +6,7 @@ import 'package:jiffy/jiffy.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/message_widget.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/system_message.dart';
 import 'package:visibility_detector/visibility_detector.dart';

@@ -175,10 +176,12 @@ class _MessageListViewState extends State<MessageListView> {
        : streamChannel.channel.state.messagesStream;

    return StreamBuilder<List<Message>>(
-        stream: messagesStream,
-        initialData: widget.parentMessage != null
-            ? streamChannel.channel.state.threads[widget.parentMessage.id]
-            : streamChannel.channel.state.messages,
+        stream: messagesStream.map((messages) => messages
+            .where((e) =>
+                !e.isDeleted ||
+                (e.isDeleted &&
+                    e.user.id == streamChannel.channel.client.state.user.id))
+            .toList()),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
@@ -308,19 +311,8 @@ class _MessageListViewState extends State<MessageListView> {
                  return messageWidget;
                },
              ),
-              if (streamChannel.channel.state.members.contains((Member e) =>
-                      e.userId == streamChannel.channel.client.state.user.id) &&
-                  widget.showScrollToBottom)
-                StreamBuilder<int>(
-                    stream: streamChannel.channel.state.unreadCountStream,
-                    builder: (context, snapshot) {
-                      if (!_showScrollToBottom ||
-                          !snapshot.hasData ||
-                          snapshot.data == 0) {
-                        return SizedBox();
-                      }
-                      return _buildScrollToBottom(snapshot.data);
-                    }),
+              if (widget.showScrollToBottom && _showScrollToBottom)
+                _buildScrollToBottom(),
              Positioned(
                top: 20.0,
                child: ValueListenableBuilder<Iterable<ItemPosition>>(
@@ -363,7 +355,8 @@ class _MessageListViewState extends State<MessageListView> {
            position.itemLeadingEdge > max.itemLeadingEdge ? position : max);
  }

-  Widget _buildScrollToBottom(int unreadCount) {
+  Widget _buildScrollToBottom() {
+    final streamChannel = StreamChannel.of(context);
    return Positioned(
      bottom: 8,
      right: 8,
@@ -374,8 +367,7 @@ class _MessageListViewState extends State<MessageListView> {
        children: [
          FloatingActionButton(
            backgroundColor: Colors.white,
-            child: Icon(
-              StreamIcons.down,
+            child: StreamSvgIcon.down(
              color: Colors.black,
            ),
            onPressed: () {
@@ -389,24 +381,34 @@ class _MessageListViewState extends State<MessageListView> {
              );
            },
          ),
-          Positioned(
-            width: 20,
-            height: 20,
-            left: 10,
-            top: -10,
-            child: CircleAvatar(
-              child: Padding(
-                padding: const EdgeInsets.all(3.0),
-                child: Text(
-                  unreadCount.toString(),
-                  style: TextStyle(
-                    fontSize: 11,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-              ),
-            ),
-          ),
+          if (streamChannel.channel.state.members.any((Member e) =>
+              e.userId == streamChannel.channel.client.state.user.id))
+            StreamBuilder<int>(
+                stream: streamChannel.channel.state.unreadCountStream,
+                initialData: streamChannel.channel.state.unreadCount,
+                builder: (context, snapshot) {
+                  if (!snapshot.hasData || snapshot.data <= 0) {
+                    return Offstage();
+                  }
+                  return Positioned(
+                    width: 20,
+                    height: 20,
+                    left: 10,
+                    top: -10,
+                    child: CircleAvatar(
+                      child: Padding(
+                        padding: const EdgeInsets.all(3.0),
+                        child: Text(
+                          snapshot.data.toString(),
+                          style: TextStyle(
+                            fontSize: 11,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                }),
        ],
      ),
    );
@@ -86,27 +86,35 @@ class MessageReactionsModal extends StatelessWidget {
                          messageTheme: messageTheme,
                        ),
                      ),
-                    IgnorePointer(
-                      child: MessageWidget(
-                        key: Key('MessageWidget'),
-                        reverse: reverse,
-                        message: message.copyWith(
-                          text: message.text.length > 200
-                              ? '${message.text.substring(0, 200)}...'
-                              : message.text,
-                        ),
-                        messageTheme: messageTheme,
-                        showReactions: false,
-                        showUsername: false,
-                        showUserAvatar: showUserAvatar,
-                        showReplyIndicator: false,
-                        showTimestamp: false,
-                        translateUserAvatar: false,
-                        showSendingIndicator: DisplayWidget.gone,
-                        shape: messageShape,
-                        showReactionPickerIndicator: true,
-                      ),
-                    ),
+                    TweenAnimationBuilder<double>(
+                        tween: Tween(begin: 0.0, end: 1.0),
+                        duration: Duration(milliseconds: 300),
+                        builder: (context, val, snapshot) {
+                          return Transform.scale(
+                            scale: val,
+                            child: IgnorePointer(
+                              child: MessageWidget(
+                                key: Key('MessageWidget'),
+                                reverse: reverse,
+                                message: message.copyWith(
+                                  text: message.text.length > 200
+                                      ? '${message.text.substring(0, 200)}...'
+                                      : message.text,
+                                ),
+                                messageTheme: messageTheme,
+                                showReactions: false,
+                                showUsername: false,
+                                showUserAvatar: showUserAvatar,
+                                showReplyIndicator: false,
+                                showTimestamp: false,
+                                translateUserAvatar: false,
+                                showSendingIndicator: DisplayWidget.gone,
+                                shape: messageShape,
+                                showReactionPickerIndicator: true,
+                              ),
+                            ),
+                          );
+                        }),
                    SizedBox(
                      height: 16,
                    ),
@@ -178,50 +186,60 @@ class MessageReactionsModal extends StatelessWidget {
    BuildContext context,
  ) {
    final isCurrentUser = reaction.user.id == currentUser.id;
-    return ConstrainedBox(
-      constraints: BoxConstraints.loose(Size(
-        64,
-        98,
-      )),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Stack(
-            children: [
-              UserAvatar(
-                onTap: onUserAvatarTap,
-                user: reaction.user,
-                constraints: BoxConstraints.tightFor(
-                  height: 64,
-                  width: 64,
-                ),
-                borderRadius: BorderRadius.circular(32),
-              ),
-              Positioned(
-                child: Align(
-                  alignment: Alignment.centerLeft,
-                  child: ReactionBubble(
-                    reactions: [reaction],
-                    borderColor: messageTheme.reactionsBorderColor,
-                    backgroundColor: messageTheme.reactionsBackgroundColor,
-                    highlightOwnReactions: false,
+    return TweenAnimationBuilder<double>(
+        tween: Tween(begin: 0.0, end: 1.0),
+        duration: Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+        builder: (context, val, snapshot) {
+          return Transform.scale(
+            scale: val,
+            child: ConstrainedBox(
+              constraints: BoxConstraints.loose(Size(
+                64,
+                98,
+              )),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Stack(
+                    children: [
+                      UserAvatar(
+                        onTap: onUserAvatarTap,
+                        user: reaction.user,
+                        constraints: BoxConstraints.tightFor(
+                          height: 64,
+                          width: 64,
+                        ),
+                        borderRadius: BorderRadius.circular(32),
+                      ),
+                      Positioned(
+                        child: Align(
+                          alignment: Alignment.centerLeft,
+                          child: ReactionBubble(
+                            reactions: [reaction],
+                            borderColor: messageTheme.reactionsBorderColor,
+                            backgroundColor:
+                                messageTheme.reactionsBackgroundColor,
+                            highlightOwnReactions: false,
+                          ),
+                        ),
+                        bottom: 4,
+                        left: isCurrentUser ? 0 : null,
+                        right: isCurrentUser ? 0 : null,
+                      ),
+                    ],
                  ),
-                ),
-                bottom: 4,
-                left: isCurrentUser ? 0 : null,
-                right: isCurrentUser ? 0 : null,
+                  Text(
+                    reaction.user.name,
+                    style: Theme.of(context).textTheme.subtitle2,
+                    textAlign: TextAlign.center,
+                  ),
+                ],
              ),
-            ],
-          ),
-          Text(
-            reaction.user.name,
-            style: Theme.of(context).textTheme.subtitle2,
-            textAlign: TextAlign.center,
-          ),
-        ],
-      ),
-    );
+            ),
+          );
+        });
  }
 }
@@ -287,6 +287,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,
                                          ),
                                        )
@@ -411,6 +415,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,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
        ],
      ),
    );
@@ -427,12 +459,13 @@ class _MessageWidgetState extends State<MessageWidget> {
          top: 0,
          child: Material(
            color: Colors.white,
+            clipBehavior: Clip.antiAlias,
            shape: CircleBorder(),
            child: Padding(
              padding: const EdgeInsets.all(1.0),
              child: UserAvatar(
                user: e.user,
-                constraints: BoxConstraints.loose(Size.fromRadius(16)),
+                constraints: BoxConstraints.loose(Size.fromRadius(8)),
                showOnlineStatus: false,
              ),
            ),
@@ -3,6 +3,7 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:stream_chat_flutter/src/reaction_icon.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';

 class ReactionBubble extends StatelessWidget {
@@ -99,14 +100,24 @@ class ReactionBubble extends StatelessWidget {
      padding: const EdgeInsets.symmetric(
        horizontal: 4.0,
      ),
-      child: Icon(
-        reactionIcon?.iconData ?? Icons.help_outline_rounded,
-        size: 16,
-        color: (!highlightOwnReactions ||
-                reaction.user.id == StreamChat.of(context).user.id)
-            ? StreamChatTheme.of(context).accentColor
-            : Colors.black.withOpacity(.5),
-      ),
+      child: reactionIcon != null
+          ? StreamSvgIcon(
+              assetName: reactionIcon.assetName,
+              width: 16,
+              height: 16,
+              color: (!highlightOwnReactions ||
+                      reaction.user.id == StreamChat.of(context).user.id)
+                  ? StreamChatTheme.of(context).accentColor
+                  : Colors.black.withOpacity(.5),
+            )
+          : Icon(
+              Icons.help_outline_rounded,
+              size: 16,
+              color: (!highlightOwnReactions ||
+                      reaction.user.id == StreamChat.of(context).user.id)
+                  ? StreamChatTheme.of(context).accentColor
+                  : Colors.black.withOpacity(.5),
+            ),
    );
  }

@@ -1,11 +1,9 @@
-import 'package:flutter/material.dart';
-
 class ReactionIcon {
  final String type;
-  final IconData iconData;
+  final String assetName;

  ReactionIcon({
    this.type,
-    this.iconData,
+    this.assetName,
  });
 }
@@ -1,4 +1,6 @@
+import 'package:ezanimation/ezanimation.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';

 import '../stream_chat_flutter.dart';

@@ -8,7 +10,8 @@ import '../stream_chat_flutter.dart';
 /// It shows a reaction picker
 ///
 /// Usually you don't use this widget as it's one of the default widgets used by [MessageWidget.onMessageActions].
-class ReactionPicker extends StatelessWidget {
+
+class ReactionPicker extends StatefulWidget {
  const ReactionPicker({
    Key key,
    @required this.message,
@@ -18,59 +21,136 @@ class ReactionPicker extends StatelessWidget {
  final Message message;
  final MessageTheme messageTheme;

+  @override
+  _ReactionPickerState createState() => _ReactionPickerState();
+}
+
+class _ReactionPickerState extends State<ReactionPicker>
+    with TickerProviderStateMixin {
+  List<EzAnimation> animations = [];
+
  @override
  Widget build(BuildContext context) {
    final reactionIcons = StreamChatTheme.of(context).reactionIcons;
-    return Material(
-      color: messageTheme.reactionsBackgroundColor,
-      clipBehavior: Clip.hardEdge,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(24),
-      ),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.end,
-        mainAxisSize: MainAxisSize.min,
-        children: reactionIcons.map((reactionIcon) {
-          final ownReactionIndex = message.ownReactions?.indexWhere(
-                  (reaction) => reaction.type == reactionIcon.type) ??
-              -1;
-          return IconButton(
-            iconSize: 24,
-            icon: Icon(
-              reactionIcon.iconData,
-              color: ownReactionIndex != -1
-                  ? StreamChatTheme.of(context).accentColor
-                  : Theme.of(context).iconTheme.color.withOpacity(.5),
+
+    if (animations.isEmpty && reactionIcons.isNotEmpty) {
+      reactionIcons.forEach((element) {
+        animations.add(
+          EzAnimation.sequence(
+            [
+              SequenceItem(0.0, 1.4),
+              SequenceItem(1.4, 1.0),
+            ],
+            Duration(milliseconds: 500),
+            vsync: this,
+          ),
+        );
+      });
+
+      triggerAnimations();
+    }
+
+    return TweenAnimationBuilder<double>(
+        tween: Tween(begin: 0.0, end: 1.0),
+        curve: Curves.easeInOutExpo,
+        duration: Duration(milliseconds: 500),
+        builder: (context, val, wid) {
+          return Transform.scale(
+            scale: val,
+            child: Material(
+              color: widget.messageTheme.reactionsBackgroundColor,
+              clipBehavior: Clip.hardEdge,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(24),
+              ),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.end,
+                mainAxisSize: MainAxisSize.min,
+                children: reactionIcons.map((reactionIcon) {
+                  final ownReactionIndex = widget.message.ownReactions
+                          ?.indexWhere((reaction) =>
+                              reaction.type == reactionIcon.type) ??
+                      -1;
+                  var index = reactionIcons.indexOf(reactionIcon);
+
+                  return IconButton(
+                    iconSize: 24,
+                    icon: AnimatedBuilder(
+                        animation: animations[index],
+                        builder: (context, val) {
+                          return Transform(
+                            transform: Matrix4.identity()
+                              ..scale(animations[index].value,
+                                  animations[index].value)
+                              ..rotateZ(1.0 - animations[index].value),
+                            child: StreamSvgIcon(
+                              assetName: reactionIcon.assetName,
+                              height: animations[index].value * 24.0,
+                              width: animations[index].value * 24.0,
+                              color: ownReactionIndex != -1
+                                  ? StreamChatTheme.of(context).accentColor
+                                  : Theme.of(context)
+                                      .iconTheme
+                                      .color
+                                      .withOpacity(.5),
+                            ),
+                          );
+                        }),
+                    onPressed: () {
+                      if (ownReactionIndex != -1) {
+                        removeReaction(
+                          context,
+                          widget.message.ownReactions[ownReactionIndex],
+                        );
+                      } else {
+                        sendReaction(
+                          context,
+                          reactionIcon.type,
+                        );
+                      }
+                    },
+                  );
+                }).toList(),
+              ),
            ),
-            onPressed: () {
-              if (ownReactionIndex != -1) {
-                removeReaction(
-                  context,
-                  message.ownReactions[ownReactionIndex],
-                );
-              } else {
-                sendReaction(
-                  context,
-                  reactionIcon.type,
-                );
-              }
-            },
          );
-        }).toList(),
-      ),
-    );
+        });
+  }
+
+  void triggerAnimations() async {
+    for (var a in animations) {
+      a.start();
+      await Future.delayed(Duration(milliseconds: 100));
+    }
+  }
+
+  void pop() async {
+    for (var a in animations) {
+      a.stop();
+    }
+    Navigator.of(context).pop();
  }

  /// Add a reaction to the message
  void sendReaction(BuildContext context, String reactionType) {
-    StreamChannel.of(context).channel.sendReaction(message, reactionType);
-    Navigator.of(context).pop();
+    StreamChannel.of(context)
+        .channel
+        .sendReaction(widget.message, reactionType);
+    pop();
  }

  /// Remove a reaction from the message
  void removeReaction(BuildContext context, Reaction reaction) {
-    StreamChannel.of(context).channel.deleteReaction(message, reaction);
-    Navigator.of(context).pop();
+    StreamChannel.of(context).channel.deleteReaction(widget.message, reaction);
+    pop();
+  }
+
+  @override
+  void dispose() {
+    for (var a in animations) {
+      a?.dispose();
+    }
+    super.dispose();
  }
 }
@@ -5,7 +5,6 @@ import 'package:stream_chat_flutter/src/channel_header.dart';
 import 'package:stream_chat_flutter/src/channel_preview.dart';
 import 'package:stream_chat_flutter/src/message_input.dart';
 import 'package:stream_chat_flutter/src/reaction_icon.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
 import 'package:stream_chat_flutter/src/utils.dart';

 /// Inherited widget providing the [StreamChatThemeData] to the widget tree
@@ -353,23 +352,23 @@ class StreamChatThemeData {
      reactionIcons: [
        ReactionIcon(
          type: 'love',
-          iconData: StreamIcons.love_reaction,
+          assetName: 'Icon_love_reaction.svg',
        ),
        ReactionIcon(
          type: 'thumbs_up',
-          iconData: StreamIcons.thumbs_up_reaction,
+          assetName: 'Icon_thumbs_up_reaction.svg',
        ),
        ReactionIcon(
          type: 'thumbs_down',
-          iconData: StreamIcons.thumbs_down_reaction,
+          assetName: 'Icon_thumbs_down_reaction.svg',
        ),
        ReactionIcon(
          type: 'lol',
-          iconData: StreamIcons.LOL_reaction,
+          assetName: 'Icon_LOL_reaction.svg',
        ),
        ReactionIcon(
          type: 'wut',
-          iconData: StreamIcons.wut_reaction,
+          assetName: 'Icon_wut_reaction.svg',
        ),
      ],
    );
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class StreamNeumorphicButton extends StatelessWidget {
+  final Widget child;
+  final Color backgroundColor;
+
+  const StreamNeumorphicButton({
+    Key key,
+    @required this.child,
+    this.backgroundColor = Colors.white,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: child,
+      margin: EdgeInsets.all(8.0),
+      height: 40,
+      width: 40,
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        shape: BoxShape.circle,
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey[700],
+            offset: Offset(0, 1.0),
+            blurRadius: 0.5,
+            spreadRadius: 0,
+          ),
+          BoxShadow(
+            color: Colors.white,
+            offset: Offset.zero,
+            blurRadius: 0.5,
+            spreadRadius: 0,
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,400 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class StreamSvgIcon extends StatelessWidget {
+  final String assetName;
+  final double width;
+  final double height;
+  final Color color;
+
+  const StreamSvgIcon({
+    this.assetName,
+    this.width,
+    this.height,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final key = Key('StreamSvgIcon-$assetName');
+    return kIsWeb
+        ? Image.network(
+            'packages/stream_chat_flutter/svgs/$assetName',
+            width: width,
+            height: height,
+            key: key,
+            color: color,
+            alignment: Alignment.center,
+          )
+        : SvgPicture.asset(
+            'lib/svgs/$assetName',
+            package: 'stream_chat_flutter',
+            key: key,
+            width: width,
+            height: height,
+            color: color,
+            alignment: Alignment.center,
+          );
+  }
+
+  factory StreamSvgIcon.settings({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'settings.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.down({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_down.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.attach({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_attach.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.smile({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_smile.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.mentions({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'mentions.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.record({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_record.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.camera({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_camera.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.files({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'files.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.pictures({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'pictures.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.left({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_left.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.user({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_user.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.userAdd({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_User_add.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.check({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_check.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.penWrite({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_pen-write.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.contacts({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_contacts.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.close({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_close.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.search({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_search.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.right({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_right.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.mute({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_mute.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.userRemove({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_User_deselect.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.lightning({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_lightning-command runner.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.emptyCircleLeft({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_empty_circle_left.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.message({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_message.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.thread({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_Thread_Reply.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.edit({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_edit.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.copy({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_copy.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.delete({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_delete.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.eye({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_eye-off.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.arrow_right({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_arrow_right.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+
+  factory StreamSvgIcon.close_small({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'Icon_close_sml.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
+}
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
-import 'package:stream_chat_flutter/src/back_button.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';

 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/thread_header.png)
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/thread_header_paint.png)
@@ -84,9 +84,14 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
          child: showBackButton
              ? AspectRatio(
                  aspectRatio: 1,
-                  child: StreamBackButton(
-                    onPressed: onBackPressed,
-                    icon: Icons.close,
+                  child: IconButton(
+                    onPressed: onBackPressed ?? () => Navigator.pop(context),
+                    icon: StreamSvgIcon.close(
+                      size: 24,
+                      color: Theme.of(context).brightness == Brightness.dark
+                          ? Colors.white
+                          : Colors.black,
+                    ),
                  ),
                )
              : SizedBox(),
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';

@@ -8,9 +9,10 @@ class TypingIndicator extends StatelessWidget {
  const TypingIndicator({
    Key key,
    this.channel,
-    this.alternativeWidget = const SizedBox(),
+    this.alternativeWidget,
    this.style,
    this.alignment = Alignment.centerLeft,
+    this.padding = const EdgeInsets.all(0),
  }) : super(key: key);

  /// Style of the text widget
@@ -22,6 +24,9 @@ class TypingIndicator extends StatelessWidget {
  /// Widget built when no typings is happening
  final Widget alternativeWidget;

+  /// The padding of this widget
+  final EdgeInsets padding;
+
  final Alignment alignment;

  @override
@@ -35,20 +40,33 @@ class TypingIndicator extends StatelessWidget {
        return AnimatedSwitcher(
          duration: Duration(milliseconds: 300),
          child: snapshot.data?.isNotEmpty == true
-              ? Align(
-                  key: Key('typings'),
-                  alignment: alignment,
-                  child: Text(
-                    '${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing...',
-                    maxLines: 1,
-                    style: style,
+              ? Padding(
+                  padding: padding,
+                  child: Align(
+                    key: Key('typings'),
+                    alignment: alignment,
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Lottie.asset(
+                          'animations/typing_dots.json',
+                          package: 'stream_chat_flutter',
+                          height: 4,
+                        ),
+                        Text(
+                          '  ${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing',
+                          maxLines: 1,
+                          style: style,
+                        ),
+                      ],
+                    ),
                  ),
                )
              : Align(
                  key: Key('alternative'),
                  alignment: alignment,
                  child: Container(
-                    child: alternativeWidget,
+                    child: alternativeWidget ?? Offstage(),
                  ),
                ),
        );
@@ -40,6 +40,7 @@ class UserAvatar extends StatelessWidget {
    final streamChatTheme = StreamChatTheme.of(context);

    Widget avatar = ClipRRect(
+      clipBehavior: Clip.antiAlias,
      borderRadius: borderRadius ??
          streamChatTheme.ownMessageTheme.avatarTheme.borderRadius,
      child: Container(
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/user_list_view.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';

@@ -73,9 +74,9 @@ class UserItem extends StatelessWidget {
      ),
      trailing: selected
          ? CircleAvatar(
-              child: Icon(
-                StreamIcons.check,
+              child: StreamSvgIcon.check(
                size: 20,
+                color: Colors.white,
              ),
              radius: 10,
            )
@@ -2,6 +2,7 @@ import 'dart:convert';

 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart';
 import 'package:stream_chat_flutter/src/users_bloc.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';

@@ -144,8 +145,6 @@ class UserListView extends StatefulWidget {

 class _UserListViewState extends State<UserListView>
    with WidgetsBindingObserver {
-  final ScrollController _scrollController = ScrollController();
-
  bool get _isListView => widget.crossAxisCount == 1;

  @override
@@ -158,14 +157,6 @@ class _UserListViewState extends State<UserListView>
      pagination: widget.pagination,
      options: widget.options,
    );
-
-    _scrollController.addListener(() {
-      usersBloc.queryUsersLoading.first.then((loading) {
-        if (!loading) {
-          _listenUserPagination(usersBloc);
-        }
-      });
-    });
  }

  @override
@@ -327,57 +318,41 @@ class _UserListViewState extends State<UserListView>
          );
        }

-        if (_isListView) {
-          return ListView.custom(
-            physics: AlwaysScrollableScrollPhysics(),
-            controller: _scrollController,
-            childrenDelegate: SliverChildBuilderDelegate(
-              (context, i) {
-                return _listItemBuilder(context, i, items);
-              },
-              childCount: (items.length * 2) + 1,
-              findChildIndexCallback: (key) {
-                final ValueKey<String> valueKey = key;
-                final index =
-                    items.indexWhere((item) => item.key == valueKey.value);
-                return index != -1 ? (index * 2) : null;
-              },
-            ),
-          );
-        }
-        return GridView.custom(
-          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-            crossAxisCount: widget.crossAxisCount,
-          ),
-          physics: AlwaysScrollableScrollPhysics(),
-          controller: _scrollController,
-          childrenDelegate: SliverChildBuilderDelegate(
-            (context, i) {
-              return _gridItemBuilder(context, i, items);
-            },
-            childCount: items.length,
-            findChildIndexCallback: (key) {
-              final ValueKey<String> valueKey = key;
-              final index =
-                  items.indexWhere((item) => item.key == valueKey.value);
-              return index != -1 ? index : null;
-            },
-          ),
+        final child = _isListView
+            ? ListView.separated(
+                physics: AlwaysScrollableScrollPhysics(),
+                // controller: _scrollController,
+                itemCount: items.isNotEmpty ? items.length + 1 : items.length,
+                separatorBuilder: (_, index) {
+                  if (widget.separatorBuilder != null) {
+                    return widget.separatorBuilder(context, index);
+                  }
+                  return _separatorBuilder(context, index);
+                },
+                itemBuilder: (context, index) {
+                  return _listItemBuilder(context, index, items);
+                },
+              )
+            : GridView.builder(
+                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: widget.crossAxisCount,
+                ),
+                itemCount: items.isNotEmpty ? items.length + 1 : items.length,
+                physics: AlwaysScrollableScrollPhysics(),
+                itemBuilder: (context, index) {
+                  return _gridItemBuilder(context, index, items);
+                },
+              );
+
+        return LazyLoadScrollView(
+          onEndOfPage: () => _listenUserPagination(usersBlocState),
+          child: child,
        );
      },
    );
  }

  Widget _listItemBuilder(BuildContext context, int i, List<ListItem> items) {
-    if (i % 2 != 0) {
-      if (widget.separatorBuilder != null) {
-        return widget.separatorBuilder(context, i);
-      }
-      return _separatorBuilder(context, i);
-    }
-
-    i = i ~/ 2;
-
    final usersProvider = UsersBloc.of(context);
    if (i < items.length) {
      final item = items[i];
@@ -507,18 +482,14 @@ class _UserListViewState extends State<UserListView>
  }

  void _listenUserPagination(UsersBlocState usersProvider) {
-    if (_scrollController.position.maxScrollExtent ==
-            _scrollController.offset &&
-        _scrollController.offset != 0) {
-      usersProvider.queryUsers(
-        filter: widget.filter,
-        sort: widget.sort,
-        pagination: widget.pagination.copyWith(
-          offset: usersProvider.users?.length ?? 0,
-        ),
-        options: widget.options,
-      );
-    }
+    usersProvider.queryUsers(
+      filter: widget.filter,
+      sort: widget.sort,
+      pagination: widget.pagination.copyWith(
+        offset: usersProvider.users?.length ?? 0,
+      ),
+      options: widget.options,
+    );
  }

  @override
@@ -1,37 +0,0 @@
-import 'dart:io';
-
-import 'package:flutter/material.dart';
-import 'package:video_player/video_player.dart';
-
-class VideoThumbnail extends StatefulWidget {
-  final File file;
-
-  const VideoThumbnail({
-    Key key,
-    @required this.file,
-  }) : super(key: key);
-
-  @override
-  _VideoThumbnailState createState() => _VideoThumbnailState();
-}
-
-class _VideoThumbnailState extends State<VideoThumbnail> {
-  VideoPlayerController _videoPlayerController;
-  @override
-  Widget build(BuildContext context) {
-    return VideoPlayer(_videoPlayerController);
-  }
-
-  @override
-  void initState() {
-    _videoPlayerController = VideoPlayerController.file(widget.file)
-      ..initialize();
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    _videoPlayerController.dispose();
-    super.dispose();
-  }
-}