add messsageinput button color customization options

GetStream · Feb 18, 2021 · 3d1bfc7 · 3d1bfc7
1 parent 0207b99
commit 3d1bfc7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/packages/stream_chat_flutter/lib/src/message_input.dart b/packages/stream_chat_flutter/lib/src/message_input.dart
@@ -1683,8 +1683,8 @@ class MessageInputState extends State<MessageInput> {
     return IconButton(
       icon: StreamSvgIcon.lightning(
         color: _commandsOverlay != null
-            ? StreamChatTheme.of(context).colorTheme.accentBlue
-            : StreamChatTheme.of(context).colorTheme.grey,
+            ? StreamChatTheme.of(context).channelTheme.actionButtonColor
+            : StreamChatTheme.of(context).channelTheme.actionButtonIdleColor,
       ),
       padding: const EdgeInsets.all(0),
       constraints: BoxConstraints.tightFor(
@@ -1721,8 +1721,8 @@ class MessageInputState extends State<MessageInput> {
     return IconButton(
       icon: StreamSvgIcon.attach(
         color: _openFilePickerSection
-            ? StreamChatTheme.of(context).colorTheme.accentBlue
-            : StreamChatTheme.of(context).colorTheme.grey,
+            ? StreamChatTheme.of(context).channelTheme.actionButtonColor
+            : StreamChatTheme.of(context).channelTheme.actionButtonIdleColor,
       ),
       padding: const EdgeInsets.all(0),
       constraints: BoxConstraints.tightFor(
@@ -1961,7 +1961,7 @@ class MessageInputState extends State<MessageInput> {
   Widget _buildIdleSendButton(BuildContext context) {
     return StreamSvgIcon(
       assetName: _getIdleSendIcon(),
-      color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
+      color: StreamChatTheme.of(context).channelTheme.sendButtonIdleColor,
     );
   }
 
@@ -1976,7 +1976,7 @@ class MessageInputState extends State<MessageInput> {
       ),
       icon: StreamSvgIcon(
         assetName: _getSendIcon(),
-        color: StreamChatTheme.of(context).colorTheme.accentBlue,
+        color: StreamChatTheme.of(context).channelTheme.sendButtonColor,
       ),
     );
   }

diff --git a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart
@@ -182,9 +182,10 @@ class StreamChatThemeData {
           ),
           indicatorIconSize: 16.0),
       channelTheme: ChannelTheme(
-        messageInputButtonIconTheme: IconThemeData(
-          color: accentColor,
-        ),
+        actionButtonColor: colorTheme.accentBlue,
+        actionButtonIdleColor: colorTheme.grey,
+        sendButtonColor: colorTheme.accentBlue,
+        sendButtonIdleColor: colorTheme.greyGainsboro,
         channelHeaderTheme: ChannelHeaderTheme(
           avatarTheme: AvatarTheme(
             borderRadius: BorderRadius.circular(20),
@@ -627,48 +628,59 @@ class ChannelTheme {
   /// Theme of the [ChannelHeader] widget
   final ChannelHeaderTheme channelHeaderTheme;
 
-  /// IconTheme of the send button in [MessageInput]
-  final IconThemeData messageInputButtonIconTheme;
+  /// Background color of [MessageInput] send button
+  final Color sendButtonColor;
+
+  /// Background color of [MessageInput] action buttons
+  final Color actionButtonColor;
+
+  /// Background color of [MessageInput] send button
+  final Color sendButtonIdleColor;
 
-  /// Theme of the send button in [MessageInput]
-  final ButtonThemeData messageInputButtonTheme;
+  /// Background color of [MessageInput] action buttons
+  final Color actionButtonIdleColor;
 
   /// Background color of [MessageInput]
   final Color inputBackground;
 
   ChannelTheme({
     this.channelHeaderTheme,
-    this.messageInputButtonIconTheme,
-    this.messageInputButtonTheme,
+    this.actionButtonColor,
+    this.sendButtonColor,
+    this.actionButtonIdleColor,
+    this.sendButtonIdleColor,
     this.inputBackground,
   });
 
   /// Creates a copy of [ChannelTheme] with specified attributes overridden.
   ChannelTheme copyWith({
     ChannelHeaderTheme channelHeaderTheme,
-    IconThemeData messageInputButtonIconTheme,
-    ButtonThemeData messageInputButtonTheme,
     Color inputBackground,
+    Color actionButtonColor,
+    Color sendButtonColor,
+    Color actionButtonIdleColor,
+    Color sendButtonIdleColor,
   }) =>
       ChannelTheme(
         channelHeaderTheme: channelHeaderTheme ?? this.channelHeaderTheme,
-        messageInputButtonIconTheme:
-            messageInputButtonIconTheme ?? this.messageInputButtonIconTheme,
-        messageInputButtonTheme:
-            messageInputButtonTheme ?? this.messageInputButtonTheme,
         inputBackground: inputBackground ?? this.inputBackground,
+        actionButtonColor: actionButtonColor ?? this.actionButtonColor,
+        sendButtonColor: sendButtonColor ?? this.sendButtonColor,
+        actionButtonIdleColor:
+            actionButtonIdleColor ?? this.actionButtonIdleColor,
+        sendButtonIdleColor: sendButtonIdleColor ?? this.sendButtonIdleColor,
       );
 
   ChannelTheme merge(ChannelTheme other) {
     if (other == null) return this;
     return copyWith(
       channelHeaderTheme: channelHeaderTheme?.merge(other.channelHeaderTheme) ??
           other.channelHeaderTheme,
-      messageInputButtonIconTheme: messageInputButtonIconTheme
-              ?.merge(other.messageInputButtonIconTheme) ??
-          other.messageInputButtonIconTheme,
-      messageInputButtonTheme: other.messageInputButtonTheme,
       inputBackground: other.inputBackground,
+      actionButtonColor: other.actionButtonColor,
+      actionButtonIdleColor: other.actionButtonIdleColor,
+      sendButtonColor: other.sendButtonColor,
+      sendButtonIdleColor: other.sendButtonIdleColor,
     );
   }
 }