GetStream · imtoori · May 3, 2022 · Nov 5, 2021 · Nov 8, 2021 · Nov 9, 2021
diff --git a/.github/workflows/stream_flutter_workflow.yml b/.github/workflows/stream_flutter_workflow.yml
@@ -35,7 +35,7 @@ jobs:
         run: |
           flutter pub global activate melos ${{ env.melos_version }}
       - name: "Bootstrap Workspace"
-        run: melos bootstrap
+        run: melos bootstrap --verbose
       - name: "Dart Analyze"
         run: |
           melos run analyze

diff --git a/README.md b/README.md
@@ -16,6 +16,10 @@ This repository contains code for our [Dart](https://dart.dev/) and [Flutter](ht
 
 Stream allows developers to rapidly deploy scalable feeds and chat messaging with an industry leading 99.999% uptime SLA guarantee.
 
+**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/)
+
 ## Sample apps and demos 
 Our team maintains a dedicated repository for fully-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/analysis_options.yaml b/analysis_options.yaml
@@ -91,7 +91,6 @@ linter:
     - prefer_constructors_over_static_methods
     - prefer_contains
     - prefer_equal_for_default_values
-    - prefer_expression_function_bodies
     - prefer_final_fields
     - prefer_final_in_for_each
     - prefer_final_locals

diff --git a/docusaurus/docs/Flutter/assets/slidable_demo.jpg b/docusaurus/docs/Flutter/assets/slidable_demo.jpg
diff --git a/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx b/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx
@@ -40,9 +40,9 @@ Scaffold(
         child: Column(
           children: [
            Expanded(
-             child: MessageListView(),
+             child: StreamMessageListView(),
            ),
-           MessageInput(),
+           StreamMessageInput(),
           ],
         ),
       ),
@@ -81,17 +81,18 @@ Stack(
       child: Column(
         children: const [
           Expanded(
-            child: MessageListViewTheme(
-              data: MessageListViewThemeData(
+            child: StreamMessageListViewTheme(
+              data: StreamMessageListViewThemeData(
                 backgroundColor: Colors.transparent,
               ),
-              child: MessageListView(),
+              child: StreamMessageListView(),
             ),
           ),
-          MessageInput(),
+          StreamMessageInput(),
         ],
       ),
     ),
   ],
 ),
-```
+```
+
diff --git a/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx b/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx
@@ -13,7 +13,7 @@ own types of attachments through the SDK such as location, audio, etc.
 
 This involves doing three things:
 
-1) Rendering the attachment thumbnail in the `MessageInput`
+1) Rendering the attachment thumbnail in the `StreamMessageInput`
 
 2) Sending a message with the custom attachment
 
@@ -27,7 +27,7 @@ Let's build an example of location sharing option in the app:
 
 ![](../assets/location_sharing_example.jpg)
 
-* Show a "Share Location" button next to MessageInput Textfield.
+* Show a "Share Location" button next to StreamMessageInput Textfield.
 
 * When the user presses this button, it should fetch the current location coordinates of the user, and send a message on the channel as follows:
 
