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

fix: Added confirmation dialogs and fixed alignment

Browse Source
This commit is contained in:
Deven Joshi
2020-12-31 16:32:45 +05:30
parent 2026058d30
commit ca6bd62084
5 changed files with 210 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/main.dart
-26
View File
@@ -373,9 +373,6 @@ class _ChannelListPageState extends State<ChannelListPage> {
limit: 20, limit: 20,
), ),
channelWidget: ChannelPage(), channelWidget: ChannelPage(),
onChannelLongPress: (channel) {
_showChannelDetailsModal(channel);
},
), ),
), ),
), ),
@@ -386,29 +383,6 @@ class _ChannelListPageState extends State<ChannelListPage> {
), ),
); );
} }
void _showChannelDetailsModal(Channel channel) {
showModalBottomSheet(
context: context,
builder: (context) {
return StreamChannel(
child: ChannelActionsModal(
onViewInfoTap: () {
// TODO: Go to group info screen when PR is merged
},
),
channel: channel);
},
isScrollControlled: true,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
),
);
}
} }
class ChannelPageArgs { class ChannelPageArgs {
lib/src/channel_actions_modal.dart
-197
View File
@@ -1,197 +0,0 @@
import 'package:flutter/material.dart';
import '../stream_chat_flutter.dart';
import 'channel_info.dart';
import 'option_list_tile.dart';
class ChannelActionsModal extends StatefulWidget {
VoidCallback onViewInfoTap;
ChannelActionsModal({this.onViewInfoTap});
@override
_ChannelActionsModalState createState() => _ChannelActionsModalState();
}
class _ChannelActionsModalState extends State<ChannelActionsModal> {
@override
Widget build(BuildContext context) {
var channel = StreamChannel.of(context).channel;
return Material(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
),
child: FutureBuilder<QueryMembersResponse>(
future: StreamChannel.of(context).channel.queryMembers(
filter: {},
),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
height: 100.0,
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
),
);
}
var userAsMember = snapshot.data.members
.firstWhere((e) => e.user.id == StreamChat.of(context).user.id);
var isOwner = userAsMember.role == 'owner';
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 24.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: ChannelName(
textStyle: TextStyle(
fontSize: 16.0,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
),
SizedBox(
height: 5.0,
),
ChannelInfo(
showTypingIndicator: false,
channel: StreamChannel.of(context).channel,
textStyle:
StreamChatTheme.of(context).channelPreviewTheme.subtitle,
),
SizedBox(
height: 17.0,
),
if (channel.isDistinct && channel.memberCount == 2)
Column(
children: [
UserAvatar(
user: snapshot.data.members
.firstWhere((e) => e.user.id != userAsMember.user.id)
.user,
constraints: BoxConstraints(
maxHeight: 64.0,
maxWidth: 64.0,
),
borderRadius: BorderRadius.circular(32.0),
),
SizedBox(
height: 6.0,
),
Text(
snapshot.data.members
.firstWhere((e) => e.user.id != userAsMember.user.id)
.user
.name,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
if (!(channel.isDistinct && channel.memberCount == 2))
Container(
height: 94.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.members.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
children: [
UserAvatar(
user: snapshot.data.members[index].user,
constraints: BoxConstraints(
maxHeight: 64.0,
maxWidth: 64.0,
),
borderRadius: BorderRadius.circular(32.0),
),
SizedBox(
height: 6.0,
),
Text(
snapshot.data.members[index].user.name,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
);
},
),
),
SizedBox(
height: 24,
),
OptionListTile(
leading: StreamSvgIcon.user(
color: Color(0xff7a7a7a),
),
title: 'View Info',
onTap: widget.onViewInfoTap,
),
if (!channel.isDistinct)
OptionListTile(
leading: StreamSvgIcon.userRemove(
color: Color(0xff7a7a7a),
),
title: 'Leave Group',
onTap: () async {
var channel = StreamChannel.of(context).channel;
await channel
.removeMembers([StreamChat.of(context).user.id]);
Navigator.pop(context);
},
),
if (isOwner)
OptionListTile(
leading: StreamSvgIcon.delete(
color: Colors.red,
),
title: 'Delete Conversation',
titleColor: Colors.red,
onTap: () async {
var channel = StreamChannel.of(context).channel;
await channel.delete();
Navigator.pop(context);
},
),
OptionListTile(
leading: StreamSvgIcon.close_small(
color: Color(0xff7a7a7a),
),
title: 'Cancel',
onTap: () {
Navigator.pop(context);
},
),
],
);
},
),
);
}
}
lib/src/channel_bottom_sheet.dart
+158 -142
View File
@@ -1,127 +1,182 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/utils.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import '../stream_chat_flutter.dart';
import 'channel_info.dart'; import 'channel_info.dart';
import 'channel_name.dart'; import 'option_list_tile.dart';
import 'stream_chat.dart';
import 'stream_chat_theme.dart';
import 'user_avatar.dart';
class ChannelBottomSheet extends StatelessWidget { class ChannelBottomSheet extends StatefulWidget {
const ChannelBottomSheet({ VoidCallback onViewInfoTap;
Key key,
}) : super(key: key); ChannelBottomSheet({this.onViewInfoTap});
@override
_ChannelBottomSheetState createState() => _ChannelBottomSheetState();
}
class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final channel = StreamChannel.of(context).channel; var channel = StreamChannel.of(context).channel;
return SafeArea(
child: Padding( var members = channel.state.members;
padding: const EdgeInsets.all(8.0),
var userAsMember =
members.firstWhere((e) => e.user.id == StreamChat.of(context).user.id);
var isOwner = userAsMember.role == 'owner';
return Material(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, children: [
children: <Widget>[ SizedBox(
Padding( height: 24.0,
padding: const EdgeInsets.symmetric(
vertical: 2.0,
), ),
child: Center( Padding(
child: StreamChannel( padding: const EdgeInsets.symmetric(horizontal: 16.0),
showLoading: false,
channel: channel,
child: ChannelName( child: ChannelName(
textStyle: textStyle: TextStyle(
StreamChatTheme.of(context).channelPreviewTheme.title, fontSize: 16.0,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
), ),
), ),
), ),
SizedBox(
height: 5.0,
), ),
Padding( ChannelInfo(
padding: const EdgeInsets.symmetric( showTypingIndicator: false,
vertical: 2.0, channel: StreamChannel.of(context).channel,
textStyle: StreamChatTheme.of(context).channelPreviewTheme.subtitle,
), ),
child: Center( SizedBox(
child: ChannelInfo( height: 17.0,
channel: channel,
textStyle:
StreamChatTheme.of(context).channelPreviewTheme.subtitle,
), ),
if (channel.isDistinct && channel.memberCount == 2)
Column(
children: [
UserAvatar(
user: members
.firstWhere((e) => e.user.id != userAsMember.user.id)
.user,
constraints: BoxConstraints(
maxHeight: 64.0,
maxWidth: 64.0,
), ),
borderRadius: BorderRadius.circular(32.0),
), ),
Padding( SizedBox(
padding: const EdgeInsets.symmetric( height: 6.0,
vertical: 15.0,
), ),
child: Center( Text(
child: StreamBuilder<List<Member>>( members
stream: channel.state.membersStream.map((event) => event .firstWhere((e) => e.user.id != userAsMember.user.id)
.where((m) => m.userId != StreamChat.of(context).user.id) .user
.toList()), .name,
initialData: channel.state.members style: TextStyle(
.where((m) => m.userId != StreamChat.of(context).user.id) fontSize: 12.0,
.toList(), fontWeight: FontWeight.w600,
builder: _buildMembers,
), ),
maxLines: 1,
overflow: TextOverflow.ellipsis,
), ),
],
), ),
Divider(), if (!(channel.isDistinct && channel.memberCount == 2))
if (channel.isGroup && !channel.isDistinct) Container(
ListTile( height: 94.0,
leading: StreamSvgIcon.userRemove( child: ListView.builder(
size: 24, scrollDirection: Axis.horizontal,
color: Color(0xff7A7A7A), itemCount: members.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
children: [
UserAvatar(
user: members[index].user,
constraints: BoxConstraints(
maxHeight: 64.0,
maxWidth: 64.0,
), ),
title: Text( borderRadius: BorderRadius.circular(32.0),
'Leave Group',
style: TextStyle(fontWeight: FontWeight.bold),
), ),
onTap: () async { SizedBox(
final confirm = await showConfirmationDialog( height: 6.0,
context, ),
title: 'Leave Group', Text(
okText: 'LEAVE', members[index].user.name,
question: 'Are you sure you want to leave this group?', style: TextStyle(
cancelText: 'CANCEL', fontSize: 12.0,
icon: StreamSvgIcon.userRemove( fontWeight: FontWeight.w600,
color: Colors.red, ),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
), ),
); );
if (confirm == true) {
await channel
.removeMembers([StreamChat.of(context).user.id]);
Navigator.pop(context);
}
}, },
), ),
if ([
'admin',
'owner',
].contains(channel.state.members
.firstWhere((m) => m.userId == channel.client.state.user.id,
orElse: () => null)
?.role))
ListTile(
leading: StreamSvgIcon.delete(
color: Color(0xFFFF3742),
size: 24,
), ),
title: Text( SizedBox(
'Delete chat', height: 17.0,
style: TextStyle(
color: Color(0xFFFF3742),
), ),
OptionListTile(
leading: StreamSvgIcon.user(
color: Color(0xff7a7a7a),
), ),
title: 'View Info',
onTap: widget.onViewInfoTap,
),
if (!channel.isDistinct)
OptionListTile(
leading: StreamSvgIcon.userRemove(
color: Color(0xff7a7a7a),
),
title: 'Leave Group',
onTap: () async { onTap: () async {
_showLeaveDialog();
},
),
if (isOwner)
OptionListTile(
leading: StreamSvgIcon.delete(
color: Colors.red,
),
title: 'Delete Conversation',
titleColor: Colors.red,
onTap: () async {
_showDeleteDialog();
},
),
OptionListTile(
leading: StreamSvgIcon.close_small(
color: Color(0xff7a7a7a),
),
title: 'Cancel',
onTap: () {
Navigator.pop(context);
},
),
],
),
);
}
void _showDeleteDialog() async {
final res = await showConfirmationDialog( final res = await showConfirmationDialog(
context, context,
title: 'Delete Conversation', title: 'Delete Conversation',
okText: 'DELETE', okText: 'DELETE',
question: question: 'Are you sure you want to delete this conversation?',
'Are you sure you want to delete this conversation?',
cancelText: 'CANCEL', cancelText: 'CANCEL',
icon: StreamSvgIcon.delete( icon: StreamSvgIcon.delete(
color: Colors.red, color: Colors.red,
@@ -129,65 +184,26 @@ class ChannelBottomSheet extends StatelessWidget {
); );
var channel = StreamChannel.of(context).channel; var channel = StreamChannel.of(context).channel;
if (res == true) { if (res == true) {
await channel.delete().then((value) { await channel.delete();
Navigator.pop(context); Navigator.pop(context);
});
} }
},
),
],
),
),
);
} }
Widget _buildMembers( void _showLeaveDialog() async {
BuildContext context, final res = await showConfirmationDialog(
AsyncSnapshot<List<Member>> snapshot, context,
) { title: 'Leave conversation',
if (snapshot.data.isEmpty) { okText: 'LEAVE',
return SizedBox(); question: 'Are you sure you want to leave this conversation?',
cancelText: 'CANCEL',
icon: StreamSvgIcon.userRemove(
color: Colors.red,
),
);
var channel = StreamChannel.of(context).channel;
if (res == true) {
await channel.removeMembers([StreamChat.of(context).user.id]);
Navigator.pop(context);
} }
return Container(
height: 83,
child: ListView(
padding: EdgeInsets.only(
left: (MediaQuery.of(context).size.width / 2) - 48,
),
scrollDirection: Axis.horizontal,
children: snapshot.data.map((m) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Column(
children: <Widget>[
UserAvatar(
showOnlineStatus: true,
user: m.user,
borderRadius: BorderRadius.circular(32),
constraints: BoxConstraints.tight(
Size.square(64),
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Text(
m.user.name?.split(' ')?.elementAt(0),
style: StreamChatTheme.of(context)
.channelPreviewTheme
.title
.copyWith(
fontSize: 12,
),
),
),
],
),
);
}).toList(),
),
);
} }
} }
lib/src/channel_list_view.dart
+21 -1
View File
@@ -560,7 +560,27 @@ class _ChannelListViewState extends State<ChannelListView>
context: context, context: context,
builder: (context) { builder: (context) {
return StreamChannel( return StreamChannel(
child: ChannelBottomSheet(), child: ChannelBottomSheet(
onViewInfoTap: () {
if (channel.memberCount == 2 &&
channel.isDistinct) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StreamChannel(
channel: channel,
child: ChatInfoScreen(
user:
channel.state.members.first.user,
),
),
),
);
}
// TODO: Add group screen
},
),
channel: channel, channel: channel,
); );
}, },
lib/stream_chat_flutter.dart
+1 -1
View File
@@ -43,4 +43,4 @@ export 'src/message_search_bloc.dart';
export 'src/message_search_item.dart'; export 'src/message_search_item.dart';
export 'src/message_search_list_view.dart'; export 'src/message_search_list_view.dart';
export 'src/unread_indicator.dart'; export 'src/unread_indicator.dart';
export 'src/channel_actions_modal.dart'; export 'src/chat_info_screen.dart';