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

feat: Added remove image

Browse Source
This commit is contained in:
Deven Joshi
2020-11-09 14:38:25 +05:30
parent 812f702845
commit a06b7c2cd8
1 changed files with 183 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_input.dart
+183 -177
View File
@@ -20,9 +20,9 @@ import 'stream_channel.dart';
typedef FileUploader = Future<String> Function(PlatformFile, Channel); typedef FileUploader = Future<String> Function(PlatformFile, Channel);
typedef AttachmentThumbnailBuilder = Widget Function( typedef AttachmentThumbnailBuilder = Widget Function(
BuildContext, BuildContext,
_SendingAttachment, _SendingAttachment,
); );
enum ActionsLocation { enum ActionsLocation {
left, left,
@@ -230,7 +230,7 @@ class MessageInputState extends State<MessageInput> {
Checkbox( Checkbox(
value: _sendAsDm, value: _sendAsDm,
onChanged: (val) => setState( onChanged: (val) => setState(
() { () {
_sendAsDm = val; _sendAsDm = val;
}, },
), ),
@@ -247,7 +247,7 @@ class MessageInputState extends State<MessageInput> {
AnimatedCrossFade _animateSendButton(BuildContext context) { AnimatedCrossFade _animateSendButton(BuildContext context) {
return AnimatedCrossFade( return 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
: CrossFadeState.showSecond, : CrossFadeState.showSecond,
firstChild: _buildSendButton(context), firstChild: _buildSendButton(context),
@@ -260,7 +260,7 @@ class MessageInputState extends State<MessageInput> {
Widget _buildExpandActionsButton() { Widget _buildExpandActionsButton() {
return AnimatedCrossFade( return AnimatedCrossFade(
crossFadeState: crossFadeState:
_actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond, _actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond,
firstChild: IconButton( firstChild: IconButton(
onPressed: () { onPressed: () {
setState(() { setState(() {
@@ -353,7 +353,7 @@ class MessageInputState extends State<MessageInput> {
(s[textEditingController.selection.start - 1] == '@' || (s[textEditingController.selection.start - 1] == '@' ||
textEditingController.text textEditingController.text
.substring( .substring(
0, textEditingController.selection.start) 0, textEditingController.selection.start)
.split(' ') .split(' ')
.last .last
.contains('@'))) { .contains('@'))) {
@@ -371,9 +371,9 @@ class MessageInputState extends State<MessageInput> {
textAlignVertical: TextAlignVertical.center, textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration( decoration: InputDecoration(
hintText: hintText:
(_commandEnabled && _chosenCommand.name == 'giphy') (_commandEnabled && _chosenCommand.name == 'giphy')
? 'Search GIFs' ? 'Search GIFs'
: 'Write a message', : 'Write a message',
prefixText: _commandEnabled ? null : ' ', prefixText: _commandEnabled ? null : ' ',
border: OutlineInputBorder( border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
@@ -388,31 +388,31 @@ class MessageInputState extends State<MessageInput> {
contentPadding: EdgeInsets.all(8), contentPadding: EdgeInsets.all(8),
prefixIcon: _commandEnabled prefixIcon: _commandEnabled
? Padding( ? Padding(
padding: padding:
const EdgeInsets.symmetric(horizontal: 8.0), const EdgeInsets.symmetric(horizontal: 8.0),
child: Chip( child: Chip(
backgroundColor: backgroundColor:
StreamChatTheme.of(context).accentColor, StreamChatTheme.of(context).accentColor,
label: Text( label: Text(
_chosenCommand?.name ?? "", _chosenCommand?.name ?? "",
style: TextStyle(color: Colors.white), style: TextStyle(color: Colors.white),
), ),
avatar: Icon( avatar: Icon(
StreamIcons.lightning, StreamIcons.lightning,
color: Colors.white, color: Colors.white,
), ),
), ),
) )
: null, : null,
suffixIcon: _commandEnabled suffixIcon: _commandEnabled
? IconButton( ? IconButton(
icon: Icon(Icons.cancel_outlined), icon: Icon(Icons.cancel_outlined),
onPressed: () { onPressed: () {
setState(() { setState(() {
_commandEnabled = false; _commandEnabled = false;
}); });
}, },
) )
: null, : null,
), ),
textCapitalization: TextCapitalization.sentences, textCapitalization: TextCapitalization.sentences,
@@ -454,13 +454,13 @@ class MessageInputState extends State<MessageInput> {
child: Container( child: Container(
constraints: BoxConstraints.loose(Size.fromHeight(400)), constraints: BoxConstraints.loose(Size.fromHeight(400)),
decoration: BoxDecoration( decoration: BoxDecoration(
// boxShadow: [ // boxShadow: [
// BoxShadow( // BoxShadow(
// spreadRadius: -8, // spreadRadius: -8,
// blurRadius: 5.0, // blurRadius: 5.0,
// offset: Offset(0, -4), // offset: Offset(0, -4),
// ), // ),
// ], // ],
color: StreamChatTheme.of(context).primaryColor, color: StreamChatTheme.of(context).primaryColor,
borderRadius: BorderRadius.circular(8.0)), borderRadius: BorderRadius.circular(8.0)),
child: ListView( child: ListView(
@@ -474,7 +474,7 @@ class MessageInputState extends State<MessageInput> {
children: [ children: [
Padding( Padding(
padding: padding:
const EdgeInsets.symmetric(horizontal: 8.0), const EdgeInsets.symmetric(horizontal: 8.0),
child: Icon(StreamIcons.lightning, child: Icon(StreamIcons.lightning,
color: StreamChatTheme.of(context).accentColor), color: StreamChatTheme.of(context).accentColor),
), ),
@@ -485,48 +485,48 @@ class MessageInputState extends State<MessageInput> {
...commands ...commands
.map( .map(
(c) => ListTile( (c) => ListTile(
leading: c.name == 'giphy' leading: c.name == 'giphy'
? CircleAvatar( ? CircleAvatar(
backgroundColor: Colors.black, backgroundColor: Colors.black,
child: Image.asset( child: Image.asset(
'images/giphy_icon.png', 'images/giphy_icon.png',
package: 'stream_chat_flutter', package: 'stream_chat_flutter',
width: 16.0, width: 16.0,
height: 16.0, height: 16.0,
), ),
maxRadius: 12.0, maxRadius: 12.0,
) )
: null, : null,
title: Text.rich( title: Text.rich(
TextSpan(
text: '${c.name.capitalize()}',
style: TextStyle(fontWeight: FontWeight.bold),
children: [
TextSpan( TextSpan(
text: ' /${c.name} ${c.args}', text: '${c.name.capitalize()}',
style: TextStyle( style: TextStyle(fontWeight: FontWeight.bold),
fontWeight: FontWeight.w300, children: [
), TextSpan(
text: ' /${c.name} ${c.args}',
style: TextStyle(
fontWeight: FontWeight.w300,
),
),
],
), ),
], ),
trailing: CircleAvatar(
backgroundColor:
StreamChatTheme.of(context).accentColor,
child: Icon(
StreamIcons.lightning,
color: Colors.white,
size: 12.5,
),
maxRadius: 12,
),
//subtitle: Text(c.description),
onTap: () {
_setCommand(c);
},
), ),
), )
trailing: CircleAvatar(
backgroundColor:
StreamChatTheme.of(context).accentColor,
child: Icon(
StreamIcons.lightning,
color: Colors.white,
size: 12.5,
),
maxRadius: 12,
),
//subtitle: Text(c.description),
onTap: () {
_setCommand(c);
},
),
)
.toList(), .toList(),
], ],
), ),
@@ -662,14 +662,13 @@ class MessageInputState extends State<MessageInput> {
child: Image.memory( child: Image.memory(
mediaData.data.item2[position], mediaData.data.item2[position],
fit: mediaData.data.item1[position].height > fit: mediaData.data.item1[position].height >
mediaData.data.item1[position].width mediaData.data.item1[position].width
? BoxFit.fitWidth ? BoxFit.fitWidth
: BoxFit.fitHeight, : BoxFit.fitHeight,
), ),
), ),
if (_attachments.any((element) => if (_attachments.any((element) =>
element.id == element.id == mediaData.data.item1[position].id))
mediaData.data.item1[position].id))
Container( Container(
color: Colors.black.withOpacity(0.5), color: Colors.black.withOpacity(0.5),
child: Center( child: Center(
@@ -683,7 +682,14 @@ class MessageInputState extends State<MessageInput> {
], ],
), ),
onTap: () { onTap: () {
_addAttachment(mediaData.data.item1[position]); if (!_attachments.any((element) =>
element.id == mediaData.data.item1[position].id)) {
_addAttachment(mediaData.data.item1[position]);
} else {
_attachments.removeWhere((element) =>
element.id == mediaData.data.item1[position].id);
setState(() {});
}
}, },
), ),
); );
@@ -796,8 +802,8 @@ class MessageInputState extends State<MessageInput> {
} }
final members = StreamChannel.of(context).channel.state.members?.where((m) { final members = StreamChannel.of(context).channel.state.members?.where((m) {
return m.user.name.toLowerCase().contains(query); return m.user.name.toLowerCase().contains(query);
})?.toList() ?? })?.toList() ??
[]; [];
RenderBox renderBox = context.findRenderObject(); RenderBox renderBox = context.findRenderObject();
@@ -837,38 +843,38 @@ class MessageInputState extends State<MessageInput> {
shrinkWrap: true, shrinkWrap: true,
children: snapshot.data children: snapshot.data
.map((m) => ListTile( .map((m) => ListTile(
leading: UserAvatar( leading: UserAvatar(
user: m.user, user: m.user,
), ),
title: Text( title: Text(
'${m.user.name}', '${m.user.name}',
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(fontWeight: FontWeight.bold),
), ),
subtitle: Text('@${m.userId}'), subtitle: Text('@${m.userId}'),
trailing: Icon( trailing: Icon(
StreamIcons.at_mention, StreamIcons.at_mention,
color: StreamChatTheme.of(context).accentColor, color: StreamChatTheme.of(context).accentColor,
), ),
onTap: () { onTap: () {
_mentionedUsers.add(m.user); _mentionedUsers.add(m.user);
splits[splits.length - 1] = m.user.name; splits[splits.length - 1] = m.user.name;
final rejoin = splits.join('@'); final rejoin = splits.join('@');
textEditingController.value = TextEditingValue( textEditingController.value = TextEditingValue(
text: rejoin + text: rejoin +
textEditingController.text.substring( textEditingController.text.substring(
textEditingController textEditingController
.selection.start), .selection.start),
selection: TextSelection.collapsed( selection: TextSelection.collapsed(
offset: rejoin.length, offset: rejoin.length,
), ),
); );
_mentionsOverlay?.remove(); _mentionsOverlay?.remove();
_mentionsOverlay = null; _mentionsOverlay = null;
}, },
)) ))
.toList(), .toList(),
); );
}), }),
@@ -893,44 +899,44 @@ class MessageInputState extends State<MessageInput> {
return _attachments.isEmpty return _attachments.isEmpty
? Container() ? Container()
: LimitedBox( : LimitedBox(
maxHeight: 76.0, maxHeight: 76.0,
child: ListView( child: ListView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
children: _attachments children: _attachments
.map( .map(
(attachment) => Padding( (attachment) => Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
child: Stack( child: Stack(
children: <Widget>[ children: <Widget>[
AspectRatio( AspectRatio(
aspectRatio: 1.0, aspectRatio: 1.0,
child: Container( child: Container(
height: 50, height: 50,
width: 50, width: 50,
child: _buildAttachment(attachment), child: _buildAttachment(attachment),
), ),
), ),
_buildRemoveButton(attachment), _buildRemoveButton(attachment),
attachment.uploaded attachment.uploaded
? SizedBox() ? SizedBox()
: Positioned.fill( : Positioned.fill(
child: Center( child: Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
),
),
),
],
),
), ),
), ),
), )
], .toList(),
),
), ),
), );
)
.toList(),
),
);
} }
Positioned _buildRemoveButton(_SendingAttachment attachment) { Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -966,7 +972,7 @@ class MessageInputState extends State<MessageInput> {
Widget _buildAttachment(_SendingAttachment attachment) { Widget _buildAttachment(_SendingAttachment attachment) {
if (widget.attachmentThumbnailBuilders if (widget.attachmentThumbnailBuilders
?.containsKey(attachment.attachment.type) == ?.containsKey(attachment.attachment.type) ==
true) { true) {
return widget.attachmentThumbnailBuilders[attachment.attachment.type]( return widget.attachmentThumbnailBuilders[attachment.attachment.type](
context, context,
@@ -979,14 +985,14 @@ class MessageInputState extends State<MessageInput> {
case 'giphy': case 'giphy':
return attachment.file != null return attachment.file != null
? Image.memory( ? Image.memory(
attachment.file.bytes, attachment.file.bytes,
fit: BoxFit.cover, fit: BoxFit.cover,
) )
: Image.network( : Image.network(
attachment.attachment.imageUrl ?? attachment.attachment.imageUrl ??
attachment.attachment.thumbUrl, attachment.attachment.thumbUrl,
fit: BoxFit.cover, fit: BoxFit.cover,
); );
break; break;
case 'video': case 'video':
return Container( return Container(
@@ -1032,7 +1038,7 @@ class MessageInputState extends State<MessageInput> {
child: InkWell( child: InkWell(
child: Padding( child: Padding(
padding: padding:
EdgeInsets.only(left: 8.0, right: padding, top: 8.0, bottom: 8.0), EdgeInsets.only(left: 8.0, right: padding, top: 8.0, bottom: 8.0),
child: Icon( child: Icon(
StreamIcons.attach, StreamIcons.attach,
color: Color(0xFF000000).withAlpha(128), color: Color(0xFF000000).withAlpha(128),
@@ -1232,10 +1238,10 @@ class MessageInputState extends State<MessageInput> {
} }
Future<String> _uploadAttachment( Future<String> _uploadAttachment(
PlatformFile file, PlatformFile file,
DefaultAttachmentTypes type, DefaultAttachmentTypes type,
Channel channel, Channel channel,
) async { ) async {
String url; String url;
if (type == DefaultAttachmentTypes.image) { if (type == DefaultAttachmentTypes.image) {
if (widget.doImageUploadRequest != null) { if (widget.doImageUploadRequest != null) {
@@ -1282,19 +1288,19 @@ class MessageInputState extends State<MessageInput> {
Widget _buildIdleSendButton(BuildContext context) { Widget _buildIdleSendButton(BuildContext context) {
return IconTheme( return IconTheme(
data: data:
StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme, StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: Center( child: Center(
child: InkWell( child: InkWell(
onTap: () { onTap: () {
sendMessage(); sendMessage();
}, },
child: Icon( child: Icon(
_getIdleSendIcon(), _getIdleSendIcon(),
color: Colors.grey, color: Colors.grey,
), ),
)), )),
), ),
); );
} }
@@ -1302,7 +1308,7 @@ class MessageInputState extends State<MessageInput> {
Widget _buildSendButton(BuildContext context) { Widget _buildSendButton(BuildContext context) {
return IconTheme( return IconTheme(
data: data:
StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme, StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
child: Center( child: Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
@@ -1382,7 +1388,7 @@ class MessageInputState extends State<MessageInput> {
text: text, text: text,
attachments: _getAttachments(attachments).toList(), attachments: _getAttachments(attachments).toList(),
mentionedUsers: mentionedUsers:
_mentionedUsers.where((u) => text.contains('@${u.name}')).toList(), _mentionedUsers.where((u) => text.contains('@${u.name}')).toList(),
); );
} else { } else {
message = (widget.initialMessage ?? Message()).copyWith( message = (widget.initialMessage ?? Message()).copyWith(
@@ -1390,7 +1396,7 @@ class MessageInputState extends State<MessageInput> {
text: text, text: text,
attachments: _getAttachments(attachments).toList(), attachments: _getAttachments(attachments).toList(),
mentionedUsers: mentionedUsers:
_mentionedUsers.where((u) => text.contains('@${u.name}')).toList(), _mentionedUsers.where((u) => text.contains('@${u.name}')).toList(),
showInChannel: widget.parentMessage != null ? _sendAsDm : null, showInChannel: widget.parentMessage != null ? _sendAsDm : null,
); );
} }
@@ -1404,9 +1410,9 @@ class MessageInputState extends State<MessageInput> {
sendingFuture = channel.sendMessage(message); sendingFuture = channel.sendMessage(message);
} else { } else {
sendingFuture = StreamChat.of(context).client.updateMessage( sendingFuture = StreamChat.of(context).client.updateMessage(
message, message,
channel.cid, channel.cid,
); );
} }
return sendingFuture.then((resp) { return sendingFuture.then((resp) {