Merge pull request #879 from GetStream/mip-customization

feat(ui): Mip customization

packages/stream_chat_flutter/CHANGELOG.md

@@ -14,6 +14,7 @@
 ✅ Added
 
 - Videos can now be auto-played in `FullScreenMedia`
+- Extra customisation options for `MessageInput`
 
 🔄 Changed
 

packages/stream_chat_flutter/lib/src/message_input/message_input.dart

@@ -13,6 +13,7 @@ import 'package:stream_chat_flutter/src/commands_overlay.dart';
 import 'package:stream_chat_flutter/src/emoji/emoji.dart';
 import 'package:stream_chat_flutter/src/emoji_overlay.dart';
 import 'package:stream_chat_flutter/src/extension.dart';
+import 'package:stream_chat_flutter/src/message_input/simple_safe_area.dart';
 import 'package:stream_chat_flutter/src/message_input/tld.dart';
 import 'package:stream_chat_flutter/src/multi_overlay.dart';
 import 'package:stream_chat_flutter/src/quoted_message_widget.dart';
@@ -215,6 +216,9 @@ class MessageInput extends StatefulWidget {
     this.shouldKeepFocusAfterMessage,
     this.validator = _defaultValidator,
     this.restorationId,
+    this.enableSafeArea,
+    this.elevation,
+    this.shadow,
   }) : super(key: key);
 
   /// List of options for showing overlays.
