diff --git a/lib/message_bars/message_bar.dart b/lib/message_bars/message_bar.dart index 9f2de69..b2ccc3b 100644 --- a/lib/message_bars/message_bar.dart +++ b/lib/message_bars/message_bar.dart @@ -1,3 +1,4 @@ +import 'package:chat_bubbles/message_bars/message_bar_style.dart'; import 'package:flutter/material.dart'; ///Normal Message bar with more actions @@ -24,11 +25,15 @@ import 'package:flutter/material.dart'; /// [messageBarColor] is the color of the message bar /// [sendButtonColor] is the color of the send button /// [messageBarHintStyle] is the style of the message bar hint +/// [sendButton] provides an optional widget for the send button /// /// # METHODS /// [onTextChanged] is the function which triggers after text every text change /// [onSend] is the send button action /// [onTapCloseReply] is the close button action of the close button on the +/// +/// # CLASSES +/// [messageBarStyle] contains styling information for the textfield /// reply widget usually change [replying] attribute to `false` class MessageBar extends StatelessWidget { @@ -62,11 +67,16 @@ class MessageBar extends StatelessWidget { final void Function(String)? onSend; /// callback function triggered when close reply button is pressed final void Function()? onTapCloseReply; + /// config to control appearance of the MessageBar textfield + final MessageBarStyle messageBarStyle; + /// optional custom widget to use as a send button + final Widget? sendButton; /// [MessageBar] constructor /// /// - MessageBar({Key? key, + MessageBar({ + Key? key, this.replying = false, this.replyingTo = "", this.actions = const [], @@ -81,6 +91,8 @@ class MessageBar extends StatelessWidget { this.onTextChanged, this.onSend, this.onTapCloseReply, + this.messageBarStyle = const MessageBarStyle(), + this.sendButton, }) : super(key: key); /// [MessageBar] builder method @@ -141,41 +153,28 @@ class MessageBar extends StatelessWidget { Expanded( child: TextField( controller: _textController, - keyboardType: TextInputType.multiline, - textCapitalization: TextCapitalization.sentences, - minLines: 1, - maxLines: 3, + keyboardType: messageBarStyle.keyboardType, + textCapitalization: messageBarStyle.textCapitalization, + minLines: messageBarStyle.minLines, + maxLines: messageBarStyle.maxLines, onChanged: onTextChanged, style: textFieldTextStyle, decoration: InputDecoration( hintText: messageBarHintText, hintMaxLines: 1, - contentPadding: const EdgeInsets.symmetric( - horizontal: 8.0, vertical: 10), + contentPadding: messageBarStyle.contentPadding, hintStyle: messageBarHintStyle, - fillColor: Colors.white, + fillColor: messageBarStyle.fillColor, filled: true, - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(30.0), - borderSide: const BorderSide( - color: Colors.white, - width: 0.2, - ), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(30.0), - borderSide: const BorderSide( - color: Colors.black26, - width: 0.2, - ), - ), + enabledBorder: messageBarStyle.enabledBorder, + focusedBorder: messageBarStyle.focusedBorder, ), ), ), Padding( padding: const EdgeInsets.only(left: 16), child: InkWell( - child: Icon( + child: sendButton ?? Icon( Icons.send, color: sendButtonColor, size: 24, diff --git a/lib/message_bars/message_bar_style.dart b/lib/message_bars/message_bar_style.dart new file mode 100644 index 0000000..eec75f3 --- /dev/null +++ b/lib/message_bars/message_bar_style.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; + +/// Style configuration for a `MessageBar`. +/// +/// Groups commonly used appearance and input properties such as borders, +/// padding, keyboard type, and background color. +class MessageBarStyle { + /// Border when the input is enabled but not focused. + final InputBorder enabledBorder; + + /// Border when the input is focused. + final InputBorder focusedBorder; + + /// Keyboard type for the input field. + final TextInputType keyboardType; + + /// Text capitalization behavior. + final TextCapitalization textCapitalization; + + /// Inner padding of the input field. + final EdgeInsetsGeometry contentPadding; + + /// Background color of the input field. + final Color fillColor; + + /// minimum number of lines of the input field. + final int minLines; + + /// maximum number of lines of the input field. + final int maxLines; + + /// Creates a `MessageBarStyle`. + /// + /// All parameters are optional and default to the standard `MessageBar` style. + const MessageBarStyle({ + this.enabledBorder = const OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(30)), + borderSide: BorderSide( + color: Colors.white, + width: 0.2, + ), + ), + this.focusedBorder = const OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(30)), + borderSide: BorderSide( + color: Colors.black26, + width: 0.2, + ), + ), + this.keyboardType = TextInputType.multiline, + this.textCapitalization = TextCapitalization.sentences, + this.contentPadding = + const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10), + this.fillColor = Colors.white, + this.minLines = 1, + this.maxLines = 3, + }); +}