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
+271 -288
View File
@@ -358,31 +358,31 @@ class MessageInputState extends State<MessageInput> {
); );
} }
AnimatedCrossFade _animateSendButton(BuildContext context) { Widget _animateSendButton(BuildContext context) {
return AnimatedCrossFade( return Padding(
crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) && padding: const EdgeInsets.all(8.0),
_attachments.every((a) => a.uploaded == true)) child: AnimatedCrossFade(
? CrossFadeState.showFirst crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
: CrossFadeState.showSecond, _attachments.every((a) => a.uploaded == true))
firstChild: _buildSendButton(context), ? CrossFadeState.showFirst
secondChild: _buildIdleSendButton(context), : CrossFadeState.showSecond,
duration: Duration(milliseconds: 300), firstChild: _buildSendButton(context),
alignment: Alignment.center, secondChild: _buildIdleSendButton(context),
duration: Duration(milliseconds: 300),
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(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null &&
StreamChannel.of(context)
.channel
?.config
?.commands
?.isNotEmpty ==
true)
_buildCommandButton(),
].insertBetween(const SizedBox(width: 8)),
),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
), ),
secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null &&
StreamChannel.of(context).channel?.config?.commands?.isNotEmpty ==
true)
_buildCommandButton(),
],
),
duration: Duration(milliseconds: 300),
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,52 +431,48 @@ class MessageInputState extends State<MessageInput> {
_buildAttachments(), _buildAttachments(),
LimitedBox( LimitedBox(
maxHeight: widget.maxHeight, maxHeight: widget.maxHeight,
child: TextField( child: SizedBox(
key: Key('messageInputText'), height: 40,
enabled: _inputEnabled, child: TextField(
minLines: null, key: Key('messageInputText'),
maxLines: null, enabled: _inputEnabled,
onSubmitted: (_) { minLines: null,
sendMessage(); maxLines: null,
}, onSubmitted: (_) => 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(
border: OutlineInputBorder( color: theme.colorTheme.grey,
borderSide: BorderSide(color: Colors.transparent)), ),
focusedBorder: OutlineInputBorder( border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
errorBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
disabledBorder: OutlineInputBorder( errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
contentPadding: EdgeInsets.symmetric( disabledBorder: OutlineInputBorder(
horizontal: 16, borderSide: BorderSide(color: Colors.transparent)),
vertical: 13, contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
), prefixIcon: _commandEnabled
prefixIcon: _commandEnabled ? Container(
? Padding( decoration: BoxDecoration(
padding: borderRadius: BorderRadius.circular(12),
const EdgeInsets.symmetric(horizontal: 8.0), color: theme.colorTheme.accentBlue,
child: Chip( ),
backgroundColor: StreamChatTheme.of(context) height: 24,
.colorTheme margin: const EdgeInsets.all(8.0),
.accentBlue, padding: const EdgeInsets.only(right: 8, left: 4),
padding: EdgeInsets.zero, child: Row(
labelPadding:
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,27 +482,32 @@ 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),
onPressed: () { constraints: BoxConstraints.tightFor(
setState(() => _commandEnabled = false); height: 24,
}, width: 24,
) ),
: null, onPressed: () {
setState(() => _commandEnabled = false);
},
)
: null,
),
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,109 +1535,104 @@ 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( maxHeight: 136.0,
maxHeight: 136.0, child: ListView(
child: ListView( reverse: true,
reverse: true, shrinkWrap: true,
shrinkWrap: true, children: _attachments.reversed
children: _attachments.reversed .where((e) => e.attachment?.type == 'file')
.where((e) => e.attachment?.type == 'file') .map(
.map( (e) => Padding(
(e) => Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0),
padding: child: ClipRRect(
const EdgeInsets.symmetric(horizontal: 8.0), borderRadius: BorderRadius.circular(10),
child: ClipRRect( clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(10), child: FileAttachment(
clipBehavior: Clip.antiAlias, attachment: e.attachment,
child: FileAttachment( attachmentType: FileAttachmentType.local,
attachment: e.attachment, file: e.file,
attachmentType: FileAttachmentType.local, size: Size(
file: e.file, MediaQuery.of(context).size.width * 0.65,
size: Size( 56.0,
MediaQuery.of(context).size.width * 0.65, ),
56.0, trailing: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: CircleAvatar(
backgroundColor: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.6),
maxRadius: 12.0,
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.white,
), ),
trailing: Padding( ),
padding: const EdgeInsets.all(8.0), onTap: () {
child: InkWell( setState(() {
child: CircleAvatar( _attachments.remove(e);
backgroundColor: });
StreamChatTheme.of(context) },
.colorTheme ),
.black ),
.withOpacity(0.6), ),
maxRadius: 12.0, ),
child: StreamSvgIcon.close( ),
color: StreamChatTheme.of(context) )
.colorTheme .toList(),
.white, ),
),
if (_attachments.any((e) => e.attachment?.type != 'file'))
LimitedBox(
maxHeight: 104.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _attachments
.where((e) => e.attachment?.type != 'file')
.map(
(attachment) => Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.0,
child: Container(
height: 104,
width: 104,
child: _buildAttachment(attachment),
),
),
_buildRemoveButton(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
), ),
), ),
onTap: () {
setState(() {
_attachments.remove(e);
});
},
), ),
), ],
), ),
), ),
), ),
) )
.toList(), .toList(),
), ),
), ),
if (_attachments.any((e) => e.attachment?.type != 'file')) ],
LimitedBox( );
maxHeight: 104.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _attachments
.where((e) => e.attachment?.type != 'file')
.map(
(attachment) => Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.0,
child: Container(
height: 104,
width: 104,
child: _buildAttachment(attachment),
),
),
_buildRemoveButton(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding:
const EdgeInsets.all(16.0),
child:
CircularProgressIndicator(),
),
),
),
],
),
),
),
)
.toList(),
),
),
],
);
} }
Positioned _buildRemoveButton(_SendingAttachment attachment) { Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -1746,80 +1742,74 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildCommandButton() { Widget _buildCommandButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), icon: StreamSvgIcon.lightning(
child: IconButton( color: _commandsOverlay != null
icon: StreamSvgIcon.lightning( ? StreamChatTheme.of(context).colorTheme.accentBlue
color: _commandsOverlay != null : StreamChatTheme.of(context).colorTheme.grey,
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.grey,
),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
if (_openFilePickerSection) {
setState(() {
_animateContainer = false;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
await Future.delayed(Duration(milliseconds: 300));
}
if (_commandsOverlay == null) {
setState(() {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
});
} else {
setState(() {
_commandsOverlay?.remove();
_commandsOverlay = null;
});
}
},
), ),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
if (_openFilePickerSection) {
setState(() {
_animateContainer = false;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
await Future.delayed(Duration(milliseconds: 300));
}
if (_commandsOverlay == null) {
setState(() {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
});
} else {
setState(() {
_commandsOverlay?.remove();
_commandsOverlay = null;
});
}
},
); );
} }
Widget _buildAttachmentButton() { Widget _buildAttachmentButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), icon: StreamSvgIcon.attach(
child: IconButton( color: _openFilePickerSection
icon: StreamSvgIcon.attach( ? StreamChatTheme.of(context).colorTheme.accentBlue
color: _openFilePickerSection : StreamChatTheme.of(context).colorTheme.grey,
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.grey,
),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
_emojiOverlay?.remove();
_emojiOverlay = null;
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
if (_openFilePickerSection) {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
showAttachmentModal();
}
},
), ),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
_emojiOverlay?.remove();
_emojiOverlay = null;
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
if (_openFilePickerSection) {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
showAttachmentModal();
}
},
); );
} }
@@ -2118,31 +2108,24 @@ 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), assetName: _getIdleSendIcon(),
child: StreamSvgIcon( color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
assetName: _getIdleSendIcon(),
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), onPressed: sendMessage,
child: IconButton( padding: const EdgeInsets.all(0),
onPressed: sendMessage, splashRadius: 24,
visualDensity: VisualDensity.compact, constraints: BoxConstraints.tightFor(
padding: const EdgeInsets.all(0), height: 24,
splashRadius: 24, width: 24,
constraints: BoxConstraints.tightFor( ),
height: 24, icon: StreamSvgIcon(
width: 24, assetName: _getSendIcon(),
), color: StreamChatTheme.of(context).colorTheme.accentBlue,
icon: StreamSvgIcon(
assetName: _getSendIcon(),
color: StreamChatTheme.of(context).colorTheme.accentBlue,
),
), ),
); );
} }