diff --git a/packages/stream_chat_flutter/example/lib/main.dart b/packages/stream_chat_flutter/example/lib/main.dart
index 731ef080..1f3b51d2 100644
--- a/packages/stream_chat_flutter/example/lib/main.dart
+++ b/packages/stream_chat_flutter/example/lib/main.dart
@@ -61,8 +61,8 @@ class MyApp extends StatelessWidget {
       themeMode: ThemeMode.system,
       builder: (context, widget) {
         return StreamChat(
-          child: widget,
           client: client,
+          child: widget,
         );
       },
       home: StreamChannel(
@@ -80,7 +80,7 @@ class MyApp extends StatelessWidget {
 class ChannelPage extends StatelessWidget {
   /// Creates the page that shows the list of messages
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
diff --git a/packages/stream_chat_flutter/example/lib/split_view.dart b/packages/stream_chat_flutter/example/lib/split_view.dart
index 0432a0b4..1c833e23 100644
--- a/packages/stream_chat_flutter/example/lib/split_view.dart
+++ b/packages/stream_chat_flutter/example/lib/split_view.dart
@@ -25,8 +25,8 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       builder: (context, child) => StreamChat(
-        child: child,
         client: client,
+        child: child,
       ),
       home: SplitView(),
     );
@@ -39,7 +39,7 @@ class SplitView extends StatefulWidget {
 }
 
 class _SplitViewState extends State<SplitView> {
-  Channel selectedChannel;
+  Channel? selectedChannel;
 
   @override
   Widget build(BuildContext context) {
@@ -47,6 +47,7 @@ class _SplitViewState extends State<SplitView> {
       direction: Axis.horizontal,
       children: <Widget>[
         Flexible(
+          flex: 1,
           child: ChannelListPage(
             onTap: (channel) {
               setState(() {
@@ -54,15 +55,15 @@ class _SplitViewState extends State<SplitView> {
               });
             },
           ),
-          flex: 1,
         ),
         Flexible(
+          flex: 2,
           child: Scaffold(
             body: selectedChannel != null
                 ? StreamChannel(
-                    key: ValueKey(selectedChannel.cid),
+                    key: ValueKey(selectedChannel!.cid),
+                    channel: selectedChannel!,
                     child: ChannelPage(),
-                    channel: selectedChannel,
                   )
                 : Center(
                     child: Text(
@@ -71,7 +72,6 @@ class _SplitViewState extends State<SplitView> {
                     ),
                   ),
           ),
-          flex: 2,
         ),
       ],
     );
@@ -79,7 +79,7 @@ class _SplitViewState extends State<SplitView> {
 }
 
 class ChannelListPage extends StatelessWidget {
-  final void Function(Channel) onTap;
+  final void Function(Channel)? onTap;
 
   ChannelListPage({this.onTap});
 
@@ -90,12 +90,12 @@ class ChannelListPage extends StatelessWidget {
         child: ChannelListView(
           onChannelTap: onTap != null
               ? (channel, _) {
-                  onTap(channel);
+                  onTap!(channel);
                 }
               : null,
           filter: Filter.in_(
             'members',
-            [StreamChat.of(context).user.id],
+            [StreamChat.of(context).user!.id],
           ),
           sort: [SortOption('last_message_at')],
           pagination: PaginationParams(
@@ -109,7 +109,7 @@ class ChannelListPage extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
diff --git a/packages/stream_chat_flutter/example/lib/tutorial-part-1.dart b/packages/stream_chat_flutter/example/lib/tutorial-part-1.dart
index 1fd53f55..2a720c70 100644
--- a/packages/stream_chat_flutter/example/lib/tutorial-part-1.dart
+++ b/packages/stream_chat_flutter/example/lib/tutorial-part-1.dart
@@ -55,8 +55,8 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       builder: (context, widget) {
         return StreamChat(
-          child: widget,
           client: client,
+          child: widget,
         );
       },
       home: StreamChannel(
@@ -69,7 +69,7 @@ class MyApp extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
diff --git a/packages/stream_chat_flutter/example/lib/tutorial-part-2.dart b/packages/stream_chat_flutter/example/lib/tutorial-part-2.dart
index 57ee471b..d1b39774 100644
--- a/packages/stream_chat_flutter/example/lib/tutorial-part-2.dart
+++ b/packages/stream_chat_flutter/example/lib/tutorial-part-2.dart
@@ -73,7 +73,7 @@ class ChannelListPage extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
diff --git a/packages/stream_chat_flutter/example/lib/tutorial-part-3.dart b/packages/stream_chat_flutter/example/lib/tutorial-part-3.dart
index 89613b82..fc55f6d9 100644
--- a/packages/stream_chat_flutter/example/lib/tutorial-part-3.dart
+++ b/packages/stream_chat_flutter/example/lib/tutorial-part-3.dart
@@ -1,4 +1,5 @@
 // ignore_for_file: public_member_api_docs
+import 'package:collection/collection.dart' show IterableExtension;
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
@@ -43,8 +44,8 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       builder: (context, child) => StreamChat(
-        child: child,
         client: client,
+        child: child,
       ),
       home: ChannelListPage(),
     );
@@ -59,7 +60,7 @@ class ChannelListPage extends StatelessWidget {
         child: ChannelListView(
           filter: Filter.in_(
             'members',
-            [StreamChat.of(context).user.id],
+            [StreamChat.of(context).user!.id],
           ),
           channelPreviewBuilder: _channelPreviewBuilder,
           // sort: [SortOption('last_message_at')],
@@ -73,13 +74,12 @@ class ChannelListPage extends StatelessWidget {
   }
 
   Widget _channelPreviewBuilder(BuildContext context, Channel channel) {
-    final lastMessage = channel.state.messages.reversed.firstWhere(
+    final lastMessage = channel.state?.messages.reversed.firstWhereOrNull(
       (message) => !message.isDeleted,
-      orElse: () => null,
     );
 
-    final subtitle = (lastMessage == null ? 'nothing yet' : lastMessage.text);
-    final opacity = channel.state.unreadCount > .0 ? 1.0 : 0.5;
+    final subtitle = (lastMessage == null ? 'nothing yet' : lastMessage.text!);
+    final opacity = (channel.state?.unreadCount ?? 0) > 0 ? 1.0 : 0.5;
 
     return ListTile(
       onTap: () {
@@ -87,8 +87,8 @@ class ChannelListPage extends StatelessWidget {
           context,
           MaterialPageRoute(
             builder: (_) => StreamChannel(
-              child: ChannelPage(),
               channel: channel,
+              child: ChannelPage(),
             ),
           ),
         );
@@ -98,7 +98,7 @@ class ChannelListPage extends StatelessWidget {
       ),
       title: ChannelName(
         textStyle:
-            StreamChatTheme.of(context).channelPreviewTheme.title.copyWith(
+            StreamChatTheme.of(context).channelPreviewTheme.title!.copyWith(
                   color: StreamChatTheme.of(context)
                       .colorTheme
                       .black
@@ -106,10 +106,10 @@ class ChannelListPage extends StatelessWidget {
                 ),
       ),
       subtitle: Text(subtitle),
-      trailing: channel.state.unreadCount > 0
+      trailing: channel.state!.unreadCount! > 0
           ? CircleAvatar(
               radius: 10,
-              child: Text(channel.state.unreadCount.toString()),
+              child: Text(channel.state!.unreadCount.toString()),
             )
           : SizedBox(),
     );
@@ -118,7 +118,7 @@ class ChannelListPage extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
diff --git a/packages/stream_chat_flutter/example/lib/tutorial-part-4.dart b/packages/stream_chat_flutter/example/lib/tutorial-part-4.dart
index 82589355..5a85339f 100644
--- a/packages/stream_chat_flutter/example/lib/tutorial-part-4.dart
+++ b/packages/stream_chat_flutter/example/lib/tutorial-part-4.dart
@@ -33,8 +33,8 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       builder: (context, child) => StreamChat(
-        child: child,
         client: client,
+        child: child,
       ),
       home: Container(
         child: ChannelListPage(),
@@ -51,7 +51,7 @@ class ChannelListPage extends StatelessWidget {
         child: ChannelListView(
           filter: Filter.in_(
             'members',
-            [StreamChat.of(context).user.id],
+            [StreamChat.of(context).user!.id],
           ),
           sort: [SortOption('last_message_at')],
           pagination: PaginationParams(
@@ -66,7 +66,7 @@ class ChannelListPage extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
@@ -92,10 +92,10 @@ class ChannelPage extends StatelessWidget {
 }
 
 class ThreadPage extends StatelessWidget {
-  final Message parent;
+  final Message? parent;
 
   ThreadPage({
-    Key key,
+    Key? key,
     this.parent,
   }) : super(key: key);
 
@@ -103,7 +103,7 @@ class ThreadPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: ThreadHeader(
-        parent: parent,
+        parent: parent!,
       ),
       body: Column(
         children: <Widget>[
diff --git a/packages/stream_chat_flutter/example/lib/tutorial-part-5.dart b/packages/stream_chat_flutter/example/lib/tutorial-part-5.dart
index b265eef3..7a75c037 100644
--- a/packages/stream_chat_flutter/example/lib/tutorial-part-5.dart
+++ b/packages/stream_chat_flutter/example/lib/tutorial-part-5.dart
@@ -38,8 +38,8 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       builder: (context, child) => StreamChat(
-        child: child,
         client: client,
+        child: child,
       ),
       home: ChannelListPage(),
     );
@@ -54,7 +54,7 @@ class ChannelListPage extends StatelessWidget {
         child: ChannelListView(
           filter: Filter.in_(
             'members',
-            [StreamChat.of(context).user.id],
+            [StreamChat.of(context).user!.id],
           ),
           sort: [SortOption('last_message_at')],
           pagination: PaginationParams(
@@ -69,7 +69,7 @@ class ChannelListPage extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
@@ -95,7 +95,7 @@ class ChannelPage extends StatelessWidget {
     List<Message> messages,
   ) {
     final message = details.message;
-    final isCurrentUser = StreamChat.of(context).user.id == message.user.id;
+    final isCurrentUser = StreamChat.of(context).user!.id == message.user!.id;
     final textAlign = isCurrentUser ? TextAlign.right : TextAlign.left;
     final color = isCurrentUser ? Colors.blueGrey : Colors.blue;
 
@@ -110,11 +110,11 @@ class ChannelPage extends StatelessWidget {
         ),
         child: ListTile(
           title: Text(
-            message.text,
+            message.text!,
             textAlign: textAlign,
           ),
           subtitle: Text(
-            message.user.extraData['name'],
+            message.user!.extraData['name'] as String,
             textAlign: textAlign,
           ),
         ),
diff --git a/packages/stream_chat_flutter/example/lib/tutorial-part-6.dart b/packages/stream_chat_flutter/example/lib/tutorial-part-6.dart
index 7d732eac..c49ffaf1 100644
--- a/packages/stream_chat_flutter/example/lib/tutorial-part-6.dart
+++ b/packages/stream_chat_flutter/example/lib/tutorial-part-6.dart
@@ -64,9 +64,9 @@ class MyApp extends StatelessWidget {
       theme: themeData,
       builder: (context, child) {
         return StreamChat(
-          child: child,
           client: client,
           streamChatThemeData: customTheme,
+          child: child,
         );
       },
       home: ChannelListPage(),
@@ -82,7 +82,7 @@ class ChannelListPage extends StatelessWidget {
         child: ChannelListView(
           filter: Filter.in_(
             'members',
-            [StreamChat.of(context).user.id],
+            [StreamChat.of(context).user!.id],
           ),
           sort: [SortOption('last_message_at')],
           pagination: PaginationParams(
@@ -97,7 +97,7 @@ class ChannelListPage extends StatelessWidget {
 
 class ChannelPage extends StatelessWidget {
   const ChannelPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
@@ -123,10 +123,10 @@ class ChannelPage extends StatelessWidget {
 }
 
 class ThreadPage extends StatelessWidget {
-  final Message parent;
+  final Message? parent;
 
   ThreadPage({
-    Key key,
+    Key? key,
     this.parent,
   }) : super(key: key);
 
@@ -134,7 +134,7 @@ class ThreadPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: ThreadHeader(
-        parent: parent,
+        parent: parent!,
       ),
       body: Column(
         children: <Widget>[
diff --git a/packages/stream_chat_flutter/example/pubspec.yaml b/packages/stream_chat_flutter/example/pubspec.yaml
index af8595d5..106517fb 100644
--- a/packages/stream_chat_flutter/example/pubspec.yaml
+++ b/packages/stream_chat_flutter/example/pubspec.yaml
@@ -18,7 +18,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.7.0 <3.0.0"
+  sdk: '>=2.12.0 <3.0.0'
 
 dependencies:
   flutter:
@@ -28,7 +28,8 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.0
+  cupertino_icons: ^1.0.2
+  collection: ^1.15.0
 
 dependency_overrides:
   stream_chat:
diff --git a/packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart b/packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart
index cb8d3556..8e2ede71 100644
--- a/packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart
+++ b/packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart
@@ -21,7 +21,12 @@ class GiphyAttachment extends AttachmentWidget {
     this.onShowMessage,
     this.onReturnAction,
     this.onAttachmentTap,
-  }) : super(key: key, message: message, attachment: attachment, size: size);
+  }) : super(
+          key: key,
+          message: message,
+          attachment: attachment,
+          size: size,
+        );
 
   @override
   Widget build(BuildContext context) {
@@ -173,6 +178,7 @@ class GiphyAttachment extends AttachmentWidget {
                                     .black
                                     .withOpacity(0.5),
                               ),
+                          maxLines: 1,
                         ),
                       ),
                     ),
diff --git a/packages/stream_chat_flutter/lib/src/media_list_view.dart b/packages/stream_chat_flutter/lib/src/media_list_view.dart
index 3ba266bc..703fb092 100644
--- a/packages/stream_chat_flutter/lib/src/media_list_view.dart
+++ b/packages/stream_chat_flutter/lib/src/media_list_view.dart
@@ -177,7 +177,7 @@ class MediaThumbnailProvider extends ImageProvider<MediaThumbnailProvider> {
   @override
   ImageStreamCompleter load(key, decode) {
     return MultiFrameImageStreamCompleter(
-      codec: _loadAsync(key, decode) as Future<ui.Codec>,
+      codec: _loadAsync(key, decode),
       scale: 1.0,
       informationCollector: () sync* {
         yield ErrorDescription('Id: ${media.id}');
@@ -185,11 +185,10 @@ class MediaThumbnailProvider extends ImageProvider<MediaThumbnailProvider> {
     );
   }
 
-  Future<ui.Codec?> _loadAsync(
+  Future<ui.Codec> _loadAsync(
       MediaThumbnailProvider key, DecoderCallback decode) async {
     assert(key == this);
     final bytes = await media.thumbData;
-    if (bytes?.isNotEmpty != true) return null;
 
     return await decode(bytes!);
   }
diff --git a/packages/stream_chat_flutter/lib/src/message_input.dart b/packages/stream_chat_flutter/lib/src/message_input.dart
index 12ee9e93..c7ddb5f1 100644
--- a/packages/stream_chat_flutter/lib/src/message_input.dart
+++ b/packages/stream_chat_flutter/lib/src/message_input.dart
@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:io';
 import 'dart:math';
 
 import 'package:cached_network_image/cached_network_image.dart';
@@ -610,7 +609,7 @@ class MessageInputState extends State<MessageInput> {
                 Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Container(
-                    constraints: BoxConstraints.tight(Size(64, 24)),
+                    constraints: BoxConstraints.tight(Size(84, 24)),
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(12),
                       color: theme.colorTheme.accentBlue,
@@ -1105,10 +1104,14 @@ class MessageInputState extends State<MessageInput> {
   }
 
   void _addAttachment(AssetEntity medium) async {
-    final mediaFile = await (medium.originFile.timeout(
+    final mediaFile = await medium.originFile.timeout(
       Duration(seconds: 5),
       onTimeout: () => medium.originFile,
-    ) as FutureOr<File>);
+    );
+
+    if (mediaFile == null) {
+      return;
+    }
 
     var file = AttachmentFile(
       path: mediaFile.path,
diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart
index d39240ab..1e8049f8 100644
--- a/packages/stream_chat_flutter/lib/src/message_widget.dart
+++ b/packages/stream_chat_flutter/lib/src/message_widget.dart
@@ -446,7 +446,7 @@ class _MessageWidgetState extends State<MessageWidget>
               transform: Matrix4.rotationY(widget.reverse ? pi : 0),
               child: FractionallySizedBox(
                 alignment: Alignment.centerLeft,
-                widthFactor: 0.75,
+                widthFactor: 0.78,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisSize: MainAxisSize.min,