fix(ui): fix message input send button not customisable (#2143)

* fix(ui): fix message input send button not customizable

* chore: update CHANGELOG.md

* chore: remove unused var

Author: xsahil03x

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,8 @@
+## Upcoming
+
+- [[#2118]](https://github.com/GetStream/stream-chat-flutter/issues/2118) Fixed message input
+  buttons not being able to customized.
+
 ## 9.5.0
 
 🐞 Fixed

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

@@ -16,14 +16,17 @@ class StreamCountdownButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        shape: BoxShape.circle,
-        color: StreamChatTheme.of(context).colorTheme.disabled,
-      ),
-      child: SizedBox.square(
-        dimension: kDefaultMessageInputIconSize,
-        child: Center(child: Text('$count')),
+    return Padding(
+      padding: const EdgeInsets.all(kDefaultMessageInputIconPadding),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          color: StreamChatTheme.of(context).colorTheme.disabled,
+        ),
+        child: SizedBox.square(
+          dimension: kDefaultMessageInputIconSize,
+          child: Center(child: Text('$count')),
+        ),
       ),
     );
   }

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

@@ -4,7 +4,6 @@ import 'dart:math';
 import 'package:desktop_drop/desktop_drop.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:photo_manager/photo_manager.dart';
 import 'package:stream_chat_flutter/platform_widget_builder/src/platform_widget_builder.dart';
 import 'package:stream_chat_flutter/src/message_input/attachment_button.dart';
 import 'package:stream_chat_flutter/src/message_input/command_button.dart';
@@ -125,8 +124,10 @@ class StreamMessageInput extends StatefulWidget {
     this.hideSendAsDm = false,
     this.enableVoiceRecording = false,
     this.sendVoiceRecordingAutomatically = false,
-    this.idleSendButton,
-    this.activeSendButton,
+    Widget? idleSendIcon,
+    @Deprecated("Use 'idleSendIcon' instead") Widget? idleSendButton,
+    Widget? activeSendIcon,
+    @Deprecated("Use 'activeSendIcon' instead") Widget? activeSendButton,
     this.showCommandsButton = true,
     this.userMentionsTileBuilder,
     this.maxAttachmentSize = kDefaultMaxAttachmentSize,
@@ -164,7 +165,17 @@ class StreamMessageInput extends StatefulWidget {
     )
     bool useNativeAttachmentPickerOnMobile = false,
     this.pollConfig,
-  }) : useSystemAttachmentPicker = useSystemAttachmentPicker || //
+  })  : assert(
+          idleSendIcon == null || idleSendButton == null,
+          'idleSendIcon and idleSendButton cannot be used together',
+        ),
+        idleSendIcon = idleSendIcon ?? idleSendButton,
+        assert(
+          activeSendIcon == null || activeSendButton == null,
+          'activeSendIcon and activeSendButton cannot be used together',
+        ),
+        activeSendIcon = activeSendIcon ?? activeSendButton,
+        useSystemAttachmentPicker = useSystemAttachmentPicker || //
             useNativeAttachmentPickerOnMobile;
 
   /// The predicate used to send a message on desktop/web
