fix(repo): make stable version compatible with latest flutter versions (

#1870)
GetStream · Mar 6, 2024 · 590b6f0 · 590b6f0
1 parent 226933c
commit 590b6f0
Show file tree

Hide file tree

Showing 33 changed files with 329 additions and 162 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,26 @@ Stream allows developers to rapidly deploy scalable feeds and chat messaging wit
 
 **V4 Migration Guide**
 
-For upgrading from V3 to V4, please refer to the [V4 Migration Guide](https://getstream.io/chat/docs/sdk/flutter/guides/migration_guide_4_0/)
+> [!WARNING]
+> Flutter `> = v3.16.x` uses material 3 by default which breaks the UI of some of the components.
+> If you want to use these versions, you need to set the `useMaterial3` parameter to `false` 
+> in the `ThemeData`.
+>
+> eg.
+>
+> ```dart
+> MaterialApp(
+>   theme: ThemeData(
+>     useMaterial3: false,
+>   ),
+>   ...
+> );
+> ```
+> 
+> `StreamChat` widget overrides the `useMaterial3` parameter to `false` by default 
+> so if you are using `StreamChat` widget, you **don't** need to set it manually.
+
+For upgrading from V6 to V7, please refer to the [V4 Migration Guide](https://getstream.io/chat/docs/sdk/flutter/guides/migration_guide_7_0/)
 
 ## Sample apps and demos 
 Our team maintains a dedicated repository for full fledged sample applications and demos. Consider checking out [GetStream/flutter-samples](https://github.com/GetStream/flutter-samples) to learn more or get started by looking at our latest [Stream Chat demo](https://github.com/GetStream/flutter-samples/tree/main/packages/stream_chat_v1). 

diff --git a/docusaurus/docs/Flutter/02-stream_chat_flutter/stream_chat_and_theming.mdx b/docusaurus/docs/Flutter/02-stream_chat_flutter/stream_chat_and_theming.mdx
@@ -18,6 +18,23 @@ Similar to the `Theme` and `ThemeData` in Flutter, Stream Chat uses a top level
 
 If you'd like to customize the look and feel of Stream chat across your entire application, we recommend setting your theme at the top level. Conversely, users can customize specific screens or widgets by wrapping components in a `StreamChatTheme`.
 
+### A note on Material 3
+
+Material 3 is a new design system from Google that Flutter versions >= 3.16.0 are using by default. Stream Chat SDK is using Material 2 by default. If you are using an older version of Flutter, you should be fine, but if you are using a newer version of Flutter, you should know that all components that are lower than `StreamChat` widget will only use Material 2.
+
+If you are using Material 3 in your app, keep in mind that any widget under StreamChat will use Material 2 by default. You can change it by providing useMaterial3: true to StreamChat widget.
+
+```dart
+StreamChat(
+  client: client,
+  useMaterial3: true,
+  child: child,
+)
+```
+
+> [!WARNING]
+> If you set `useMaterial3` to `true`, all components that are lower than `StreamChat` widget will use Material 3 which is **not supported** by our widgets yet.
+
 ### A closer look at StreamChatThemeData 
 
 Looking at the constructor for `StreamChatThemeData`, we can see the full list of properties and widgets available for customization.

diff --git a/packages/stream_chat_flutter/lib/src/bottom_sheets/stream_channel_info_bottom_sheet.dart b/packages/stream_chat_flutter/lib/src/bottom_sheets/stream_channel_info_bottom_sheet.dart
@@ -321,7 +321,7 @@ Future<T?> showChannelInfoModalBottomSheet<T>({
 ///    sheet.
 ///  * [Scaffold.of], for information about how to obtain the [BuildContext].
 ///  * <https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet>
-PersistentBottomSheetController<T> showChannelInfoBottomSheet<T>({
+PersistentBottomSheetController showChannelInfoBottomSheet<T>({
   required BuildContext context,
   required Channel channel,
   Color? backgroundColor,
@@ -336,7 +336,7 @@ PersistentBottomSheetController<T> showChannelInfoBottomSheet<T>({
   VoidCallback? onDeleteConversationTap,
   VoidCallback? onCancelTap,
 }) =>
-    showBottomSheet<T>(
+    showBottomSheet(
       context: context,
       backgroundColor: backgroundColor,
       elevation: elevation,

diff --git a/packages/stream_chat_flutter/lib/src/stream_chat.dart b/packages/stream_chat_flutter/lib/src/stream_chat.dart
@@ -39,6 +39,7 @@ class StreamChat extends StatefulWidget {
     this.onBackgroundEventReceived,
     this.backgroundKeepAlive = const Duration(minutes: 1),
     this.connectivityStream,
+    this.useMaterial3 = false,
   });
 
   /// Client to do chat operations with
@@ -67,6 +68,10 @@ class StreamChat extends StatefulWidget {
   @visibleForTesting
   final Stream<ConnectivityResult>? connectivityStream;
 
+  /// Whether to use material 3 or not (default is false)
+  /// See our [docs](https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter/stream_chat_and_theming)
+  final bool useMaterial3;
+
   @override
   StreamChatState createState() => StreamChatState();
 
@@ -107,40 +112,45 @@ class StreamChatState extends State<StreamChat> {
   @override
   Widget build(BuildContext context) {
     final theme = _getTheme(context, widget.streamChatThemeData);
-    return Portal(
-      child: StreamChatConfiguration(
-        data: streamChatConfigData,
-        child: StreamChatTheme(
-          data: theme,
-          child: Builder(
-            builder: (context) {
-              final materialTheme = Theme.of(context);
-              final streamTheme = StreamChatTheme.of(context);
-              return Theme(
-                data: materialTheme.copyWith(
-                  primaryIconTheme: streamTheme.primaryIconTheme,
-                  colorScheme: materialTheme.colorScheme.copyWith(
-                    secondary: streamTheme.colorTheme.accentPrimary,
+    return Theme(
+      data: Theme.of(context).copyWith(
+        useMaterial3: widget.useMaterial3,
+      ),
+      child: Portal(
+        child: StreamChatConfiguration(
+          data: streamChatConfigData,
+          child: StreamChatTheme(
+            data: theme,
+            child: Builder(
+              builder: (context) {
+                final materialTheme = Theme.of(context);
+                final streamTheme = StreamChatTheme.of(context);
+                return Theme(
+                  data: materialTheme.copyWith(
+                    primaryIconTheme: streamTheme.primaryIconTheme,
+                    colorScheme: materialTheme.colorScheme.copyWith(
+                      secondary: streamTheme.colorTheme.accentPrimary,
+                    ),
                   ),
-                ),
-                child: StreamChatCore(
-                  client: client,
-                  onBackgroundEventReceived: widget.onBackgroundEventReceived,
-                  backgroundKeepAlive: widget.backgroundKeepAlive,
-                  connectivityStream: widget.connectivityStream,
-                  child: Builder(
-                    builder: (context) {
-                      StreamChatClient.additionalHeaders = {
-                        'X-Stream-Client':
-                            '${StreamChatClient.defaultUserAgent}-'
-                                'ui-${StreamChatClient.packageVersion}',
-                      };
-                      return widget.child ?? const Offstage();
-                    },
+                  child: StreamChatCore(
+                    client: client,
+                    onBackgroundEventReceived: widget.onBackgroundEventReceived,
+                    backgroundKeepAlive: widget.backgroundKeepAlive,
+                    connectivityStream: widget.connectivityStream,
+                    child: Builder(
+                      builder: (context) {
+                        StreamChatClient.additionalHeaders = {
+                          'X-Stream-Client':
+                              '${StreamChatClient.defaultUserAgent}-'
+                                  'ui-${StreamChatClient.packageVersion}',
+                        };
+                        return widget.child ?? const Offstage();
+                      },
+                    ),
                   ),
-                ),
-              );
-            },
+                );
+              },
+            ),
           ),
         ),
       ),

diff --git a/packages/stream_chat_flutter/test/src/avatars/gradient_avatar_test.dart b/packages/stream_chat_flutter/test/src/avatars/gradient_avatar_test.dart
@@ -4,6 +4,7 @@ import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -42,8 +43,8 @@ void main() {
     'golden test for the name "demo user"',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
+        MaterialAppWrapper(
+          home: const Scaffold(
             body: Center(
               child: SizedBox(
                 width: 100,
@@ -64,8 +65,8 @@ void main() {
     'golden test for the name "demo"',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
+        MaterialAppWrapper(
+          home: const Scaffold(
             body: Center(
               child: SizedBox(
                 width: 100,
@@ -85,8 +86,8 @@ void main() {
     'control special character test',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
+        MaterialAppWrapper(
+          home: const Scaffold(
             body: Center(
               child: SizedBox(
                 width: 100,
@@ -109,8 +110,8 @@ void main() {
     'control special character test 2',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
+        MaterialAppWrapper(
+          home: const Scaffold(
             body: Center(
               child: SizedBox(
                 width: 100,

diff --git a/packages/stream_chat_flutter/test/src/avatars/group_avatar_test.dart b/packages/stream_chat_flutter/test/src/avatars/group_avatar_test.dart
@@ -5,6 +5,7 @@ import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -95,7 +96,7 @@ void main() {
     'golden test for the group with "user123" and "user456"',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        MaterialApp(
+        MaterialAppWrapper(
           home: StreamChat(
             client: client,
             streamChatThemeData: StreamChatThemeData.light(),

diff --git a/packages/stream_chat_flutter/test/src/avatars/user_avatar_test.dart b/packages/stream_chat_flutter/test/src/avatars/user_avatar_test.dart
@@ -4,6 +4,7 @@ import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -49,7 +50,7 @@ void main() {
     (WidgetTester tester) async {
       when(() => user.online).thenReturn(true);
       await tester.pumpWidget(
-        MaterialApp(
+        MaterialAppWrapper(
           builder: (context, child) {
             return StreamChatConfiguration(
               data: StreamChatConfigurationData(),
@@ -82,7 +83,7 @@ void main() {
     (WidgetTester tester) async {
       when(() => user.online).thenReturn(false);
       await tester.pumpWidget(
-        MaterialApp(
+        MaterialAppWrapper(
           builder: (context, child) {
             return StreamChatConfiguration(
               data: StreamChatConfigurationData(),

diff --git a/packages/stream_chat_flutter/test/src/bottom_sheets/attachment_modal_sheet_test.dart b/packages/stream_chat_flutter/test/src/bottom_sheets/attachment_modal_sheet_test.dart
@@ -3,6 +3,8 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
+
 void main() {
   group('AttachmentModalSheet tests', () {
     testWidgets('Appears on tap', (tester) async {
@@ -117,7 +119,7 @@ void main() {
       'golden test for AttachmentModalSheet',
       (WidgetTester tester) async {
         await tester.pumpWidget(
-          MaterialApp(
+          MaterialAppWrapper(
             home: Scaffold(
               body: Builder(builder: (context) {
                 return Center(

diff --git a/packages/stream_chat_flutter/test/src/bottom_sheets/edit_message_sheet_test.dart b/packages/stream_chat_flutter/test/src/bottom_sheets/edit_message_sheet_test.dart
@@ -4,6 +4,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -71,7 +72,7 @@ void main() {
       'golden test for EditMessageSheet',
       (WidgetTester tester) async {
         await tester.pumpWidget(
-          MaterialApp(
+          MaterialAppWrapper(
             builder: (context, child) => StreamChat(
               client: MockClient(),
               child: child,

diff --git a/packages/stream_chat_flutter/test/src/bottom_sheets/error_alert_sheet_test.dart b/packages/stream_chat_flutter/test/src/bottom_sheets/error_alert_sheet_test.dart
@@ -4,6 +4,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -77,7 +78,7 @@ void main() {
       'golden test for ErrorAlertSheet',
       (WidgetTester tester) async {
         await tester.pumpWidget(
-          MaterialApp(
+          MaterialAppWrapper(
             builder: (context, child) => StreamChat(
               client: MockClient(),
               child: child,

diff --git a/packages/stream_chat_flutter/test/src/channel/channel_header_test.dart b/packages/stream_chat_flutter/test/src/channel/channel_header_test.dart
@@ -3,6 +3,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -273,7 +274,7 @@ void main() {
           .thenAnswer((i) => Stream.value(1));
 
       await tester.pumpWidget(
-        MaterialApp(
+        MaterialAppWrapper(
           home: StreamChat(
             client: client,
             child: StreamChannel(

diff --git a/packages/stream_chat_flutter/test/src/context_menu_items/download_menu_item_test.dart b/packages/stream_chat_flutter/test/src/context_menu_items/download_menu_item_test.dart
@@ -4,6 +4,7 @@ import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:stream_chat_flutter/src/context_menu_items/download_menu_item.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -31,7 +32,7 @@ void main() {
     'golden test for DownloadMenuItem',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        MaterialApp(
+        MaterialAppWrapper(
           builder: (context, child) => StreamChatTheme(
             data: StreamChatThemeData.light(),
             child: child!,

diff --git a/...s/stream_chat_flutter/test/src/context_menu_items/stream_chat_context_menu_item_test.dart b/...s/stream_chat_flutter/test/src/context_menu_items/stream_chat_context_menu_item_test.dart
@@ -4,6 +4,7 @@ import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:stream_chat_flutter/src/context_menu_items/stream_chat_context_menu_item.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
 import '../mocks.dart';
 
 void main() {
@@ -29,7 +30,7 @@ void main() {
     'golden test for StreamChatContextMenuItem',
     (WidgetTester tester) async {
       await tester.pumpWidget(
-        MaterialApp(
+        MaterialAppWrapper(
           builder: (context, child) => StreamChatTheme(
             data: StreamChatThemeData.light(),
             child: child!,

diff --git a/packages/stream_chat_flutter/test/src/dialogs/confirmation_dialog_test.dart b/packages/stream_chat_flutter/test/src/dialogs/confirmation_dialog_test.dart
@@ -4,6 +4,8 @@ import 'package:golden_toolkit/golden_toolkit.dart';
 import 'package:stream_chat_flutter/src/dialogs/confirmation_dialog.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import '../material_app_wrapper.dart';
+
 void main() {
   testWidgets('ChannelInfoDialog shows info and members', (tester) async {
     await tester.pumpWidget(
@@ -38,7 +40,7 @@ void main() {
 
   testGoldens('golden test for ConfirmationDialog', (tester) async {
     await tester.pumpWidget(
-      MaterialApp(
+      MaterialAppWrapper(
         home: Scaffold(
           body: Builder(
             builder: (context) {