@@ -331,6 +335,15 @@ class MessageInput extends StatefulWidget {
   /// Restoration ID to save and restore the state of the MessageInput.
   final String? restorationId;
 
+  /// Wrap [MessageInput] with a [SafeArea widget]
+  final bool? enableSafeArea;
+
+  /// Elevation of the [MessageInput]
+  final double? elevation;
+
+  /// Shadow for the [MessageInput] widget
+  final BoxShadow? shadow;
+
   static bool _defaultValidator(Message message) =>
       message.text?.isNotEmpty == true || message.attachments.isNotEmpty;
 
@@ -495,8 +508,16 @@ class MessageInputState extends State<MessageInput>
         Widget child = DecoratedBox(
           decoration: BoxDecoration(
             color: _messageInputTheme.inputBackgroundColor,
+            boxShadow: widget.shadow == null
+                ? (_streamChatTheme.messageInputTheme.shadow == null
+                    ? []
+                    : [_streamChatTheme.messageInputTheme.shadow!])
+                : [widget.shadow!],
           ),
-          child: SafeArea(
+          child: SimpleSafeArea(
+            enabled: widget.enableSafeArea ??
+                _streamChatTheme.messageInputTheme.enableSafeArea ??
+                true,
             child: GestureDetector(
               onPanUpdate: (details) {
                 if (details.delta.dy > 0) {
@@ -568,7 +589,9 @@ class MessageInputState extends State<MessageInput>
         );
         if (!_isEditing) {
           child = Material(
-            elevation: 8,
+            elevation: widget.elevation ??
+                _streamChatTheme.messageInputTheme.elevation ??
+                8,
             child: child,
           );
         }

packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+/// A [SafeArea] with an enabled toggle
+class SimpleSafeArea extends StatefulWidget {
+  /// Constructor for [SimpleSafeArea]
+  const SimpleSafeArea({
+    Key? key,
+    this.enabled = true,
+    required this.child,
+  }) : super(key: key);
+
+  /// Wrap [child] with [SafeArea]
+  final bool enabled;
+
+  /// Child widget to wrap
+  final Widget child;
+
+  @override
+  _SimpleSafeAreaState createState() => _SimpleSafeAreaState();
+}
+
+class _SimpleSafeAreaState extends State<SimpleSafeArea> {
+  @override
+  Widget build(BuildContext context) => SafeArea(
+        left: widget.enabled,
+        top: widget.enabled,
+        right: widget.enabled,
+        bottom: widget.enabled,
+        child: widget.child,
+      );
+}

packages/stream_chat_flutter/lib/src/theme/message_input_theme.dart

@@ -66,6 +66,9 @@ class MessageInputThemeData with Diagnosticable {
     this.borderRadius,
     this.expandButtonColor,
     this.linkHighlightColor,
+    this.enableSafeArea,
+    this.elevation,
+    this.shadow,
   });
 
   /// Duration of the [MessageInput] send button animation
@@ -107,6 +110,15 @@ class MessageInputThemeData with Diagnosticable {
   /// Border radius of [MessageInput]
   final BorderRadius? borderRadius;
 
+  /// Wrap [MessageInput] with a [SafeArea widget]
+  final bool? enableSafeArea;
+
+  /// Elevation of the [MessageInput]
+  final double? elevation;
+
+  /// Shadow for the [MessageInput] widget
+  final BoxShadow? shadow;
+
   /// Returns a new [MessageInputThemeData] replacing some of its properties
   MessageInputThemeData copyWith({
     Duration? sendAnimationDuration,
@@ -122,6 +134,9 @@ class MessageInputThemeData with Diagnosticable {
     Gradient? activeBorderGradient,
     Gradient? idleBorderGradient,
     BorderRadius? borderRadius,
+    bool? enableSafeArea,
+    double? elevation,
+    BoxShadow? shadow,
   }) =>
       MessageInputThemeData(
         sendAnimationDuration:
@@ -139,6 +154,9 @@ class MessageInputThemeData with Diagnosticable {
         idleBorderGradient: idleBorderGradient ?? this.idleBorderGradient,
         borderRadius: borderRadius ?? this.borderRadius,
         linkHighlightColor: linkHighlightColor ?? this.linkHighlightColor,
+        enableSafeArea: enableSafeArea ?? this.enableSafeArea,
+        elevation: elevation ?? this.elevation,
+        shadow: shadow ?? this.shadow,
       );
 
   /// Linearly interpolate from one [MessageInputThemeData] to another.
@@ -169,6 +187,9 @@ class MessageInputThemeData with Diagnosticable {
         inputDecoration: a.inputDecoration,
         linkHighlightColor:
             Color.lerp(a.linkHighlightColor, b.linkHighlightColor, t),
+        enableSafeArea: a.enableSafeArea,
+        elevation: Tween(begin: a.elevation, end: b.elevation).transform(t),
+        shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
       );
 
   /// Merges [this] [MessageInputThemeData] with the [other]
@@ -190,6 +211,9 @@ class MessageInputThemeData with Diagnosticable {
       borderRadius: other.borderRadius,
       expandButtonColor: other.expandButtonColor,
       linkHighlightColor: other.linkHighlightColor,
+      enableSafeArea: other.enableSafeArea,
+      elevation: other.elevation,
+      shadow: other.shadow,
     );
   }
 
@@ -210,7 +234,10 @@ class MessageInputThemeData with Diagnosticable {
           idleBorderGradient == other.idleBorderGradient &&
           activeBorderGradient == other.activeBorderGradient &&
           borderRadius == other.borderRadius &&
-          linkHighlightColor == other.linkHighlightColor;
+          linkHighlightColor == other.linkHighlightColor &&
+          enableSafeArea == other.enableSafeArea &&
+          elevation == other.elevation &&
+          shadow == other.shadow;
 
   @override
   int get hashCode =>
@@ -226,7 +253,10 @@ class MessageInputThemeData with Diagnosticable {
       idleBorderGradient.hashCode ^
       activeBorderGradient.hashCode ^
       borderRadius.hashCode ^
-      linkHighlightColor.hashCode;
+      linkHighlightColor.hashCode ^
+      elevation.hashCode ^
+      shadow.hashCode ^
+      enableSafeArea.hashCode;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -244,6 +274,9 @@ class MessageInputThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('idleBorderGradient', idleBorderGradient))
       ..add(DiagnosticsProperty('borderRadius', borderRadius))
       ..add(ColorProperty('expandButtonColor', expandButtonColor))
-      ..add(ColorProperty('linkHighlightColor', linkHighlightColor));
+      ..add(ColorProperty('linkHighlightColor', linkHighlightColor))
+      ..add(DiagnosticsProperty('elevation', elevation))
+      ..add(DiagnosticsProperty('shadow', shadow))
+      ..add(DiagnosticsProperty('enableSafeArea', enableSafeArea));
   }
 }