@@ -292,10 +303,18 @@ class StreamMessageInput extends StatefulWidget {
   final bool autofocus;
 
   /// Send button widget in an idle state
-  final Widget? idleSendButton;
+  final Widget? idleSendIcon;
+
+  /// Send button widget in an idle state
+  @Deprecated("Use 'idleSendIcon' instead")
+  Widget? get idleSendButton => idleSendIcon;
 
   /// Send button widget in an active state
-  final Widget? activeSendButton;
+  final Widget? activeSendIcon;
+
+  /// Send button widget in an active state
+  @Deprecated("Use 'activeSendIcon' instead")
+  Widget? get activeSendButton => activeSendIcon;
 
   /// Customize the tile for the mentions overlay.
   final UserMentionTileBuilder? userMentionsTileBuilder;
@@ -470,7 +489,7 @@ class StreamMessageInput extends StatefulWidget {
 
 /// State of [StreamMessageInput]
 class StreamMessageInputState extends State<StreamMessageInput>
-    with RestorationMixin<StreamMessageInput>, WidgetsBindingObserver {
+    with RestorationMixin<StreamMessageInput> {
   bool get _commandEnabled => _effectiveController.message.command != null;
 
   bool _actionsShrunk = false;
@@ -514,7 +533,6 @@ class StreamMessageInputState extends State<StreamMessageInput>
   @override
   void initState() {
     super.initState();
-    WidgetsBinding.instance.addObserver(this);
     if (widget.messageInputController == null) {
       _createLocalController();
     } else {
@@ -544,29 +562,6 @@ class StreamMessageInputState extends State<StreamMessageInput>
     super.didChangeDependencies();
   }
 
-  bool _askingForPermission = false;
-
-  @override
-  void didChangeAppLifecycleState(AppLifecycleState state) async {
-    if (state == AppLifecycleState.resumed &&
-        _permissionState != null &&
-        !_askingForPermission) {
-      _askingForPermission = true;
-
-      try {
-        final newPermissionState = await PhotoManager.requestPermissionExtend();
-        if (newPermissionState != _permissionState && mounted) {
-          setState(() {
-            _permissionState = newPermissionState;
-          });
-        }
-      } catch (_) {}
-
-      _askingForPermission = false;
-    }
-    super.didChangeAppLifecycleState(state);
-  }
-
   @override
   void didUpdateWidget(covariant StreamMessageInput oldWidget) {
     super.didUpdateWidget(oldWidget);
@@ -601,8 +596,6 @@ class StreamMessageInputState extends State<StreamMessageInput>
   // ignore: no-empty-block
   void _focusNodeListener() {}
 
-  PermissionState? _permissionState;
-
   @override
   Widget build(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
@@ -840,16 +833,16 @@ class StreamMessageInputState extends State<StreamMessageInput>
   }
 
   Widget _buildSendButton(BuildContext context) {
-    if (widget.sendButtonBuilder != null) {
-      return widget.sendButtonBuilder!(context, _effectiveController);
+    if (widget.sendButtonBuilder case final builder?) {
+      return builder(context, _effectiveController);
     }
 
     return StreamMessageSendButton(
       onSendMessage: sendMessage,
       timeOut: _effectiveController.cooldownTimeOut,
       isIdle: !widget.validator(_effectiveController.message),
-      idleSendButton: widget.idleSendButton,
-      activeSendButton: widget.activeSendButton,
+      idleSendIcon: widget.idleSendIcon,
+      activeSendIcon: widget.activeSendIcon,
     );
   }
 
@@ -1580,7 +1573,6 @@ class StreamMessageInputState extends State<StreamMessageInput>
     _focusNode?.dispose();
     _onChangedDebounced.cancel();
     _audioRecorderController.dispose();
-    WidgetsBinding.instance.removeObserver(this);
     super.dispose();
   }
 }

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

@@ -15,10 +15,21 @@ class StreamMessageSendButton extends StatelessWidget {
     this.isCommandEnabled = false,
     @Deprecated('Will be removed in the next major version')
     this.isEditEnabled = false,
-    this.idleSendButton,
-    this.activeSendButton,
+    Widget? idleSendIcon,
+    @Deprecated("Use 'idleSendIcon' instead") Widget? idleSendButton,
+    Widget? activeSendIcon,
+    @Deprecated("Use 'activeSendIcon' instead") Widget? activeSendButton,
     required this.onSendMessage,
-  });
+  })  : assert(
+          idleSendIcon == null || idleSendButton == null,
+          'idleSendIcon and idleSendButton cannot be used together',
+        ),
+        idleSendIcon = idleSendIcon ?? idleSendButton,
+        assert(
+          activeSendIcon == null || activeSendButton == null,
+          'activeSendIcon and activeSendButton cannot be used together',
+        ),
+        activeSendIcon = activeSendIcon ?? activeSendButton;
 
   /// Time out related to slow mode.
   final int timeOut;
@@ -34,11 +45,19 @@ class StreamMessageSendButton extends StatelessWidget {
   @Deprecated('It will be removed in the next major version')
   final bool isEditEnabled;
 
+  /// The icon to display when the button is idle.
+  final Widget? idleSendIcon;
+
   /// The widget to display when the button is disabled.
-  final Widget? idleSendButton;
+  @Deprecated("Use 'idleSendIcon' instead")
+  Widget? get idleSendButton => idleSendIcon;
+
+  /// The icon to display when the button is active.
+  final Widget? activeSendIcon;
 
   /// The widget to display when the button is enabled.
-  final Widget? activeSendButton;
+  @Deprecated("Use 'activeSendIcon' instead")
+  Widget? get activeSendButton => activeSendIcon;
 
   /// The callback to call when the button is pressed.
   final VoidCallback onSendMessage;
@@ -62,19 +81,25 @@ class StreamMessageSendButton extends StatelessWidget {
       );
     }
 
+    final idleIcon = switch (idleSendIcon) {
+      final idleIcon? => idleIcon,
+      _ => const StreamSvgIcon(icon: StreamSvgIcons.sendMessage),
+    };
+
+    final activeIcon = switch (activeSendIcon) {
+      final activeIcon? => activeIcon,
+      _ => const StreamSvgIcon(icon: StreamSvgIcons.circleUp),
+    };
+
     final theme = StreamMessageInputTheme.of(context);
+    final icon = isIdle ? idleIcon : activeIcon;
     final onPressed = isIdle ? null : onSendMessage;
     return StreamMessageInputIconButton(
       key: const Key('send_button'),
-      icon: StreamSvgIcon(icon: _sendButtonIcon),
+      icon: icon,
       color: theme.sendButtonColor,
       disabledColor: theme.sendButtonIdleColor,
       onPressed: onPressed,
     );
   }
-
-  StreamSvgIconData get _sendButtonIcon {
-    if (isIdle) return StreamSvgIcons.sendMessage;
-    return StreamSvgIcons.circleUp;
-  }
 }