From 5dc389783c99746eff7129fcad29ab4624f8521e Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Fri, 28 Jan 2022 16:38:19 +0530 Subject: [PATCH 1/4] added properties --- .../lib/src/message_input/message_input.dart | 27 ++++++++++++- .../src/message_input/simple_safe_area.dart | 26 +++++++++++++ .../lib/src/theme/message_input_theme.dart | 39 +++++++++++++++++-- 3 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart diff --git a/packages/stream_chat_flutter/lib/src/message_input/message_input.dart b/packages/stream_chat_flutter/lib/src/message_input/message_input.dart index 816a4aec..1470856a 100644 --- a/packages/stream_chat_flutter/lib/src/message_input/message_input.dart +++ b/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 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 ); if (!_isEditing) { child = Material( - elevation: 8, + elevation: widget.elevation ?? + _streamChatTheme.messageInputTheme.elevation ?? + 8, child: child, ); } diff --git a/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart b/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart new file mode 100644 index 00000000..3ae3c122 --- /dev/null +++ b/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart @@ -0,0 +1,26 @@ +import 'package:flutter/material.dart'; + +class SimpleSafeArea extends StatefulWidget { + final bool enabled; + final Widget child; + + const SimpleSafeArea({ + Key? key, + this.enabled = true, + required this.child, + }) : super(key: key); + + @override + _SimpleSafeAreaState createState() => _SimpleSafeAreaState(); +} + +class _SimpleSafeAreaState extends State { + @override + Widget build(BuildContext context) => SafeArea( + left: widget.enabled, + top: widget.enabled, + right: widget.enabled, + bottom: widget.enabled, + child: widget.child, + ); +} diff --git a/packages/stream_chat_flutter/lib/src/theme/message_input_theme.dart b/packages/stream_chat_flutter/lib/src/theme/message_input_theme.dart index 1348af37..9bc8ffd2 100644 --- a/packages/stream_chat_flutter/lib/src/theme/message_input_theme.dart +++ b/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)); } } From 9edf02588ddfc4a8b27f149ce1c3385279164b0c Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Fri, 28 Jan 2022 16:39:57 +0530 Subject: [PATCH 2/4] docs --- .../lib/src/message_input/simple_safe_area.dart | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart b/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart index 3ae3c122..c047ec58 100644 --- a/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart +++ b/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart @@ -1,15 +1,17 @@ import 'package:flutter/material.dart'; +/// A [SafeArea] with an enabled toggle class SimpleSafeArea extends StatefulWidget { - final bool enabled; - final Widget child; - + /// Constructor for [SimpleSafeArea] const SimpleSafeArea({ Key? key, this.enabled = true, required this.child, }) : super(key: key); + final bool enabled; + final Widget child; + @override _SimpleSafeAreaState createState() => _SimpleSafeAreaState(); } From 675d33281609be8a91049b45c76b8ee31a7b1f1f Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Fri, 28 Jan 2022 16:40:37 +0530 Subject: [PATCH 3/4] docs --- .../lib/src/message_input/simple_safe_area.dart | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart b/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart index c047ec58..b91684ed 100644 --- a/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart +++ b/packages/stream_chat_flutter/lib/src/message_input/simple_safe_area.dart @@ -9,7 +9,10 @@ class SimpleSafeArea extends StatefulWidget { required this.child, }) : super(key: key); + /// Wrap [child] with [SafeArea] final bool enabled; + + /// Child widget to wrap final Widget child; @override From 0524d171f41232a35d6766187735920f9af6521f Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Fri, 28 Jan 2022 16:42:19 +0530 Subject: [PATCH 4/4] changelog --- packages/stream_chat_flutter/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index 67a45ddc..6ecc7e60 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/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