diff --git a/packages/stream_chat_flutter/example/pubspec.yaml b/packages/stream_chat_flutter/example/pubspec.yaml
index bd785a29d..ead5158ad 100644
--- a/packages/stream_chat_flutter/example/pubspec.yaml
+++ b/packages/stream_chat_flutter/example/pubspec.yaml
@@ -38,6 +38,10 @@ dev_dependencies:
   flutter_test:
     sdk: flutter
 
+dependency_overrides: 
+  stream_chat_flutter: 
+    path: ../
+
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
 
diff --git a/packages/stream_chat_flutter/lib/src/channel_list_view.dart b/packages/stream_chat_flutter/lib/src/channel_list_view.dart
index f7c39e8eb..7280d8262 100644
--- a/packages/stream_chat_flutter/lib/src/channel_list_view.dart
+++ b/packages/stream_chat_flutter/lib/src/channel_list_view.dart
@@ -207,8 +207,6 @@ class ChannelListView extends StatefulWidget {
 }
 
 class _ChannelListViewState extends State<ChannelListView> {
-  final _slideController = SlidableController();
-
   late final _defaultController = ChannelListController();
 
   ChannelListController get _channelListController =>
@@ -270,19 +268,21 @@ class _ChannelListViewState extends State<ChannelListView> {
             _gridItemBuilder(context, index, channels),
       );
     }
-    return ListView.separated(
-      padding: widget.padding,
-      physics: const AlwaysScrollableScrollPhysics(),
-      // all channels + progress loader
-      itemCount: channels.length + 1,
-      separatorBuilder: (_, index) {
-        if (widget.separatorBuilder != null) {
-          return widget.separatorBuilder!(context, index);
-        }
-        return _separatorBuilder(context, index);
-      },
-      itemBuilder: (context, index) =>
-          _listItemBuilder(context, index, channels),
+    return SlidableAutoCloseBehavior(
+      child: ListView.separated(
+        padding: widget.padding,
+        physics: const AlwaysScrollableScrollPhysics(),
+        // all channels + progress loader
+        itemCount: channels.length + 1,
+        separatorBuilder: (_, index) {
+          if (widget.separatorBuilder != null) {
+            return widget.separatorBuilder!(context, index);
+          }
+          return _separatorBuilder(context, index);
+        },
+        itemBuilder: (context, index) =>
+            _listItemBuilder(context, index, channels),
+      ),
     );
   }
 
