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

Merge pull request #166 from GetStream/feature/chat-info

Browse Source 
feat: Added chat info page
This commit is contained in:
Salvatore Giordano
2020-12-10 11:03:45 +01:00
committed by GitHub
parent e80a30dca4 d97f7ecebf
commit da4bc14679
5 changed files with 708 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/channel_header.dart
+22 -1
View File
@@ -5,8 +5,10 @@ import 'package:stream_chat_flutter/src/channel_info.dart';
import 'package:stream_chat_flutter/src/channel_name.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import '../stream_chat_flutter.dart';
import './channel_name.dart';
import 'channel_image.dart';
import 'chat_info_screen.dart';
import 'stream_channel.dart';
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header.png)
@@ -97,7 +99,26 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
padding: const EdgeInsets.only(right: 10.0),
child: Center(
child: ChannelImage(
onTap: onImageTap,
onTap: onImageTap ??
() {
var currentUser = StreamChat.of(context).user;
var otherUser = channel.state.members.firstWhere(
(element) => element.user.id != currentUser.id);
if (channel.memberCount == 2) {
if (otherUser != null) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StreamChannel(
channel: channel,
child: ChatInfoScreen(
user: otherUser.user,
),
)));
}
}
},
),
),
),
lib/src/chat_info_screen.dart
+641
View File
@@ -0,0 +1,641 @@
import 'package:emojis/emojis.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jiffy/jiffy.dart';
import '../stream_chat_flutter.dart';
/// Detail screen for a 1:1 chat correspondence
class ChatInfoScreen extends StatefulWidget {
/// User in consideration
final User user;
const ChatInfoScreen({Key key, this.user}) : super(key: key);
@override
_ChatInfoScreenState createState() => _ChatInfoScreenState();
}
class _ChatInfoScreenState extends State<ChatInfoScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFe6e6e6),
body: ListView(
children: [
_buildUserHeader(),
SizedBox(
height: 8.0,
),
_buildOptionListTiles(),
SizedBox(
height: 8.0,
),
_buildDeleteListTile(),
],
),
);
}
Widget _buildUserHeader() {
return Material(
color: Colors.white,
child: SafeArea(
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: UserAvatar(
user: widget.user,
constraints: BoxConstraints(
maxWidth: 72.0,
maxHeight: 72.0,
),
borderRadius: BorderRadius.circular(36.0),
showOnlineStatus: false,
),
),
//SizedBox(height: 4.0),
Text(
widget.user.name,
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 7.0),
_buildConnectedTitleState(),
SizedBox(height: 15.0),
_OptionListTile(
title: '@user',
trailing: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
widget.user.name,
style: TextStyle(
color: Colors.black.withOpacity(0.5), fontSize: 16.0),
),
),
onTap: () {},
),
],
),
Positioned(
top: 21,
left: 16,
child: InkWell(
child: StreamSvgIcon.left(),
onTap: () {
Navigator.of(context).pop();
},
),
),
],
),
),
);
}
Widget _buildOptionListTiles() {
var channel = StreamChannel.of(context);
return Column(
children: [
// _OptionListTile(
// title: 'Notifications',
// leading: StreamSvgIcon.Icon_notification(
// size: 24.0,
// color: Colors.black.withOpacity(0.5),
// ),
// trailing: CupertinoSwitch(
// value: true,
// onChanged: (val) {},
// ),
// onTap: () {},
// ),
StreamBuilder<bool>(
stream: StreamChannel.of(context).channel.isMutedStream,
builder: (context, snapshot) {
return _OptionListTile(
title: 'Mute user',
leading: StreamSvgIcon.mute(
size: 23.0,
color: Colors.black.withOpacity(0.5),
),
trailing: snapshot.data == null
? CircularProgressIndicator()
: CupertinoSwitch(
value: snapshot.data,
onChanged: (val) {
if (snapshot.data) {
channel.channel.unmute();
} else {
channel.channel.mute();
}
},
),
onTap: () {},
);
}),
// _OptionListTile(
// title: 'Block User',
// leading: StreamSvgIcon.Icon_user_delete(
// size: 24.0,
// color: Colors.black.withOpacity(0.5),
// ),
// trailing: CupertinoSwitch(
// value: widget.user.banned,
// onChanged: (val) {
// if (widget.user.banned) {
// channel.channel.shadowBan(widget.user.id, {});
// } else {
// channel.channel.unbanUser(widget.user.id);
// }
// },
// ),
// onTap: () {},
// ),
_OptionListTile(
title: '615 Photos & Videos',
leading: StreamSvgIcon.pictures(
size: 32.0,
color: Colors.black.withOpacity(0.5),
),
trailing: StreamSvgIcon.right(),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => _MediaDisplayScreen()));
},
),
_OptionListTile(
title: '8 Files',
leading: StreamSvgIcon.files(
size: 32.0,
color: Colors.black.withOpacity(0.5),
),
trailing: StreamSvgIcon.right(),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => _FileDisplayScreen()));
},
),
StreamBuilder<List<Channel>>(
stream: StreamChat.of(context).client.queryChannels(
filter: {
r'$and': [
{
'members': {
r'$in': [widget.user.id],
},
},
{
'members': {
r'$in': [StreamChat.of(context).user.id],
},
}
],
},
),
builder: (context, snapshot) {
return _OptionListTile(
title:
'${snapshot.data == null ? '0' : snapshot.data.length} Shared groups',
leading: StreamSvgIcon.Icon_group(
size: 24.0,
color: Colors.black.withOpacity(0.5),
),
trailing: StreamSvgIcon.right(),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => _SharedGroupsScreen(
StreamChat.of(context).user, widget.user)));
},
);
}),
],
);
}
Widget _buildDeleteListTile() {
return _OptionListTile(
title: 'Delete',
leading: StreamSvgIcon.delete(
color: Colors.red,
size: 24.0,
),
onTap: () {
_showDeleteDialog();
},
titleColor: Colors.red,
);
}
void _showDeleteDialog() {
var channel = StreamChannel.of(context).channel;
showModalBottomSheet(
backgroundColor: Colors.white,
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
)),
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 26.0,
),
StreamSvgIcon.delete(
color: Colors.red,
),
SizedBox(
height: 26.0,
),
Text(
'Delete Conversation',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
SizedBox(
height: 7.0,
),
Text('Are you sure you want to delete this conversation?'),
SizedBox(
height: 36.0,
),
Container(
color: Color(0xffe6e6e6),
height: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlatButton(
child: Text(
'CANCEL',
style: TextStyle(
color: Colors.black.withOpacity(0.5),
fontWeight: FontWeight.w400),
),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: Text(
'DELETE',
style: TextStyle(
color: Colors.red, fontWeight: FontWeight.w400),
),
onPressed: () {
channel.delete().then((value) {
Navigator.pop(context);
Navigator.pop(context);
Navigator.pop(context);
});
},
),
],
),
],
);
});
}
Widget _buildConnectedTitleState() {
var alternativeWidget;
final otherMember = widget.user;
if (otherMember != null) {
if (otherMember.online) {
alternativeWidget = Text(
'Online',
style: TextStyle(color: Colors.black.withOpacity(0.5)),
);
} else {
alternativeWidget = Text(
'Last seen ${Jiffy(otherMember.lastActive).fromNow()}',
style: TextStyle(color: Colors.black.withOpacity(0.5)),
);
}
}
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (widget.user.online)
Material(
type: MaterialType.circle,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
constraints: BoxConstraints.tightFor(
width: 28,
height: 12,
),
child: Material(
shape: CircleBorder(),
color: Color(0xff20E070),
),
),
color: Colors.white,
),
alternativeWidget,
],
);
}
}
class _OptionListTile extends StatelessWidget {
final String title;
final StreamSvgIcon leading;
final Widget trailing;
final VoidCallback onTap;
final Color titleColor;
_OptionListTile({
this.title,
this.leading,
this.trailing,
this.onTap,
this.titleColor,
});
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
color: Color(0xffe6e6e6),
height: 2.0,
),
Material(
color: Colors.white,
child: Container(
height: 56.0,
child: InkWell(
onTap: onTap,
child: Row(
children: [
if (leading != null)
Expanded(
child: Center(child: leading),
),
if (leading == null)
SizedBox(
width: 16.0,
),
Expanded(
flex: 4,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.w600, color: titleColor),
)),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Align(
alignment: Alignment.centerRight,
child: trailing ?? Container(),
),
),
),
],
),
),
),
),
],
);
}
}
class _SharedGroupsScreen extends StatefulWidget {
final User mainUser;
final User otherUser;
_SharedGroupsScreen(this.mainUser, this.otherUser);
@override
__SharedGroupsScreenState createState() => __SharedGroupsScreenState();
}
class __SharedGroupsScreenState extends State<_SharedGroupsScreen> {
@override
Widget build(BuildContext context) {
var chat = StreamChat.of(context);
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Theme.of(context).brightness,
elevation: 1,
centerTitle: true,
title: Text(
'Shared Groups',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
leading: Center(
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
child: StreamSvgIcon.left(
color: Colors.black,
size: 24.0,
),
width: 24.0,
height: 24.0,
),
),
),
backgroundColor: StreamChatTheme.of(context).primaryColor,
),
body: StreamBuilder<List<Channel>>(
stream: chat.client.queryChannels(
filter: {
r'$and': [
{
'members': {
r'$in': [widget.otherUser.id],
},
},
{
'members': {
r'$in': [widget.mainUser.id],
},
}
],
},
),
builder: (context, snapshot) {
if (snapshot.data == null) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, position) {
return StreamChannel(
channel: snapshot.data[position],
child: _buildListTile(snapshot.data[position]),
);
},
);
},
),
);
}
Widget _buildListTile(Channel channel) {
var extraData = channel.extraData;
var members = channel.state.members;
var textStyle = TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold);
return Container(
height: 64.0,
child: LayoutBuilder(builder: (context, constraints) {
String title;
if (extraData['name'] == null) {
final otherMembers = members.where(
(member) => member.userId != StreamChat.of(context).user.id);
if (otherMembers.isNotEmpty) {
final maxWidth = constraints.maxWidth;
final maxChars = maxWidth / textStyle.fontSize;
var currentChars = 0;
final currentMembers = <Member>[];
otherMembers.forEach((element) {
final newLength = currentChars + element.user.name.length;
if (newLength < maxChars) {
currentChars = newLength;
currentMembers.add(element);
}
});
final exceedingMembers =
otherMembers.length - currentMembers.length;
title =
'${currentMembers.map((e) => e.user.name).join(', ')} ${exceedingMembers > 0 ? '+ $exceedingMembers' : ''}';
} else {
title = 'No title';
}
} else {
title = extraData['name'];
}
return Column(
children: [
Expanded(
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ChannelImage(
channel: channel,
constraints:
BoxConstraints(maxWidth: 40.0, maxHeight: 40.0),
),
),
Expanded(
child: Text(
title,
style: textStyle,
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${channel.memberCount} members',
style: TextStyle(color: Colors.black.withOpacity(0.5)),
),
)
],
),
),
Container(
height: 1.0,
color: Color(0xffe6e6e6),
),
],
);
}),
);
}
}
class _MediaDisplayScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Theme.of(context).brightness,
elevation: 1,
centerTitle: true,
title: Text(
'Photos & Videos',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
leading: Center(
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
child: StreamSvgIcon.left(
color: Colors.black,
size: 24.0,
),
width: 24.0,
height: 24.0,
),
),
),
backgroundColor: StreamChatTheme.of(context).primaryColor,
),
);
}
}
class _FileDisplayScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Theme.of(context).brightness,
elevation: 1,
centerTitle: true,
title: Text(
'Files',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
leading: Center(
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
child: StreamSvgIcon.left(
color: Colors.black,
size: 24.0,
),
width: 24.0,
height: 24.0,
),
),
),
backgroundColor: StreamChatTheme.of(context).primaryColor,
),
);
}
}
lib/src/stream_svg_icon.dart
+36
View File
@@ -721,4 +721,40 @@ class StreamSvgIcon extends StatelessWidget {
height: size,
);
}
factory StreamSvgIcon.Icon_group({
double size,
Color color,
}) {
return StreamSvgIcon(
assetName: 'Icon_group.svg',
color: color,
width: size,
height: size,
);
}
factory StreamSvgIcon.Icon_notification({
double size,
Color color,
}) {
return StreamSvgIcon(
assetName: 'Icon_notification.svg',
color: color,
width: size,
height: size,
);
}
factory StreamSvgIcon.Icon_user_delete({
double size,
Color color,
}) {
return StreamSvgIcon(
assetName: 'Icon_user_delete.svg',
color: color,
width: size,
height: size,
);
}
}
lib/svgs/Icon_group.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11ZM12 9C13.1046 9 14 8.10457 14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9ZM6.5 4C4.567 4 3 5.567 3 7.5C3 9.433 4.567 11 6.5 11C7.05228 11 7.5 10.5523 7.5 10C7.5 9.44772 7.05228 9 6.5 9C5.67157 9 5 8.32843 5 7.5C5 6.67157 5.67157 6 6.5 6C7.05228 6 7.5 5.55228 7.5 5C7.5 4.44772 7.05228 4 6.5 4ZM5 19C5 15.134 8.13401 12 12 12C15.866 12 19 15.134 19 19C19 19.397 18.9669 19.7869 18.903 20.1671C18.8115 20.7118 18.2958 21.0791 17.7511 20.9876C17.2065 20.8961 16.8391 20.3804 16.9306 19.8357C16.9762 19.5646 17 19.2855 17 19C17 16.2386 14.7614 14 12 14C9.23858 14 7 16.2386 7 19C7 19.2864 7.02397 19.5664 7.06981 19.8383C7.16161 20.3829 6.79454 20.8988 6.24994 20.9906C5.70533 21.0824 5.18943 20.7154 5.09763 20.1708C5.03335 19.7894 5 19.3982 5 19ZM4.85402 13.7725C5.28304 13.4247 5.34889 12.7949 5.0011 12.3659C4.6533 11.9369 4.02357 11.8711 3.59455 12.2188C2.01345 13.5006 1 15.4618 1 17.659C1 18.0572 1.03335 18.4484 1.09763 18.8297C1.18943 19.3743 1.70533 19.7414 2.24994 19.6496C2.79454 19.5578 3.16161 19.0419 3.06981 18.4973C3.02397 18.2253 3 17.9453 3 17.659C3 16.0903 3.72123 14.6908 4.85402 13.7725ZM21.5 7.5C21.5 5.567 19.933 4 18 4C17.4477 4 17 4.44772 17 5C17 5.55228 17.4477 6 18 6C18.8284 6 19.5 6.67157 19.5 7.5C19.5 8.32843 18.8284 9 18 9C17.4477 9 17 9.44772 17 10C17 10.5523 17.4477 11 18 11C19.933 11 21.5 9.433 21.5 7.5ZM19.3703 13.7725C18.9413 13.4247 18.8755 12.7949 19.2233 12.3659C19.5711 11.9369 20.2008 11.8711 20.6298 12.2188C22.2109 13.5006 23.2244 15.4618 23.2244 17.659C23.2244 18.0572 23.191 18.4484 23.1267 18.8297C23.0349 19.3743 22.519 19.7414 21.9744 19.6496C21.4298 19.5578 21.0628 19.0419 21.1546 18.4973C21.2004 18.2253 21.2244 17.9453 21.2244 17.659C21.2244 16.0903 20.5031 14.6908 19.3703 13.7725Z" fill="#006CFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

lib/svgs/Icon_notification.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 16V11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11V16H16ZM12 5C8.68629 5 6 7.68629 6 11V18H18V11C18 7.68629 15.3137 5 12 5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 17C4 16.4477 4.44771 16 5 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H5C4.44771 18 4 17.5523 4 17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 19C10 20.1046 10.8954 21 12 21C13.1046 21 14 20.1046 14 19H10Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 795 B