@@ -53,14 +53,14 @@ Please check their [setup instructions](https://pub.dev/packages/geolocator) on
 NOTE: If you are testing on iOS simulator, you will need to set some dummy coordinates, as mentioned [here](https://stackoverflow.com/a/31238119/7489541).
 Also don't forget to enable "location update" capability in background mode, from XCode.
 
-On the receiver end, `location` type attachment should be rendered in map view, in the `MessageListView`.
+On the receiver end, `location` type attachment should be rendered in map view, in the `StreamMessageListView`.
 We are going to use [Google Static Maps API](https://developers.google.com/maps/documentation/maps-static/overview) to render the map in the message.
 You can use other libraries as well such as [google_maps_flutter](https://pub.dev/packages/google_maps_flutter).
 
 First, we add a button which when clicked fetches and shares location into the `MessageInput`:
 
 ```dart
-MessageInput(
+StreamMessageInput(
   actions: [
     InkWell(
       child: Icon(
@@ -146,10 +146,10 @@ Next, we build the Static Maps URL (Add your API key before using the code snipp
   }
 ```
 
-And then modify the `MessageListView` and tell it how to build a location attachment, using the `messageBuilder` property and copying the default message implementation overriding the `customAttachmentBuilders` property:
+And then modify the `StreamMessageListView` and tell it how to build a location attachment, using the `messageBuilder` property and copying the default message implementation overriding the `customAttachmentBuilders` property:
 
 ```dart
-MessageListView(
+StreamMessageListView(
   messageBuilder: (context, details, messages, defaultMessage) {
     return defaultMessage.copyWith(
         customAttachmentBuilders: {
@@ -179,15 +179,15 @@ To do this, we will:
 
 1) Add an attachment instead of sending a message
 
-2) Customize the `MessageInput`
+2) Customize the `StreamMessageInput`
 
 First, we add the attachment when the location button is clicked:
 
 ```dart
- GlobalKey<MessageInputState> _messageInputKey = GlobalKey();
+ StreamMessageInputController _messageInputController = StreamMessageInputController();
 
- MessageInput(
-   key: _messageInputKey,
+ StreamMessageInput(
+   messageInputController: _messageInputController,
    actions: [
      InkWell(
        child: Icon(
@@ -197,7 +197,7 @@ First, we add the attachment when the location button is clicked:
         ),
       onTap: () {
         _determinePosition().then((value) {
-           _messageInputKey.currentState.addAttachment(
+           _messageInputController.addAttachment(
               Attachment(
                 uploadState: UploadState.success(),
                 type: 'location',
@@ -219,8 +219,8 @@ First, we add the attachment when the location button is clicked:
 After this, we can build the thumbnail:
 
 ```dart
-MessageInput(
-  key: _messageInputKey,
+StreamMessageInput(
+  messageInputController: _messageInputController,
   actions: [
     InkWell(
       child: Icon(
@@ -230,7 +230,7 @@ MessageInput(
       ),
      onTap: () {
        _determinePosition().then((value) {
-         _messageInputKey.currentState.addAttachment(
+         _messageInputController.addAttachment(
            Attachment(
              uploadState: UploadState.success(),
              type: 'location',
@@ -259,6 +259,6 @@ MessageInput(
 ),
 ```
 
-And we can see the thumbnails in the MessageInput:
+And we can see the thumbnails in the StreamMessageInput:
 
 ![](../assets/location_sharing_example_message_thumbnail.jpg)
diff --git a/docusaurus/docs/Flutter/guides/customize_message_actions.mdx b/docusaurus/docs/Flutter/guides/customize_message_actions.mdx
@@ -38,10 +38,10 @@ Additionally, pinning a message requires you to add the roles which are allowed
 ### Partially remove some message actions
 
 For example, if you only want to keep "copy message" and "delete message",
-here is how to do it using the `messageBuilder` with our `MessageWidget`.
+here is how to do it using the `messageBuilder` with our `StreamMessageWidget`.
 
 ```dart
-MessageListView(
+StreamMessageListView(
   messageBuilder: (context, details, messages, defaultMessage) {
     return defaultMessage.copyWith(
         showFlagButton: false,
@@ -61,14 +61,14 @@ The SDK also allows you to add new actions into the dialog.
 
 For example, let's suppose you want to introduce a new message action - "Demo Action":
 
-We use the `customActions` parameter of the `MessageWidget` to add extra actions.
+We use the `customActions` parameter of the `StreamMessageWidget` to add extra actions.
 
 ```dart
-MessageListView(
+StreamMessageListView(
   messageBuilder: (context, details, messages, defaultMessage) {
     return defaultMessage.copyWith(
       customActions: [
-        MessageAction(
+        StreamMessageAction(
           leading: Icon(Icons.add),
           title: Text('Demo Action'),
           onTap: (message) {

diff --git a/docusaurus/docs/Flutter/guides/customize_message_widget.mdx b/docusaurus/docs/Flutter/guides/customize_message_widget.mdx
@@ -1,7 +1,7 @@
 ---
 id: customize_message_widget
 sidebar_position: 11
-title: Customizing The MessageWidget
+title: Customizing The StreamMessageWidget
 ---
 
 Customizing Text Messages
@@ -11,16 +11,16 @@ Customizing Text Messages
 Every application provides a unique look and feel to their own messaging interface including and not
 limited to fonts, colors, and shapes.
 
-This guide details how to customize the `MessageWidget` in the Stream Chat Flutter UI SDK.
+This guide details how to customize the `StreamMessageWidget` in the Stream Chat Flutter UI SDK.
 
 ### Building Custom Messages
 
-This guide goes into detail about the ability to customize the `MessageWidget`. However, if you want
-to customize the default `MessageWidget` in the `MessageListView` provided, you can use the `.copyWith()` method
-provided inside the `messageBuilder` parameter of the `MessageListView` like this:
+This guide goes into detail about the ability to customize the `StreamMessageWidget`. However, if you want
+to customize the default `StreamMessageWidget` in the `StreamMessageListView` provided, you can use the `.copyWith()` method
+provided inside the `messageBuilder` parameter of the `StreamMessageListView` like this:
 
 ```dart
-MessageListView(
+StreamMessageListView(
     messageBuilder: (context, details, messageList, defaultImpl) {
         // Your implementation of the message here
         // E.g: return Text(details.message.text ?? '');
@@ -30,8 +30,8 @@ MessageListView(
 
 ### Theming
 
-You can customize the `MessageWidget` using the `StreamChatTheme` class, so that you can change the
-message theme at the top instead of creating your own `MessageWidget` at the lower implementation level.
+You can customize the `StreamMessageWidget` using the `StreamChatTheme` class, so that you can change the
+message theme at the top instead of creating your own `StreamMessageWidget` at the lower implementation level.
 
 There are several things you can change in the theme including text styles and colors of various elements.
 
@@ -49,13 +49,13 @@ Here is an example:
 StreamChatThemeData(
 
   /// Sets theme for user's messages
-  ownMessageTheme: MessageThemeData(
+  ownMessageTheme: StreamMessageThemeData(
     messageBackgroundColor: colorTheme.textHighEmphasis,
   ),
 
   /// Sets theme for received messages
-  otherMessageTheme: MessageThemeData(
-    avatarTheme: AvatarThemeData(
+  otherMessageTheme: StreamMessageThemeData(
+    avatarTheme: StreamAvatarThemeData(
       borderRadius: BorderRadius.circular(8),
     ),
   ),
@@ -67,11 +67,11 @@ StreamChatThemeData(
 
 #### Change message text style
 
-The `MessageWidget` has multiple `Text` widgets that you can manipulate the styles of. The three main
+The `StreamMessageWidget` has multiple `Text` widgets that you can manipulate the styles of. The three main
 are the actual message text, user name, message links, and the message timestamp.
 
 ```dart
-MessageThemeData(
+StreamMessageThemeData(
   messageTextStyle: TextStyle(...),
   createdAtStyle: TextStyle(...),
   messageAuthorStyle: TextStyle(...),
@@ -86,8 +86,8 @@ MessageThemeData(
 You can change the attributes of the avatar (if displayed) using the `avatarTheme` property.
 
 ```dart
-MessageThemeData(
-    avatarTheme: AvatarThemeData(
+StreamMessageThemeData(
+    avatarTheme: StreamAvatarThemeData(
       borderRadius: BorderRadius.circular(8),
     ),
 )
@@ -100,7 +100,7 @@ MessageThemeData(
 You also customize the reactions attached to every message using the theme.
 
 ```dart
-MessageThemeData(
+StreamMessageThemeData(
   reactionsBackgroundColor: Colors.red,
   reactionsBorderColor: Colors.redAccent,
   reactionsMaskColor: Colors.pink,
@@ -111,12 +111,12 @@ MessageThemeData(
 
 ### Changing Message Actions
 
-When a message is long pressed, the `MessageActionsModal` is shown.
+When a message is long pressed, the `StreamMessageActionsModal` is shown.
 
-The `MessageWidget` allows showing or hiding some options if you so choose.
+The `StreamMessageWidget` allows showing or hiding some options if you so choose.
 
 ```dart
-MessageWidget(
+StreamMessageWidget(
     ...
     showUsername = true,
     showTimestamp = true,
@@ -137,11 +137,11 @@ MessageWidget(
 
 ### Building attachments
 
-The `customAttachmentBuilder` property allows you to build any kind of attachment (inbuilt or custom)
+The `customAttachmentBuilders` property allows you to build any kind of attachment (inbuilt or custom)
 in your own way. While a separate guide is written for this, it is included here because of relevance.
 
 ```dart
-MessageListView(
+StreamMessageListView(
   messageBuilder: (context, details, messages, defaultMessage) {
     return defaultMessage.copyWith(
         customAttachmentBuilders: {
@@ -163,7 +163,7 @@ MessageListView(
 
 ### Widget Builders
 
-Some parameters allow you to construct your own widget in place of some elements in the `MessageWidget`.
+Some parameters allow you to construct your own widget in place of some elements in the `StreamMessageWidget`.
 
 These are:
 * `userAvatarBuilder`  : Allows user to substitute their own widget in place of the user avatar.
@@ -173,7 +173,7 @@ These are:
 * `deletedBottomRowBuilder` : Allows user to substitute their own widget in the bottom of the message when deleted.
 
 ```dart
-MessageWidget(
+StreamMessageWidget(
     ...
     textBuilder: (context, message) {
         // Add your own text implementation here.