@@ -510,82 +510,86 @@ class _ChannelListViewState extends State<ChannelListView> {
     final backgroundColor = chatThemeData.colorTheme.inputBg;
     final channel = channels[i];
 
+    final canDeleteChannel =
+        channel.ownCapabilities.contains(PermissionType.deleteChannel);
+
     return StreamChannel(
       key: ValueKey<String>('CHANNEL-${channel.cid}'),
       channel: channel,
       child: Slidable(
-        controller: _slideController,
         enabled: widget.swipeToAction,
-        actionPane: const SlidableBehindActionPane(),
-        actionExtentRatio: 0.12,
-        secondaryActions: widget.swipeActions
-                ?.map((e) => IconSlideAction(
-                      color: e.color,
-                      iconWidget: e.iconWidget,
-                      onTap: () {
-                        e.onTap?.call(channel);
-                      },
-                    ))
-                .toList() ??
-            <Widget>[
-              IconSlideAction(
-                color: backgroundColor,
-                icon: Icons.more_horiz,
-                onTap: widget.onMoreDetailsPressed != null
-                    ? () {
-                        widget.onMoreDetailsPressed!(channel);
-                      }
-                    : () {
-                        showModalBottomSheet(
-                          clipBehavior: Clip.hardEdge,
-                          shape: const RoundedRectangleBorder(
-                            borderRadius: BorderRadius.only(
-                              topLeft: Radius.circular(32),
-                              topRight: Radius.circular(32),
+        endActionPane: ActionPane(
+          extentRatio: canDeleteChannel ? 0.4 : 0.2,
+          motion: const BehindMotion(),
+          children: widget.swipeActions
+                  ?.map((e) => CustomSlidableAction(
+                        backgroundColor: e.color ?? Colors.white,
+                        child: e.iconWidget,
+                        onPressed: (_) {
+                          e.onTap?.call(channel);
+                        },
+                      ))
+                  .toList() ??
+              <Widget>[
+                CustomSlidableAction(
+                  backgroundColor: backgroundColor,
+                  onPressed: widget.onMoreDetailsPressed != null
+                      ? (_) {
+                          widget.onMoreDetailsPressed!(channel);
+                        }
+                      : (_) {
+                          showModalBottomSheet(
+                            clipBehavior: Clip.hardEdge,
+                            shape: const RoundedRectangleBorder(
+                              borderRadius: BorderRadius.only(
+                                topLeft: Radius.circular(32),
+                                topRight: Radius.circular(32),
+                              ),
                             ),
-                          ),
-                          context: context,
-                          builder: (context) => StreamChannel(
-                            channel: channel,
-                            child: StreamChannelInfoBottomSheet(
+                            context: context,
+                            builder: (context) => StreamChannel(
                               channel: channel,
-                              onViewInfoTap: () {
-                                widget.onViewInfoTap?.call(channel);
-                              },
-                            ),
-                          ),
-                        );
-                      },
-              ),
-              if (channel.ownCapabilities
-                  .contains(PermissionType.deleteChannel))
-                IconSlideAction(
-                  color: backgroundColor,
-                  iconWidget: StreamSvgIcon.delete(
-                    color: chatThemeData.colorTheme.accentError,
-                  ),
-                  onTap: widget.onDeletePressed != null
-                      ? () {
-                          widget.onDeletePressed?.call(channel);
-                        }
-                      : () async {
-                          final res = await showConfirmationDialog(
-                            context,
-                            title: context.translations.deleteConversationLabel,
-                            question:
-                                context.translations.deleteConversationQuestion,
-                            okText: context.translations.deleteLabel,
-                            cancelText: context.translations.cancelLabel,
-                            icon: StreamSvgIcon.delete(
-                              color: chatThemeData.colorTheme.accentError,
+                              child: StreamChannelInfoBottomSheet(
+                                channel: channel,
+                                onViewInfoTap: () {
+                                  widget.onViewInfoTap?.call(channel);
+                                },
+                              ),
                             ),
                           );
-                          if (res == true) {
-                            await channel.delete();
-                          }
                         },
+                  child: const Icon(Icons.more_horiz),
                 ),
-            ],
+                if (canDeleteChannel)
+                  CustomSlidableAction(
+                    backgroundColor: backgroundColor,
+                    onPressed: widget.onDeletePressed != null
+                        ? (_) {
+                            widget.onDeletePressed?.call(channel);
+                          }
+                        : (_) async {
+                            final res = await showConfirmationDialog(
+                              context,
+                              title:
+                                  context.translations.deleteConversationLabel,
+                              question: context
+                                  .translations.deleteConversationQuestion,
+                              okText: context.translations.deleteLabel,
+                              cancelText: context.translations.cancelLabel,
+                              icon: StreamSvgIcon.delete(
+                                color: chatThemeData.colorTheme.accentError,
+                              ),
+                            );
+                            if (res == true) {
+                              await channel.delete();
+                            }
+                          },
+                    child: StreamSvgIcon.delete(
+                      color: chatThemeData.colorTheme.accentError,
+                    ),
+                  ),
+              ],
+        ),
         child: widget.channelPreviewBuilder?.call(context, channel) ??
             DecoratedBox(
               decoration: BoxDecoration(
diff --git a/packages/stream_chat_flutter/pubspec.yaml b/packages/stream_chat_flutter/pubspec.yaml
index 9b7690393..7305d74b5 100644
--- a/packages/stream_chat_flutter/pubspec.yaml
+++ b/packages/stream_chat_flutter/pubspec.yaml
@@ -22,7 +22,7 @@ dependencies:
     sdk: flutter
   flutter_markdown: ^0.6.1
   flutter_portal: ^0.4.0
-  flutter_slidable: ^0.6.0
+  flutter_slidable: ^1.2.0
   flutter_svg: ^1.0.1
   http_parser: ^4.0.0
   image_gallery_saver: ^1.7.0
diff --git a/packages/stream_chat_localizations/example/android/app/src/main/AndroidManifest.xml b/packages/stream_chat_localizations/example/android/app/src/main/AndroidManifest.xml
index 55ca830c3..9b3997fe8 100644
--- a/packages/stream_chat_localizations/example/android/app/src/main/AndroidManifest.xml
+++ b/packages/stream_chat_localizations/example/android/app/src/main/AndroidManifest.xml
@@ -6,7 +6,7 @@
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
     <application
-        android:name="io.flutter.app.FlutterApplication"
+        android:name="${applicationName}"
         android:label="example"
         android:icon="@mipmap/ic_launcher">
         <activity
diff --git a/packages/stream_chat_localizations/example/ios/Flutter/AppFrameworkInfo.plist b/packages/stream_chat_localizations/example/ios/Flutter/AppFrameworkInfo.plist
index 9367d483e..8d4492f97 100644
--- a/packages/stream_chat_localizations/example/ios/Flutter/AppFrameworkInfo.plist
+++ b/packages/stream_chat_localizations/example/ios/Flutter/AppFrameworkInfo.plist
@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>9.0</string>
 </dict>
 </plist>
diff --git a/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/project.pbxproj b/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/project.pbxproj
index 3ea4f8267..52fdc7407 100644
--- a/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/project.pbxproj
+++ b/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/project.pbxproj
@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 46;
+	objectVersion = 50;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -156,7 +156,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1020;
+				LastUpgradeCheck = 1300;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
diff --git a/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index a28140cfd..3db53b6e1 100644
--- a/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/packages/stream_chat_localizations/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1020"
+   LastUpgradeVersion = "1300"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
diff --git a/packages/stream_chat_localizations/example/pubspec.yaml b/packages/stream_chat_localizations/example/pubspec.yaml
index 9aaa23c68..db4476181 100644
--- a/packages/stream_chat_localizations/example/pubspec.yaml
+++ b/packages/stream_chat_localizations/example/pubspec.yaml
@@ -11,8 +11,15 @@ dependencies:
   cupertino_icons: ^1.0.3
   flutter:
     sdk: flutter
-  stream_chat_flutter: ^2.2.1
-  stream_chat_localizations: ^1.1.0
+  stream_chat_flutter:
+    path: ../../stream_chat_flutter
+  stream_chat_localizations: 
+    path: ../
+
+
+dependency_overrides: 
+  stream_chat_flutter: 
+    path: ../../stream_chat_flutter
 
 dev_dependencies:
   flutter_test:
diff --git a/packages/stream_chat_persistence/example/android/app/build.gradle b/packages/stream_chat_persistence/example/android/app/build.gradle
index 3932aa910..31d3553ba 100644
--- a/packages/stream_chat_persistence/example/android/app/build.gradle
+++ b/packages/stream_chat_persistence/example/android/app/build.gradle
@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 29
+    compileSdkVersion 31
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
diff --git a/packages/stream_chat_persistence/example/android/app/src/main/AndroidManifest.xml b/packages/stream_chat_persistence/example/android/app/src/main/AndroidManifest.xml
index 55ca830c3..9b3997fe8 100644
--- a/packages/stream_chat_persistence/example/android/app/src/main/AndroidManifest.xml
+++ b/packages/stream_chat_persistence/example/android/app/src/main/AndroidManifest.xml
@@ -6,7 +6,7 @@
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
     <application
-        android:name="io.flutter.app.FlutterApplication"
+        android:name="${applicationName}"
         android:label="example"
         android:icon="@mipmap/ic_launcher">
         <activity
diff --git a/packages/stream_chat_persistence/example/android/build.gradle b/packages/stream_chat_persistence/example/android/build.gradle
index 3100ad2d5..b4ef1adb4 100644
--- a/packages/stream_chat_persistence/example/android/build.gradle
+++ b/packages/stream_chat_persistence/example/android/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.6.0'
     repositories {
         google()
         jcenter()