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

fix: review fixes

Browse Source
This commit is contained in:
Deven Joshi
2020-12-31 21:14:11 +05:30
parent 08d07e4425
commit fe38ba8a56
4 changed files with 178 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/chat_info_screen.dart
+9 -6
View File
@@ -260,13 +260,13 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
return OptionListTile( return OptionListTile(
title: 'Delete Conversation', title: 'Delete Conversation',
leading: StreamSvgIcon.delete( leading: StreamSvgIcon.delete(
color: Colors.red, color: StreamChatTheme.of(context).colorTheme.accentRed,
size: 24.0, size: 24.0,
), ),
onTap: () { onTap: () {
_showDeleteDialog(); _showDeleteDialog();
}, },
titleColor: Colors.red, titleColor: StreamChatTheme.of(context).colorTheme.accentRed,
); );
} }
@@ -278,7 +278,7 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
question: 'Are you sure you want to delete this conversation?', question: 'Are you sure you want to delete this conversation?',
cancelText: 'CANCEL', cancelText: 'CANCEL',
icon: StreamSvgIcon.delete( icon: StreamSvgIcon.delete(
color: Colors.red, color: StreamChatTheme.of(context).colorTheme.accentRed,
), ),
); );
var channel = StreamChannel.of(context).channel; var channel = StreamChannel.of(context).channel;
@@ -416,14 +416,14 @@ class __SharedGroupsScreenState extends State<_SharedGroupsScreen> {
children: [ children: [
StreamSvgIcon.message( StreamSvgIcon.message(
size: 136.0, size: 136.0,
color: Color(0xffdbdbdb), color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
), ),
SizedBox(height: 16.0), SizedBox(height: 16.0),
Text( Text(
'No Shared Groups', 'No Shared Groups',
style: TextStyle( style: TextStyle(
fontSize: 14.0, fontSize: 14.0,
color: Color(0xff000000), color: StreamChatTheme.of(context).colorTheme.black,
), ),
), ),
SizedBox(height: 8.0), SizedBox(height: 8.0),
@@ -432,7 +432,10 @@ class __SharedGroupsScreenState extends State<_SharedGroupsScreen> {
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 14.0, fontSize: 14.0,
color: Color(0xff000000).withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
), ),
), ),
], ],
example/lib/group_info_screen.dart
+162 -88
View File
@@ -70,11 +70,11 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
var channel = StreamChannel.of(context); var channel = StreamChannel.of(context);
return Scaffold( return Scaffold(
backgroundColor: Color(0xffdbdbdb), backgroundColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
appBar: AppBar( appBar: AppBar(
elevation: 1.0, elevation: 1.0,
toolbarHeight: 56.0, toolbarHeight: 56.0,
backgroundColor: Colors.white, backgroundColor: StreamChatTheme.of(context).colorTheme.white,
leading: InkWell( leading: InkWell(
onTap: () { onTap: () {
Navigator.pop(context); Navigator.pop(context);
@@ -96,7 +96,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
?.map((e) => e.user) ?.map((e) => e.user)
?.toList()), ?.toList()),
style: TextStyle( style: TextStyle(
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
fontSize: 16, fontSize: 16,
), ),
maxLines: 1, maxLines: 1,
@@ -112,7 +112,10 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
return Text( return Text(
'${channel.channel.memberCount} Members, ${snapshot?.data?.members?.where((e) => e.user.online)?.length ?? 0} Online', '${channel.channel.memberCount} Members, ${snapshot?.data?.members?.where((e) => e.user.online)?.length ?? 0} Online',
style: TextStyle( style: TextStyle(
color: Colors.black.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
fontSize: 12.0, fontSize: 12.0,
), ),
); );
@@ -140,7 +143,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
_buildMembers(), _buildMembers(),
Container( Container(
height: 8.0, height: 8.0,
color: Color(0xffdbdbdb), color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
), ),
_buildNameTile(), _buildNameTile(),
_buildOptionListTiles(), _buildOptionListTiles(),
@@ -213,7 +216,10 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
_getLastSeen( _getLastSeen(
snapshot.data.members[position].user), snapshot.data.members[position].user),
style: TextStyle( style: TextStyle(
color: Colors.black.withOpacity(0.5)), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5)),
), ),
], ],
), ),
@@ -226,20 +232,25 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
? 'Owner' ? 'Owner'
: '', : '',
style: TextStyle( style: TextStyle(
color: Colors.black.withOpacity(0.5)), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5)),
), ),
), ),
], ],
), ),
Container( Container(
height: 1.0, height: 1.0,
color: Color(0xffdbdbdb), color: StreamChatTheme.of(context)
.colorTheme
.greyGainsboro,
), ),
], ],
), ),
), ),
), ),
color: Colors.white, color: StreamChatTheme.of(context).colorTheme.white,
); );
}, },
), ),
@@ -262,7 +273,9 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 21.0, vertical: 12.0), horizontal: 21.0, vertical: 12.0),
child: StreamSvgIcon.down( child: StreamSvgIcon.down(
color: Color(0xff7a7a7a), color: StreamChatTheme.of(context)
.colorTheme
.grey,
), ),
), ),
Expanded( Expanded(
@@ -272,8 +285,10 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
children: [ children: [
Text( Text(
'${snapshot.data.members.length - groupMemberListLength} more', '${snapshot.data.members.length - groupMemberListLength} more',
style: style: TextStyle(
TextStyle(color: Color(0xff7a7a7a)), color: StreamChatTheme.of(context)
.colorTheme
.grey),
), ),
], ],
), ),
@@ -283,7 +298,9 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
), ),
Container( Container(
height: 1.0, height: 1.0,
color: Color(0xffdbdbdb), color: StreamChatTheme.of(context)
.colorTheme
.greyGainsboro,
), ),
], ],
), ),
@@ -302,7 +319,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
var channelName = channel.extraData['name'] ?? ''; var channelName = channel.extraData['name'] ?? '';
return Material( return Material(
color: Colors.white, color: StreamChatTheme.of(context).colorTheme.white,
child: Container( child: Container(
height: 56.0, height: 56.0,
alignment: Alignment.center, alignment: Alignment.center,
@@ -313,7 +330,11 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
child: Text( child: Text(
'NAME', 'NAME',
style: TextStyle( style: TextStyle(
color: Colors.black.withOpacity(0.5), fontSize: 12.0), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
fontSize: 12.0),
), ),
), ),
SizedBox( SizedBox(
@@ -323,12 +344,15 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
child: TextField( child: TextField(
focusNode: _focusNode, focusNode: _focusNode,
controller: _nameController, controller: _nameController,
cursorColor: Colors.black, cursorColor: StreamChatTheme.of(context).colorTheme.black,
decoration: InputDecoration.collapsed( decoration: InputDecoration.collapsed(
hintText: 'Add a group name', hintText: 'Add a group name',
hintStyle: TextStyle( hintStyle: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.black.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
), ),
), ),
style: TextStyle( style: TextStyle(
@@ -395,7 +419,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
// title: 'Notifications', // title: 'Notifications',
// leading: StreamSvgIcon.Icon_notification( // leading: StreamSvgIcon.Icon_notification(
// size: 24.0, // size: 24.0,
// color: Colors.black.withOpacity(0.5), // color: StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
// ), // ),
// trailing: CupertinoSwitch( // trailing: CupertinoSwitch(
// value: true, // value: true,
@@ -407,10 +431,16 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
stream: StreamChannel.of(context).channel.isMutedStream, stream: StreamChannel.of(context).channel.isMutedStream,
builder: (context, snapshot) { builder: (context, snapshot) {
return OptionListTile( return OptionListTile(
tileColor: StreamChatTheme.of(context).colorTheme.white,
separatorColor:
StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Mute group', title: 'Mute group',
leading: StreamSvgIcon.mute( leading: StreamSvgIcon.mute(
size: 23.0, size: 23.0,
color: Colors.black.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
), ),
trailing: snapshot.data == null trailing: snapshot.data == null
? CircularProgressIndicator() ? CircularProgressIndicator()
@@ -428,10 +458,13 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
); );
}), }),
OptionListTile( OptionListTile(
tileColor: StreamChatTheme.of(context).colorTheme.white,
separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Photos & Videos', title: 'Photos & Videos',
leading: StreamSvgIcon.pictures( leading: StreamSvgIcon.pictures(
size: 32.0, size: 32.0,
color: Colors.black.withOpacity(0.5), color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
), ),
trailing: StreamSvgIcon.right(), trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
@@ -459,10 +492,13 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
}, },
), ),
OptionListTile( OptionListTile(
tileColor: StreamChatTheme.of(context).colorTheme.white,
separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Files', title: 'Files',
leading: StreamSvgIcon.files( leading: StreamSvgIcon.files(
size: 32.0, size: 32.0,
color: Colors.black.withOpacity(0.5), color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
), ),
trailing: StreamSvgIcon.right(), trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
@@ -491,10 +527,14 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
), ),
if (!channel.channel.isDistinct) if (!channel.channel.isDistinct)
OptionListTile( OptionListTile(
tileColor: StreamChatTheme.of(context).colorTheme.white,
separatorColor:
StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Leave Group', title: 'Leave Group',
leading: StreamSvgIcon.userRemove( leading: StreamSvgIcon.userRemove(
size: 24.0, size: 24.0,
color: Colors.black.withOpacity(0.5), color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
), ),
trailing: Container( trailing: Container(
height: 24.0, height: 24.0,
@@ -583,7 +623,9 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
padding: const EdgeInsets.all(24), padding: const EdgeInsets.all(24),
child: StreamSvgIcon.search( child: StreamSvgIcon.search(
size: 96, size: 96,
color: Colors.grey, color: StreamChatTheme.of(context)
.colorTheme
.grey,
), ),
), ),
Text( Text(
@@ -624,7 +666,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
Expanded( Expanded(
child: TextField( child: TextField(
controller: _searchController, controller: _searchController,
cursorColor: Colors.black, cursorColor: StreamChatTheme.of(context).colorTheme.black,
autofocus: true, autofocus: true,
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
@@ -633,19 +675,25 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
vertical: 2.0, horizontal: 6.0), vertical: 2.0, horizontal: 6.0),
child: StreamSvgIcon.search( child: StreamSvgIcon.search(
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
), ),
hintText: 'Search', hintText: 'Search',
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0), borderRadius: BorderRadius.circular(32.0),
borderSide: borderSide: BorderSide(
BorderSide(color: Colors.black.withOpacity(0.08)), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.08)),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0), borderRadius: BorderRadius.circular(32.0),
borderSide: borderSide: BorderSide(
BorderSide(color: Colors.black.withOpacity(0.08)), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.08)),
), ),
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
), ),
@@ -656,7 +704,10 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
), ),
IconButton( IconButton(
icon: StreamSvgIcon.close_small( icon: StreamSvgIcon.close_small(
color: Colors.black.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
), ),
onPressed: () { onPressed: () {
Navigator.pop(context); Navigator.pop(context);
@@ -679,6 +730,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
return StreamChannel( return StreamChannel(
channel: channel, channel: channel,
child: Material( child: Material(
color: StreamChatTheme.of(context).colorTheme.white,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@@ -713,37 +765,41 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
), ),
if (StreamChat.of(context).user.id != user.id) if (StreamChat.of(context).user.id != user.id)
_buildModalListTile( _buildModalListTile(
StreamSvgIcon.user( context,
color: Color(0xff7a7a7a), StreamSvgIcon.user(
size: 24.0, color: StreamChatTheme.of(context).colorTheme.grey,
), size: 24.0,
'View info', () async { ),
var client = StreamChat.of(context).client; 'View info',
() async {
var client = StreamChat.of(context).client;
var c = client.channel('messaging', extraData: { var c = client.channel('messaging', extraData: {
'members': [ 'members': [
user.id, user.id,
StreamChat.of(context).user.id, StreamChat.of(context).user.id,
], ],
}); });
await c.watch(); await c.watch();
await Navigator.push( await Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (context) => StreamChannel( builder: (context) => StreamChannel(
channel: c, channel: c,
child: ChatInfoScreen( child: ChatInfoScreen(
user: user, user: user,
),
), ),
), ),
), );
); },
}), ),
_buildModalListTile( _buildModalListTile(
context,
StreamSvgIcon.message( StreamSvgIcon.message(
color: Color(0xff7a7a7a), color: StreamChatTheme.of(context).colorTheme.grey,
size: 24.0, size: 24.0,
), ),
'Message', 'Message',
@@ -774,8 +830,9 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
StreamChat.of(context).user.id != user.id && StreamChat.of(context).user.id != user.id &&
isUserAdmin) isUserAdmin)
_buildModalListTile( _buildModalListTile(
context,
StreamSvgIcon.Icon_user_settings( StreamSvgIcon.Icon_user_settings(
color: Color(0xff7a7a7a), color: StreamChatTheme.of(context).colorTheme.grey,
size: 24.0, size: 24.0,
), ),
'Make Owner', () { 'Make Owner', () {
@@ -785,8 +842,9 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
StreamChat.of(context).user.id != user.id && StreamChat.of(context).user.id != user.id &&
isUserAdmin) isUserAdmin)
_buildModalListTile( _buildModalListTile(
context,
StreamSvgIcon.userRemove( StreamSvgIcon.userRemove(
color: Colors.red, color: StreamChatTheme.of(context).colorTheme.accentRed,
size: 24.0, size: 24.0,
), ),
'Remove From Group', () async { 'Remove From Group', () async {
@@ -795,10 +853,11 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
_memberQueryFuture = channel.queryMembers( _memberQueryFuture = channel.queryMembers(
filter: {}, filter: {},
); );
}, color: Colors.red), }, color: StreamChatTheme.of(context).colorTheme.accentRed),
_buildModalListTile( _buildModalListTile(
context,
StreamSvgIcon.close_small( StreamSvgIcon.close_small(
color: Color(0xff7a7a7a), color: StreamChatTheme.of(context).colorTheme.grey,
size: 24.0, size: 24.0,
), ),
'Cancel', () { 'Cancel', () {
@@ -829,12 +888,20 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
if (otherMember.online) { if (otherMember.online) {
alternativeWidget = Text( alternativeWidget = Text(
'Online', 'Online',
style: TextStyle(color: Colors.black.withOpacity(0.5)), style: TextStyle(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5)),
); );
} else { } else {
alternativeWidget = Text( alternativeWidget = Text(
'Last seen ${Jiffy(otherMember.lastActive).fromNow()}', 'Last seen ${Jiffy(otherMember.lastActive).fromNow()}',
style: TextStyle(color: Colors.black.withOpacity(0.5)), style: TextStyle(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5)),
); );
} }
} }
@@ -856,43 +923,50 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
color: Color(0xff20E070), color: Color(0xff20E070),
), ),
), ),
color: Colors.white, color: StreamChatTheme.of(context).colorTheme.white,
), ),
alternativeWidget, alternativeWidget,
], ],
); );
} }
Widget _buildModalListTile(Widget leading, String title, VoidCallback onTap, Widget _buildModalListTile(
{Color color = Colors.black}) { BuildContext context, Widget leading, String title, VoidCallback onTap,
{Color color}) {
color ??= StreamChatTheme.of(context).colorTheme.black;
return Material( return Material(
child: InkWell( color: StreamChatTheme.of(context).colorTheme.white,
onTap: onTap, child: InkWell(
child: Column( onTap: onTap,
children: [ child: Column(
Container( children: [
height: 1.0, Container(
color: Color(0xffdbdbdb), height: 1.0,
), color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
Container(
height: 64.0,
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: leading,
),
Expanded(
child: Text(
title,
style: TextStyle(color: color, fontWeight: FontWeight.bold),
))
],
), ),
), Container(
], height: 64.0,
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: leading,
),
Expanded(
child: Text(
title,
style:
TextStyle(color: color, fontWeight: FontWeight.bold),
),
)
],
),
),
],
),
), ),
)); );
} }
String _getChannelName(double width, {List<User> members}) { String _getChannelName(double width, {List<User> members}) {
example/lib/main.dart
+1 -1
View File
@@ -63,7 +63,7 @@ class MyApp extends StatelessWidget {
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
theme: ThemeData.light(), theme: ThemeData.light(),
darkTheme: ThemeData.dark(), darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system, themeMode: ThemeMode.dark,
onGenerateRoute: AppRoutes.generateRoute, onGenerateRoute: AppRoutes.generateRoute,
initialRoute: initialRoute:
client.state.user == null ? Routes.CHOOSE_USER : Routes.HOME, client.state.user == null ? Routes.CHOOSE_USER : Routes.HOME,
lib/src/option_list_tile.dart
+6 -2
View File
@@ -7,6 +7,8 @@ class OptionListTile extends StatelessWidget {
final Widget trailing; final Widget trailing;
final VoidCallback onTap; final VoidCallback onTap;
final Color titleColor; final Color titleColor;
final Color tileColor;
final Color separatorColor;
OptionListTile({ OptionListTile({
this.title, this.title,
@@ -14,6 +16,8 @@ class OptionListTile extends StatelessWidget {
this.trailing, this.trailing,
this.onTap, this.onTap,
this.titleColor, this.titleColor,
this.tileColor,
this.separatorColor,
}); });
@override @override
@@ -21,11 +25,11 @@ class OptionListTile extends StatelessWidget {
return Column( return Column(
children: [ children: [
Container( Container(
color: Color(0xffe6e6e6), color: separatorColor ?? Color(0xffe6e6e6),
height: 2.0, height: 2.0,
), ),
Material( Material(
color: Colors.white, color: tileColor ?? Colors.white,
child: Container( child: Container(
height: 56.0, height: 56.0,
child: InkWell( child: InkWell(