talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[MessageInput] Fix iconButtons and textField paddings and text sizes

Browse Source 
Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
2021-01-12 16:57:04 +05:30
parent fbc8fd9a59
commit 47a3a94c93
1 changed files with 271 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_input.dart
+58 -75
View File
@@ -358,8 +358,10 @@ class MessageInputState extends State<MessageInput> {
); );
} }
AnimatedCrossFade _animateSendButton(BuildContext context) { Widget _animateSendButton(BuildContext context) {
return AnimatedCrossFade( return Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedCrossFade(
crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) && crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
_attachments.every((a) => a.uploaded == true)) _attachments.every((a) => a.uploaded == true))
? CrossFadeState.showFirst ? CrossFadeState.showFirst
@@ -368,21 +370,19 @@ class MessageInputState extends State<MessageInput> {
secondChild: _buildIdleSendButton(context), secondChild: _buildIdleSendButton(context),
duration: Duration(milliseconds: 300), duration: Duration(milliseconds: 300),
alignment: Alignment.center, alignment: Alignment.center,
),
); );
} }
Widget _buildExpandActionsButton() { Widget _buildExpandActionsButton() {
return AnimatedCrossFade( return Padding(
crossFadeState: padding: const EdgeInsets.all(8.0),
_actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond, child: AnimatedCrossFade(
firstChild: Padding( crossFadeState: _actionsShrunk
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), ? CrossFadeState.showFirst
child: IconButton( : CrossFadeState.showSecond,
onPressed: () { firstChild: IconButton(
setState(() { onPressed: () => setState(() => _actionsShrunk = false),
_actionsShrunk = false;
});
},
icon: StreamSvgIcon.emptyCircleLeft( icon: StreamSvgIcon.emptyCircleLeft(
color: StreamChatTheme.of(context).colorTheme.accentBlue, color: StreamChatTheme.of(context).colorTheme.accentBlue,
), ),
@@ -393,34 +393,36 @@ class MessageInputState extends State<MessageInput> {
), ),
splashRadius: 24, splashRadius: 24,
), ),
),
secondChild: Row( secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
if (!widget.disableAttachments) _buildAttachmentButton(), if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null && if (widget.editMessage == null &&
StreamChannel.of(context).channel?.config?.commands?.isNotEmpty == StreamChannel.of(context)
.channel
?.config
?.commands
?.isNotEmpty ==
true) true)
_buildCommandButton(), _buildCommandButton(),
], ].insertBetween(const SizedBox(width: 8)),
), ),
duration: Duration(milliseconds: 300), duration: Duration(milliseconds: 300),
alignment: Alignment.center, alignment: Alignment.center,
),
); );
} }
Expanded _buildTextInput(BuildContext context) { Expanded _buildTextInput(BuildContext context) {
final theme = StreamChatTheme.of(context);
return Expanded( return Expanded(
child: Center( child: Center(
child: Container( child: Container(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0), borderRadius: BorderRadius.circular(20.0),
border: Border.all( border: Border.all(color: theme.colorTheme.greyGainsboro),
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
), ),
),
padding: _attachments.isEmpty ? null : EdgeInsets.all(6.0),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -429,24 +431,26 @@ class MessageInputState extends State<MessageInput> {
_buildAttachments(), _buildAttachments(),
LimitedBox( LimitedBox(
maxHeight: widget.maxHeight, maxHeight: widget.maxHeight,
child: SizedBox(
height: 40,
child: TextField( child: TextField(
key: Key('messageInputText'), key: Key('messageInputText'),
enabled: _inputEnabled, enabled: _inputEnabled,
minLines: null, minLines: null,
maxLines: null, maxLines: null,
onSubmitted: (_) { onSubmitted: (_) => sendMessage(),
sendMessage();
},
keyboardType: widget.keyboardType, keyboardType: widget.keyboardType,
controller: textEditingController, controller: textEditingController,
focusNode: _focusNode, focusNode: _focusNode,
style: Theme.of(context).textTheme.bodyText2, style: theme.textTheme.body,
autofocus: false, autofocus: false,
textAlignVertical: TextAlignVertical.center, textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
hintText: _getHint(), hintText: _getHint(),
prefixText: _commandEnabled ? null : ' ', hintStyle: theme.textTheme.body.copyWith(
color: theme.colorTheme.grey,
),
border: OutlineInputBorder( border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
@@ -457,24 +461,18 @@ class MessageInputState extends State<MessageInput> {
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
disabledBorder: OutlineInputBorder( disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
contentPadding: EdgeInsets.symmetric( contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
horizontal: 16,
vertical: 13,
),
prefixIcon: _commandEnabled prefixIcon: _commandEnabled
? Padding( ? Container(
padding: decoration: BoxDecoration(
const EdgeInsets.symmetric(horizontal: 8.0), borderRadius: BorderRadius.circular(12),
child: Chip( color: theme.colorTheme.accentBlue,
backgroundColor: StreamChatTheme.of(context) ),
.colorTheme height: 24,
.accentBlue, margin: const EdgeInsets.all(8.0),
padding: EdgeInsets.zero, padding: const EdgeInsets.only(right: 8, left: 4),
labelPadding: child: Row(
EdgeInsets.symmetric(horizontal: 8.0),
label: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
StreamSvgIcon.lightning( StreamSvgIcon.lightning(
color: Colors.white, color: Colors.white,
@@ -484,20 +482,24 @@ class MessageInputState extends State<MessageInput> {
_chosenCommand?.name?.toUpperCase() ?? '', _chosenCommand?.name?.toUpperCase() ?? '',
style: StreamChatTheme.of(context) style: StreamChatTheme.of(context)
.textTheme .textTheme
.footnote .footnoteBold
.copyWith( .copyWith(
color: Colors.white, color: Colors.white,
), ),
), ),
], ],
), ),
),
) )
: null, : null,
suffixIcon: _commandEnabled suffixIcon: _commandEnabled
? IconButton( ? IconButton(
icon: StreamSvgIcon.close_small(), icon: StreamSvgIcon.close_small(),
splashRadius: 24, splashRadius: 24,
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
onPressed: () { onPressed: () {
setState(() => _commandEnabled = false); setState(() => _commandEnabled = false);
}, },
@@ -506,6 +508,7 @@ class MessageInputState extends State<MessageInput> {
), ),
textCapitalization: TextCapitalization.sentences, textCapitalization: TextCapitalization.sentences,
), ),
),
) )
], ],
), ),
@@ -1515,9 +1518,7 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildReplyToMessage() { Widget _buildReplyToMessage() {
if (!_hasQuotedMessage) { if (!_hasQuotedMessage) return Offstage();
return Offstage();
}
final containsUrl = widget.quotedMessage.attachments final containsUrl = widget.quotedMessage.attachments
?.any((element) => element.ogScrapeUrl != null) == ?.any((element) => element.ogScrapeUrl != null) ==
true; true;
@@ -1534,9 +1535,8 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildAttachments() { Widget _buildAttachments() {
return _attachments.isEmpty if (_attachments.isEmpty) return Offstage();
? Container() return Column(
: Column(
children: [ children: [
if (_attachments.any((e) => e.attachment?.type == 'file')) if (_attachments.any((e) => e.attachment?.type == 'file'))
LimitedBox( LimitedBox(
@@ -1548,8 +1548,7 @@ class MessageInputState extends State<MessageInput> {
.where((e) => e.attachment?.type == 'file') .where((e) => e.attachment?.type == 'file')
.map( .map(
(e) => Padding( (e) => Padding(
padding: padding: const EdgeInsets.symmetric(horizontal: 8.0),
const EdgeInsets.symmetric(horizontal: 8.0),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
@@ -1565,8 +1564,7 @@ class MessageInputState extends State<MessageInput> {
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: InkWell( child: InkWell(
child: CircleAvatar( child: CircleAvatar(
backgroundColor: backgroundColor: StreamChatTheme.of(context)
StreamChatTheme.of(context)
.colorTheme .colorTheme
.black .black
.withOpacity(0.6), .withOpacity(0.6),
@@ -1620,10 +1618,8 @@ class MessageInputState extends State<MessageInput> {
: Positioned.fill( : Positioned.fill(
child: Center( child: Center(
child: Padding( child: Padding(
padding: padding: const EdgeInsets.all(16.0),
const EdgeInsets.all(16.0), child: CircularProgressIndicator(),
child:
CircularProgressIndicator(),
), ),
), ),
), ),
@@ -1746,9 +1742,7 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildCommandButton() { Widget _buildCommandButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
child: IconButton(
icon: StreamSvgIcon.lightning( icon: StreamSvgIcon.lightning(
color: _commandsOverlay != null color: _commandsOverlay != null
? StreamChatTheme.of(context).colorTheme.accentBlue ? StreamChatTheme.of(context).colorTheme.accentBlue
@@ -1782,14 +1776,11 @@ class MessageInputState extends State<MessageInput> {
}); });
} }
}, },
),
); );
} }
Widget _buildAttachmentButton() { Widget _buildAttachmentButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
child: IconButton(
icon: StreamSvgIcon.attach( icon: StreamSvgIcon.attach(
color: _openFilePickerSection color: _openFilePickerSection
? StreamChatTheme.of(context).colorTheme.accentBlue ? StreamChatTheme.of(context).colorTheme.accentBlue
@@ -1819,7 +1810,6 @@ class MessageInputState extends State<MessageInput> {
showAttachmentModal(); showAttachmentModal();
} }
}, },
),
); );
} }
@@ -2118,21 +2108,15 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildIdleSendButton(BuildContext context) { Widget _buildIdleSendButton(BuildContext context) {
return Padding( return StreamSvgIcon(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
child: StreamSvgIcon(
assetName: _getIdleSendIcon(), assetName: _getIdleSendIcon(),
color: StreamChatTheme.of(context).colorTheme.greyGainsboro, color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
),
); );
} }
Widget _buildSendButton(BuildContext context) { Widget _buildSendButton(BuildContext context) {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
child: IconButton(
onPressed: sendMessage, onPressed: sendMessage,
visualDensity: VisualDensity.compact,
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
splashRadius: 24, splashRadius: 24,
constraints: BoxConstraints.tightFor( constraints: BoxConstraints.tightFor(
@@ -2143,7 +2127,6 @@ class MessageInputState extends State<MessageInput> {
assetName: _getSendIcon(), assetName: _getSendIcon(),
color: StreamChatTheme.of(context).colorTheme.accentBlue, color: StreamChatTheme.of(context).colorTheme.accentBlue,
), ),
),
); );
} }