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

feat: Added sharing and added actions for buttons

Browse Source
This commit is contained in:
Deven Joshi
2020-11-19 21:01:17 +05:30
parent dd829e18bc
commit 412c721ab8
7 changed files with 397 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/full_screen_image.dart
+4
View File
@@ -11,6 +11,7 @@ import '../stream_chat_flutter.dart';
class FullScreenImage extends StatefulWidget { class FullScreenImage extends StatefulWidget {
/// The url of the image /// The url of the image
final List<String> urls; final List<String> urls;
final Message message;
final int startIndex; final int startIndex;
final String userName; final String userName;
@@ -20,6 +21,7 @@ class FullScreenImage extends StatefulWidget {
const FullScreenImage({ const FullScreenImage({
Key key, Key key,
@required this.urls, @required this.urls,
this.message,
this.startIndex = 0, this.startIndex = 0,
this.userName = '', this.userName = '',
this.sentAt, this.sentAt,
@@ -109,11 +111,13 @@ class _FullScreenImageState extends State<FullScreenImage>
onBackPressed: () { onBackPressed: () {
Navigator.of(context).pop(); Navigator.of(context).pop();
}, },
message: widget.message,
), ),
ImageFooter( ImageFooter(
currentPage: _currentPage, currentPage: _currentPage,
totalPages: widget.urls.length, totalPages: widget.urls.length,
urls: widget.urls, urls: widget.urls,
message: widget.message,
), ),
], ],
), ),
lib/src/giphy_attachment.dart
+14 -2
View File
@@ -64,14 +64,20 @@ class GiphyAttachment extends StatelessWidget {
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
final channel = StreamChannel.of(context).channel;
Navigator.push(context, Navigator.push(context,
MaterialPageRoute(builder: (_) { MaterialPageRoute(builder: (_) {
return FullScreenImage( return StreamChannel(
channel: channel,
child: FullScreenImage(
urls: [attachment.imageUrl ?? urls: [attachment.imageUrl ??
attachment.assetUrl ?? attachment.assetUrl ??
attachment.thumbUrl], attachment.thumbUrl],
userName: message.user.name, userName: message.user.name,
sentAt: message.createdAt, sentAt: message.createdAt,
message: message,
),
); );
})); }));
}, },
@@ -299,13 +305,19 @@ class GiphyAttachment extends StatelessWidget {
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
final channel = StreamChannel.of(context).channel;
Navigator.push(context, MaterialPageRoute(builder: (_) { Navigator.push(context, MaterialPageRoute(builder: (_) {
return FullScreenImage( return StreamChannel(
channel: channel,
child: FullScreenImage(
urls: [attachment.imageUrl ?? urls: [attachment.imageUrl ??
attachment.assetUrl ?? attachment.assetUrl ??
attachment.thumbUrl], attachment.thumbUrl],
userName: message.user.name, userName: message.user.name,
sentAt: message.createdAt, sentAt: message.createdAt,
message: message,
),
); );
})); }));
}, },
lib/src/image_actions_modal.dart
+30 -12
View File
@@ -6,10 +6,11 @@ import '../stream_chat_flutter.dart';
import 'stream_icons.dart'; import 'stream_icons.dart';
class ImageActionsModal extends StatelessWidget { class ImageActionsModal extends StatelessWidget {
final Message message;
final String userName; final String userName;
final String sentAt; final String sentAt;
ImageActionsModal({this.userName, this.sentAt}); ImageActionsModal({this.message, this.userName, this.sentAt});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -31,10 +32,8 @@ class ImageActionsModal extends StatelessWidget {
Colors.transparent, Colors.transparent,
], ],
stops: [0.0, 0.4], stops: [0.0, 0.4],
) )),
), )),
)
),
_buildPage(context), _buildPage(context),
], ],
), ),
@@ -70,8 +69,10 @@ class ImageActionsModal extends StatelessWidget {
), ),
Text( Text(
sentAt, sentAt,
style: style: StreamChatTheme.of(context)
StreamChatTheme.of(context).channelPreviewTheme.subtitle.copyWith(color: Colors.white.withOpacity(0.5)), .channelPreviewTheme
.subtitle
.copyWith(color: Colors.white.withOpacity(0.5)),
), ),
], ],
), ),
@@ -104,11 +105,26 @@ class ImageActionsModal extends StatelessWidget {
children: ListTile.divideTiles( children: ListTile.divideTiles(
context: context, context: context,
tiles: [ tiles: [
_buildButton(context, 'Reply', StreamIcons.curve_line_down_left, () {}), _buildButton(context, 'Reply',
_buildButton(context, 'Show in Chat', StreamIcons.eye, () {}), StreamIcons.curve_line_down_left, () {}),
_buildButton(context, 'Save Image', StreamIcons.save_1, () {}), _buildButton(context, 'Show in Chat', StreamIcons.eye,
() {
Navigator.pop(context);
Navigator.pop(context);
}),
_buildButton(
context, 'Save Image', StreamIcons.save_1, () {}),
_buildButton(context, 'Copy', StreamIcons.copy, () {}), _buildButton(context, 'Copy', StreamIcons.copy, () {}),
_buildButton(context, 'Delete', StreamIcons.delete, () {}, color: Colors.red), if (StreamChat.of(context).user.id == message.user.id)
_buildButton(context, 'Delete', StreamIcons.delete,
() {
Navigator.pop(context);
Navigator.pop(context);
StreamChat.of(context).client.deleteMessage(
message,
StreamChannel.of(context).channel.cid,
);
}, color: Colors.red),
], ],
).toList(), ).toList(),
), ),
@@ -121,7 +137,9 @@ class ImageActionsModal extends StatelessWidget {
); );
} }
Widget _buildButton(context, String title, IconData iconData, VoidCallback onTap, {Color color}) { Widget _buildButton(
context, String title, IconData iconData, VoidCallback onTap,
{Color color}) {
var titleStyle = TextStyle( var titleStyle = TextStyle(
fontSize: 14.5, fontSize: 14.5,
color: Colors.black, color: Colors.black,
lib/src/image_attachment.dart
+7 -1
View File
@@ -43,12 +43,18 @@ class ImageAttachment extends StatelessWidget {
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (_) { builder: (_) {
return FullScreenImage( final channel = StreamChannel.of(context).channel;
return StreamChannel(
channel: channel,
child: FullScreenImage(
urls: [attachment.imageUrl ?? urls: [attachment.imageUrl ??
attachment.assetUrl ?? attachment.assetUrl ??
attachment.thumbUrl], attachment.thumbUrl],
userName: message.user.name, userName: message.user.name,
sentAt: message.createdAt, sentAt: message.createdAt,
message: message,
),
); );
}, },
), ),
lib/src/image_footer.dart
+92 -35
View File
@@ -11,6 +11,7 @@ import 'package:stream_chat_flutter/src/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import 'package:stream_chat_flutter/src/stream_icons.dart'; import 'package:stream_chat_flutter/src/stream_icons.dart';
import 'package:stream_chat_flutter/src/user_avatar.dart'; import 'package:stream_chat_flutter/src/user_avatar.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import './channel_name.dart'; import './channel_name.dart';
import 'channel_image.dart'; import 'channel_image.dart';
@@ -31,6 +32,7 @@ class ImageFooter extends StatefulWidget {
final int totalPages; final int totalPages;
final List<String> urls; final List<String> urls;
final Message message;
/// Creates a channel header /// Creates a channel header
ImageFooter({ ImageFooter({
@@ -41,6 +43,7 @@ class ImageFooter extends StatefulWidget {
this.currentPage = 0, this.currentPage = 0,
this.totalPages = 0, this.totalPages = 0,
this.urls, this.urls,
this.message,
}) : preferredSize = Size.fromHeight(kToolbarHeight), }) : preferredSize = Size.fromHeight(kToolbarHeight),
super(key: key); super(key: key);
@@ -57,7 +60,7 @@ class _ImageFooterState extends State<ImageFooter> {
TextEditingController _searchController = TextEditingController(); TextEditingController _searchController = TextEditingController();
TextEditingController _messageController = TextEditingController(); TextEditingController _messageController = TextEditingController();
List<User> selectedUsers = []; List<User> _selectedUsers = [];
@override @override
void initState() { void initState() {
@@ -134,8 +137,8 @@ class _ImageFooterState extends State<ImageFooter> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topRight: Radius.circular(8.0), topRight: Radius.circular(16.0),
topLeft: Radius.circular(8.0), topLeft: Radius.circular(16.0),
)), )),
child: Stack( child: Stack(
children: [ children: [
@@ -196,17 +199,20 @@ class _ImageFooterState extends State<ImageFooter> {
} }
Widget _buildShareModal(context) { Widget _buildShareModal(context) {
final channel = StreamChannel.of(context).channel;
showDialog( showDialog(
context: context, context: context,
builder: (context) { builder: (context) {
print('KEY ${MediaQuery.of(context).viewInsets.bottom}'); return StreamChannel(
print(MediaQuery.of(context).viewInsets.bottom == 0.0); channel: channel,
return Scaffold( child: Scaffold(
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
body: StatefulBuilder(builder: (modalContext, modalSetState) { body: StatefulBuilder(builder: (modalContext, modalSetState) {
return Align( return Align(
alignment: alignment: _userSearchMode
_userSearchMode ? Alignment.topCenter : Alignment.bottomCenter, ? Alignment.topCenter
: Alignment.bottomCenter,
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
@@ -216,10 +222,12 @@ class _ImageFooterState extends State<ImageFooter> {
children: [ children: [
ListView( ListView(
children: [ children: [
if (!_userSearchMode && MediaQuery.of(context).viewInsets.bottom == 0.0) if (!_userSearchMode &&
MediaQuery.of(context).viewInsets.bottom == 0.0)
GestureDetector( GestureDetector(
child: Container( child: Container(
height: MediaQuery.of(modalContext).size.height / 2, height:
MediaQuery.of(modalContext).size.height / 2,
color: Colors.transparent, color: Colors.transparent,
), ),
onTapUp: (val) { onTapUp: (val) {
@@ -248,10 +256,10 @@ class _ImageFooterState extends State<ImageFooter> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
bottomRight: bottomRight: Radius.circular(
Radius.circular(_userSearchMode ? 16.0 : 0.0), _userSearchMode ? 16.0 : 0.0),
bottomLeft: bottomLeft: Radius.circular(
Radius.circular(_userSearchMode ? 16.0 : 0.0), _userSearchMode ? 16.0 : 0.0),
), ),
), ),
child: FutureBuilder<QueryUsersResponse>( child: FutureBuilder<QueryUsersResponse>(
@@ -263,7 +271,8 @@ class _ImageFooterState extends State<ImageFooter> {
); );
} }
var filteredData = snapshot.data.users.toList(); var filteredData =
snapshot.data.users.toList();
if (_userSearchMode && if (_userSearchMode &&
_searchController.text.length > 0) { _searchController.text.length > 0) {
@@ -281,7 +290,7 @@ class _ImageFooterState extends State<ImageFooter> {
itemBuilder: (context, position) { itemBuilder: (context, position) {
var user = filteredData[position]; var user = filteredData[position];
var isUserSelected = var isUserSelected =
selectedUsers.contains(user); _selectedUsers.contains(user);
return Padding( return Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
@@ -299,28 +308,33 @@ class _ImageFooterState extends State<ImageFooter> {
child: UserAvatar( child: UserAvatar(
onTap: (user) { onTap: (user) {
if (isUserSelected) { if (isUserSelected) {
selectedUsers.remove(user); _selectedUsers
.remove(user);
} else { } else {
selectedUsers.add(user); _selectedUsers.add(user);
} }
modalSetState(() {}); modalSetState(() {});
}, },
user: user, user: user,
constraints: constraints:
BoxConstraints.tightFor( BoxConstraints.tightFor(
height: height: isUserSelected
isUserSelected ? 56 : 64, ? 56
width: : 64,
isUserSelected ? 56 : 64, width: isUserSelected
? 56
: 64,
), ),
borderRadius: borderRadius:
BorderRadius.circular(32), BorderRadius.circular(
32),
), ),
), ),
], ],
), ),
Padding( Padding(
padding: const EdgeInsets.all(8.0), padding:
const EdgeInsets.all(8.0),
child: Text( child: Text(
user.name, user.name,
style: Theme.of(context) style: Theme.of(context)
@@ -345,7 +359,7 @@ class _ImageFooterState extends State<ImageFooter> {
), ),
], ],
), ),
if (!_userSearchMode && selectedUsers.isEmpty) if (!_userSearchMode && _selectedUsers.isEmpty)
Align( Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: Container( child: Container(
@@ -359,7 +373,8 @@ class _ImageFooterState extends State<ImageFooter> {
child: Text( child: Text(
'Save to Photos', 'Save to Photos',
style: TextStyle( style: TextStyle(
color: StreamChatTheme.of(modalContext).accentColor, color: StreamChatTheme.of(modalContext)
.accentColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@@ -367,13 +382,14 @@ class _ImageFooterState extends State<ImageFooter> {
), ),
), ),
), ),
if (!_userSearchMode && selectedUsers.isNotEmpty) if (!_userSearchMode && _selectedUsers.isNotEmpty)
_buildShareTextInputSection(modalSetState), _buildShareTextInputSection(modalSetState),
], ],
), ),
), ),
); );
}), }),
),
); );
}, },
); );
@@ -519,8 +535,7 @@ class _ImageFooterState extends State<ImageFooter> {
borderRadius: BorderRadius.circular(32.0), borderRadius: BorderRadius.circular(32.0),
borderSide: BorderSide( borderSide: BorderSide(
color: Colors.black.withOpacity(0.16), color: Colors.black.withOpacity(0.16),
) )),
),
contentPadding: EdgeInsets.symmetric(vertical: 12.0), contentPadding: EdgeInsets.symmetric(vertical: 12.0),
), ),
), ),
@@ -531,28 +546,31 @@ class _ImageFooterState extends State<ImageFooter> {
? CrossFadeState.showFirst ? CrossFadeState.showFirst
: CrossFadeState.showSecond, : CrossFadeState.showSecond,
firstChild: IconTheme( firstChild: IconTheme(
data: data: StreamChatTheme.of(context)
StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme, .channelTheme
.messageInputButtonIconTheme,
child: Center( child: Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: InkWell( child: InkWell(
onTap: () { onTap: () {
// sendMessage(); sendMessage();
}, },
child: Transform.rotate( child: Transform.rotate(
angle: -pi / 2, angle: -pi / 2,
child: Icon( child: Icon(
StreamIcons.send_message, StreamIcons.send_message,
color: StreamChatTheme.of(context).accentColor, color: StreamChatTheme.of(context).accentColor,
),), ),
),
), ),
), ),
), ),
), ),
secondChild: IconTheme( secondChild: IconTheme(
data: data: StreamChatTheme.of(context)
StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme, .channelTheme
.messageInputButtonIconTheme,
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: Center( child: Center(
@@ -587,4 +605,43 @@ class _ImageFooterState extends State<ImageFooter> {
], ],
); );
} }
/// Sends the current message
void sendMessage() async {
var text = _messageController.text.trim();
final attachments = widget.message.attachments;
_messageController.clear();
final client = StreamChat.of(context).client;
for(var user in _selectedUsers) {
var c = client.channel('messaging', extraData: {
'members': [
user.id,
StreamChat.of(context).user.id,
],
});
await c.create();
Future sendingFuture;
Message message;
message = (Message()).copyWith(
text: text,
attachments: attachments,
mentionedUsers: [],
showInChannel: false,
);
sendingFuture = c.sendMessage(message);
await sendingFuture;
}
Navigator.pop(context);
Navigator.pop(context);
}
} }
lib/src/image_group.dart
+8 -1
View File
@@ -4,6 +4,7 @@ import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/full_screen_image.dart'; import 'package:stream_chat_flutter/src/full_screen_image.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
class ImageGroup extends StatelessWidget { class ImageGroup extends StatelessWidget {
const ImageGroup({ const ImageGroup({
@@ -107,14 +108,20 @@ class ImageGroup extends StatelessWidget {
BuildContext context, [ BuildContext context, [
int index, int index,
]) { ]) {
final channel = StreamChannel.of(context).channel;
Navigator.push( Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (context) => builder: (context) =>
FullScreenImage(urls: images.map((e) => e.imageUrl ?? e.thumbUrl ?? e.assetUrl).toList(), StreamChannel(
channel: channel,
child: FullScreenImage(urls: images.map((e) => e.imageUrl ?? e.thumbUrl ?? e.assetUrl).toList(),
startIndex: index, startIndex: index,
userName: message.user.name, userName: message.user.name,
sentAt: message.createdAt, sentAt: message.createdAt,
message: message,
),
), ),
), ),
); );
lib/src/image_header.dart
+10 -1
View File
@@ -25,12 +25,15 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
/// Callback to call when the image is tapped. /// Callback to call when the image is tapped.
final VoidCallback onImageTap; final VoidCallback onImageTap;
final Message message;
final String userName; final String userName;
final String sentAt; final String sentAt;
/// Creates a channel header /// Creates a channel header
ImageHeader({ ImageHeader({
Key key, Key key,
this.message,
this.showBackButton = true, this.showBackButton = true,
this.onBackPressed, this.onBackPressed,
this.onTitleTap, this.onTitleTap,
@@ -103,12 +106,18 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
final Size preferredSize; final Size preferredSize;
void _showMessageActionModalBottomSheet(BuildContext context) { void _showMessageActionModalBottomSheet(BuildContext context) {
final channel = StreamChannel.of(context).channel;
showDialog( showDialog(
context: context, context: context,
builder: (context) { builder: (context) {
return ImageActionsModal( return StreamChannel(
channel: channel,
child: ImageActionsModal(
userName: userName, userName: userName,
sentAt: sentAt, sentAt: sentAt,
message: message,
),
); );
}); });
} }