Merge pull request #561 from GetStream/feat/reverseMessageListView

feat(ui): reverse message list view

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,6 +1,6 @@
 ## Upcoming
 
-✅  Added
+✅ Added
 
 - Added `MessageListView.paginationLimit`
 - Allow the various ListView widgets to be themed via ThemeData classes

packages/stream_chat_flutter/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 30
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
@@ -41,7 +41,7 @@ android {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.example.example"
         minSdkVersion 21
-        targetSdkVersion 29
+        targetSdkVersion 30
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

packages/stream_chat_flutter/example/android/build.gradle

@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.5.20'
     repositories {
         google()
         jcenter()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.6.2'
+        classpath 'com.android.tools.build:gradle:4.2.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

packages/stream_chat_flutter/example/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -166,12 +166,20 @@ class MessageListView extends StatefulWidget {
     this.showFloatingDateDivider = true,
     this.threadSeparatorBuilder,
     this.messageListController,
+    this.reverse = true,
     this.paginationLimit = 20,
   }) : super(key: key);
 
   /// Function used to build a custom message widget
   final MessageBuilder? messageBuilder;
 
+  /// Whether the view scrolls in the reading direction.
+  ///
+  /// Defaults to true.
+  ///
+  /// See [ScrollView.reverse].
+  final bool reverse;
+
   /// Limit used during pagination
   final int paginationLimit;
 
@@ -450,7 +458,7 @@ class _MessageListViewState extends State<MessageListView> {
                   initialAlignment: initialAlignment ?? 0,
                   physics: widget.scrollPhysics,
                   itemScrollController: _scrollController,
-                  reverse: true,
+                  reverse: widget.reverse,
                   addAutomaticKeepAlives: false,
                   itemCount: itemCount,
 
@@ -626,7 +634,8 @@ class _MessageListViewState extends State<MessageListView> {
   }
 
   Positioned _buildFloatingDateDivider(int itemCount) => Positioned(
-        top: 20,
+        top: widget.reverse ? 20 : null,
+        bottom: widget.reverse ? null : 20,
         left: 0,
         right: 0,
         child: BetterStreamBuilder<Iterable<ItemPosition>>(
@@ -722,9 +731,13 @@ class _MessageListViewState extends State<MessageListView> {
                       );
                     }
                   },
-                  child: StreamSvgIcon.down(
+                  child: widget.reverse
-                    color: _streamTheme.colorTheme.textHighEmphasis,
+                      ? StreamSvgIcon.down(
-                  ),
+                          color: _streamTheme.colorTheme.textHighEmphasis,
+                        )
+                      : StreamSvgIcon.up(
+                          color: _streamTheme.colorTheme.textHighEmphasis,
+                        ),
                 ),
                 if (showUnreadCount)
                   Positioned(

packages/stream_chat_flutter/lib/src/stream_svg_icon.dart

@@ -37,6 +37,18 @@ class StreamSvgIcon extends StatelessWidget {
         height: size,
       );
 
+  /// [StreamSvgIcon] type
+  factory StreamSvgIcon.up({
+    double? size,
+    Color? color,
+  }) =>
+      StreamSvgIcon(
+        assetName: 'Icon_up.svg',
+        color: color,
+        width: size,
+        height: size,
+      );
+
   /// [StreamSvgIcon] type
   factory StreamSvgIcon.attach({
     double? size,

packages/stream_chat_flutter/lib/svgs/Icon_up.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(24, 24) rotate(-180)" d="M5.30605 8.30597C5.11052 8.50222 5.00073 8.76795 5.00073 9.04498C5.00073 9.322 5.11052 9.58774 5.30605 9.78398L11.2061 15.697C11.4321 15.923 11.7351 16.024 12.0291 16C12.17 16.0032 12.3102 15.9778 12.441 15.9252C12.5718 15.8726 12.6906 15.7939 12.7901 15.694L18.6941 9.78398C18.8898 9.58786 18.9998 9.32208 18.9998 9.04498C18.9998 8.76787 18.8898 8.50209 18.6941 8.30597C18.5972 8.20898 18.4821 8.13203 18.3555 8.07952C18.2289 8.02702 18.0931 8 17.9561 8C17.819 8 17.6832 8.02702 17.5566 8.07952C17.43 8.13203 17.3149 8.20898 17.2181 8.30597L11.9981 13.533L6.78005 8.30597C6.68327 8.20901 6.56831 8.13208 6.44176 8.07959C6.31521 8.0271 6.17956 8.00008 6.04255 8.00008C5.90555 8.00008 5.76989 8.0271 5.64334 8.07959C5.51679 8.13208 5.40184 8.20901 5.30505 8.30597H5.30605Z" fill="black"/>
+</svg>