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

Merge pull request #672 from GetStream/fix/668

Browse Source 
fix(ui): fix `MessageInput` rendering errors
This commit is contained in:
Salvatore Giordano
2021-09-17 11:25:59 +02:00
committed by GitHub
parent 4561e6077b aa68a25798
commit 4aed0542a2
2 changed files with 133 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stream_chat_flutter/CHANGELOG.md
+12
View File
@@ -1,3 +1,15 @@
## Upcoming
🐞 Fixed
- [[#668]](https://github.com/GetStream/stream-chat-flutter/issues/668): Fix `MessageInput` rendering errors in case
there are no actions available to show.
- [[#349]](https://github.com/GetStream/stream-chat-flutter/issues/349): Fix `MessageInput` attachment render overflow error.
🔄 Changed
- Animation curves changed from default `Curves.linear` to `Curves.easeOut` and `Curves.easeIn` for attachment controls.
## 2.2.1 ## 2.2.1
⚠️ Deprecated ⚠️ Deprecated
packages/stream_chat_flutter/lib/src/message_input.dart
+121 -110
View File
@@ -578,6 +578,8 @@ class MessageInputState extends State<MessageInput> {
crossFadeState: _actionsShrunk crossFadeState: _actionsShrunk
? CrossFadeState.showFirst ? CrossFadeState.showFirst
: CrossFadeState.showSecond, : CrossFadeState.showSecond,
firstCurve: Curves.easeOut,
secondCurve: Curves.easeIn,
firstChild: IconButton( firstChild: IconButton(
onPressed: () { onPressed: () {
if (_actionsShrunk) { if (_actionsShrunk) {
@@ -604,20 +606,17 @@ class MessageInputState extends State<MessageInput> {
!widget.showCommandsButton && !widget.showCommandsButton &&
widget.actions?.isNotEmpty != true widget.actions?.isNotEmpty != true
? const Offstage() ? const Offstage()
: FittedBox( : Wrap(
child: Row( children: <Widget>[
mainAxisAlignment: MainAxisAlignment.spaceEvenly, if (!widget.disableAttachments)
children: <Widget>[ _buildAttachmentButton(context),
if (!widget.disableAttachments) if (widget.showCommandsButton &&
_buildAttachmentButton(context), widget.editMessage == null &&
if (widget.showCommandsButton && channel.state != null &&
widget.editMessage == null && channel.config?.commands.isNotEmpty == true)
channel.state != null && _buildCommandButton(context),
channel.config?.commands.isNotEmpty == true) ...widget.actions ?? [],
_buildCommandButton(context), ].insertBetween(const SizedBox(width: 8)),
...widget.actions ?? [],
].insertBetween(const SizedBox(width: 8)),
),
), ),
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
alignment: Alignment.center, alignment: Alignment.center,
@@ -1089,108 +1088,120 @@ class MessageInputState extends State<MessageInput> {
return AnimatedContainer( return AnimatedContainer(
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
height: _openFilePickerSection ? _kMinMediaPickerSize : 0, height: _openFilePickerSection ? _kMinMediaPickerSize : 0,
child: Material( child: SingleChildScrollView(
color: _streamChatTheme.colorTheme.inputBg, child: SizedBox(
child: Column( height: _kMinMediaPickerSize,
mainAxisSize: MainAxisSize.min, child: Material(
children: [ color: _streamChatTheme.colorTheme.inputBg,
Row( child: Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
IconButton( Row(
icon: StreamSvgIcon.pictures( children: [
color: _getIconColor(0), IconButton(
icon: StreamSvgIcon.pictures(
color: _getIconColor(0),
),
onPressed:
_attachmentContainsFile && _attachments.isNotEmpty
? null
: () {
setState(() {
_filePickerIndex = 0;
});
},
),
IconButton(
iconSize: 32,
icon: StreamSvgIcon.files(
color: _getIconColor(1),
),
onPressed:
!_attachmentContainsFile && _attachments.isNotEmpty
? null
: () {
pickFile(DefaultAttachmentTypes.file);
},
),
IconButton(
icon: StreamSvgIcon.camera(
color: _getIconColor(2),
),
onPressed: attachmentLimitCrossed ||
(_attachmentContainsFile &&
_attachments.isNotEmpty)
? null
: () {
pickFile(DefaultAttachmentTypes.image,
camera: true);
},
),
IconButton(
padding: const EdgeInsets.all(0),
icon: StreamSvgIcon.record(
color: _getIconColor(3),
),
onPressed: attachmentLimitCrossed ||
(_attachmentContainsFile &&
_attachments.isNotEmpty)
? null
: () {
pickFile(DefaultAttachmentTypes.video,
camera: true);
},
),
],
),
DecoratedBox(
decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.barsBg,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
), ),
onPressed: _attachmentContainsFile && _attachments.isNotEmpty child: Center(
? null child: Padding(
: () { padding: const EdgeInsets.all(8),
setState(() { child: Container(
_filePickerIndex = 0; width: 40,
}); height: 4,
}, decoration: BoxDecoration(
), color: _streamChatTheme.colorTheme.inputBg,
IconButton( borderRadius: BorderRadius.circular(4),
iconSize: 32, ),
icon: StreamSvgIcon.files( ),
color: _getIconColor(1),
),
onPressed: !_attachmentContainsFile && _attachments.isNotEmpty
? null
: () {
pickFile(DefaultAttachmentTypes.file);
},
),
IconButton(
icon: StreamSvgIcon.camera(
color: _getIconColor(2),
),
onPressed: attachmentLimitCrossed ||
(_attachmentContainsFile && _attachments.isNotEmpty)
? null
: () {
pickFile(DefaultAttachmentTypes.image, camera: true);
},
),
IconButton(
padding: const EdgeInsets.all(0),
icon: StreamSvgIcon.record(
color: _getIconColor(3),
),
onPressed: attachmentLimitCrossed ||
(_attachmentContainsFile && _attachments.isNotEmpty)
? null
: () {
pickFile(DefaultAttachmentTypes.video, camera: true);
},
),
],
),
DecoratedBox(
decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.barsBg,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8),
child: Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.inputBg,
borderRadius: BorderRadius.circular(4),
), ),
), ),
), ),
), if (_openFilePickerSection)
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.barsBg,
borderRadius: BorderRadius.circular(8),
),
child: _PickerWidget(
filePickerIndex: _filePickerIndex,
streamChatTheme: _streamChatTheme,
containsFile: _attachmentContainsFile,
selectedMedias: _attachments.keys.toList(),
onAddMoreFilesClick: pickFile,
onMediaSelected: (media) {
if (_attachments.containsKey(media.id)) {
setState(() => _attachments.remove(media.id));
} else {
_addAssetAttachment(media);
}
},
),
),
),
],
), ),
if (_openFilePickerSection) ),
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.barsBg,
borderRadius: BorderRadius.circular(8),
),
child: _PickerWidget(
filePickerIndex: _filePickerIndex,
streamChatTheme: _streamChatTheme,
containsFile: _attachmentContainsFile,
selectedMedias: _attachments.keys.toList(),
onAddMoreFilesClick: pickFile,
onMediaSelected: (media) {
if (_attachments.containsKey(media.id)) {
setState(() => _attachments.remove(media.id));
} else {
_addAssetAttachment(media);
}
},
),
),
),
],
), ),
), ),
); );
@@ -2315,7 +2326,7 @@ class _PickerWidgetState extends State<_PickerWidget> {
future: requestPermission, future: requestPermission,
builder: (context, snapshot) { builder: (context, snapshot) {
if (!snapshot.hasData) { if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator()); return const Offstage();
} }
if (snapshot.data!) { if (snapshot.data!) {