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

feat: Fixed issues with alignment in group info screen and dark theme

Browse Source
This commit is contained in:
Deven Joshi
2021-01-01 18:35:25 +05:30
parent b11543ea7f
commit e837b9b0e5
5 changed files with 198 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/chat_info_screen.dart
+55 -23
View File
@@ -76,6 +76,7 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
SizedBox(height: 15.0), SizedBox(height: 15.0),
OptionListTile( OptionListTile(
title: '@${widget.user.id}', title: '@${widget.user.id}',
tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
trailing: Padding( trailing: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text( child: Text(
@@ -131,13 +132,18 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
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.whiteSnow,
title: 'Mute user', title: 'Mute user',
leading: StreamSvgIcon.mute( titleTextStyle: StreamChatTheme.of(context).textTheme.body,
size: 23.0, leading: Padding(
color: StreamChatTheme.of(context) padding: const EdgeInsets.symmetric(horizontal: 16.0),
.colorTheme child: StreamSvgIcon.mute(
.black size: 24.0,
.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
), ),
trailing: snapshot.data == null trailing: snapshot.data == null
? CircularProgressIndicator() ? CircularProgressIndicator()
@@ -174,10 +180,15 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
// ), // ),
OptionListTile( OptionListTile(
title: 'Photos & Videos', title: 'Photos & Videos',
leading: StreamSvgIcon.pictures( tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
size: 32.0, titleTextStyle: StreamChatTheme.of(context).textTheme.body,
color: leading: Padding(
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: StreamSvgIcon.pictures(
size: 32.0,
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
),
), ),
trailing: StreamSvgIcon.right(), trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
@@ -206,12 +217,19 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
), ),
OptionListTile( OptionListTile(
title: 'Files', title: 'Files',
leading: StreamSvgIcon.files( tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
size: 32.0, titleTextStyle: StreamChatTheme.of(context).textTheme.body,
color: leading: Padding(
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: StreamSvgIcon.files(
size: 32.0,
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
),
),
trailing: StreamSvgIcon.right(
color: StreamChatTheme.of(context).colorTheme.grey,
), ),
trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
final channel = StreamChannel.of(context).channel; final channel = StreamChannel.of(context).channel;
@@ -238,12 +256,19 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
), ),
OptionListTile( OptionListTile(
title: 'Shared groups', title: 'Shared groups',
leading: StreamSvgIcon.Icon_group( tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
size: 24.0, titleTextStyle: StreamChatTheme.of(context).textTheme.body,
color: leading: Padding(
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: StreamSvgIcon.Icon_group(
size: 24.0,
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
),
),
trailing: StreamSvgIcon.right(
color: StreamChatTheme.of(context).colorTheme.grey,
), ),
trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
Navigator.push( Navigator.push(
context, context,
@@ -259,9 +284,16 @@ class _ChatInfoScreenState extends State<ChatInfoScreen> {
Widget _buildDeleteListTile() { Widget _buildDeleteListTile() {
return OptionListTile( return OptionListTile(
title: 'Delete Conversation', title: 'Delete Conversation',
leading: StreamSvgIcon.delete( tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
color: StreamChatTheme.of(context).colorTheme.accentRed, titleTextStyle: StreamChatTheme.of(context).textTheme.body.copyWith(
size: 24.0, color: StreamChatTheme.of(context).colorTheme.accentRed,
),
leading: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: StreamSvgIcon.delete(
color: StreamChatTheme.of(context).colorTheme.accentRed,
size: 24.0,
),
), ),
onTap: () { onTap: () {
_showDeleteDialog(); _showDeleteDialog();
example/lib/group_info_screen.dart
+84 -63
View File
@@ -70,8 +70,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
} }
return Scaffold( return Scaffold(
backgroundColor: backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
StreamChatTheme.of(context).colorTheme.greyGainsboro,
appBar: AppBar( appBar: AppBar(
elevation: 1.0, elevation: 1.0,
toolbarHeight: 56.0, toolbarHeight: 56.0,
@@ -259,7 +258,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
horizontal: 21.0, vertical: 12.0), horizontal: 21.0, vertical: 12.0),
child: StreamSvgIcon.down( child: StreamSvgIcon.down(
color: color:
StreamChatTheme.of(context).colorTheme.white, StreamChatTheme.of(context).colorTheme.grey,
), ),
), ),
Expanded( Expanded(
@@ -306,19 +305,18 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
child: Row( child: Row(
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(7.0),
child: Text( child: Text(
'NAME', 'NAME',
style: TextStyle( style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
.colorTheme .colorTheme
.black .black
.withOpacity(0.5), .withOpacity(0.5)),
fontSize: 12.0),
), ),
), ),
SizedBox( SizedBox(
width: 9.0, width: 7.0,
), ),
Expanded( Expanded(
child: TextField( child: TextField(
@@ -326,15 +324,15 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
controller: _nameController, controller: _nameController,
cursorColor: StreamChatTheme.of(context).colorTheme.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: StreamChatTheme.of(context)
fontWeight: FontWeight.bold, .textTheme
color: StreamChatTheme.of(context) .bodyBold
.colorTheme .copyWith(
.black color: StreamChatTheme.of(context)
.withOpacity(0.5), .colorTheme
), .black
), .withOpacity(0.5))),
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
height: 0.82, height: 0.82,
@@ -409,12 +407,16 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
separatorColor: separatorColor:
StreamChatTheme.of(context).colorTheme.greyGainsboro, StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Mute group', title: 'Mute group',
leading: StreamSvgIcon.mute( titleTextStyle: StreamChatTheme.of(context).textTheme.body,
size: 23.0, leading: Padding(
color: StreamChatTheme.of(context) padding: const EdgeInsets.symmetric(horizontal: 16.0),
.colorTheme child: StreamSvgIcon.mute(
.black size: 24.0,
.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
), ),
trailing: snapshot.data == null trailing: snapshot.data == null
? CircularProgressIndicator() ? CircularProgressIndicator()
@@ -435,12 +437,18 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro, separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Photos & Videos', title: 'Photos & Videos',
leading: StreamSvgIcon.pictures( titleTextStyle: StreamChatTheme.of(context).textTheme.body,
size: 32.0, leading: Padding(
color: padding: const EdgeInsets.symmetric(horizontal: 12.0),
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), child: StreamSvgIcon.pictures(
size: 32.0,
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
),
),
trailing: StreamSvgIcon.right(
color: StreamChatTheme.of(context).colorTheme.grey,
), ),
trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
var channel = StreamChannel.of(context).channel; var channel = StreamChannel.of(context).channel;
@@ -469,12 +477,18 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro, separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Files', title: 'Files',
leading: StreamSvgIcon.files( titleTextStyle: StreamChatTheme.of(context).textTheme.body,
size: 32.0, leading: Padding(
color: padding: const EdgeInsets.symmetric(horizontal: 12.0),
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), child: StreamSvgIcon.files(
size: 32.0,
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
),
),
trailing: StreamSvgIcon.right(
color: StreamChatTheme.of(context).colorTheme.grey,
), ),
trailing: StreamSvgIcon.right(),
onTap: () { onTap: () {
var channel = StreamChannel.of(context).channel; var channel = StreamChannel.of(context).channel;
@@ -505,10 +519,16 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
separatorColor: separatorColor:
StreamChatTheme.of(context).colorTheme.greyGainsboro, StreamChatTheme.of(context).colorTheme.greyGainsboro,
title: 'Leave Group', title: 'Leave Group',
leading: StreamSvgIcon.userRemove( titleTextStyle: StreamChatTheme.of(context).textTheme.body,
size: 24.0, leading: Padding(
color: padding: const EdgeInsets.symmetric(horizontal: 16.0),
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), child: StreamSvgIcon.userRemove(
size: 24.0,
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
), ),
trailing: Container( trailing: Container(
height: 24.0, height: 24.0,
@@ -767,36 +787,37 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
); );
}, },
), ),
_buildModalListTile( if (StreamChat.of(context).user.id != user.id)
context, _buildModalListTile(
StreamSvgIcon.message( context,
color: StreamChatTheme.of(context).colorTheme.grey, StreamSvgIcon.message(
size: 24.0, color: StreamChatTheme.of(context).colorTheme.grey,
), size: 24.0,
'Message', ),
() async { 'Message',
var client = StreamChat.of(context).client; () 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: ChannelPage(), child: ChannelPage(),
),
), ),
), );
); },
}, ),
),
if (!channel.isDistinct && if (!channel.isDistinct &&
StreamChat.of(context).user.id != user.id && StreamChat.of(context).user.id != user.id &&
isUserAdmin) isUserAdmin)
lib/src/channel_bottom_sheet.dart
+20 -8
View File
@@ -129,16 +129,22 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
height: 24.0, height: 24.0,
), ),
OptionListTile( OptionListTile(
leading: StreamSvgIcon.user( leading: Padding(
color: StreamChatTheme.of(context).colorTheme.grey, padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: StreamSvgIcon.user(
color: StreamChatTheme.of(context).colorTheme.grey,
),
), ),
title: 'View Info', title: 'View Info',
onTap: widget.onViewInfoTap, onTap: widget.onViewInfoTap,
), ),
if (!channel.isDistinct) if (!channel.isDistinct)
OptionListTile( OptionListTile(
leading: StreamSvgIcon.userRemove( leading: Padding(
color: StreamChatTheme.of(context).colorTheme.grey, padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: StreamSvgIcon.userRemove(
color: StreamChatTheme.of(context).colorTheme.grey,
),
), ),
title: 'Leave Group', title: 'Leave Group',
onTap: () async { onTap: () async {
@@ -147,8 +153,11 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
), ),
if (isOwner) if (isOwner)
OptionListTile( OptionListTile(
leading: StreamSvgIcon.delete( leading: Padding(
color: StreamChatTheme.of(context).colorTheme.accentRed, padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: StreamSvgIcon.delete(
color: StreamChatTheme.of(context).colorTheme.accentRed,
),
), ),
title: 'Delete Conversation', title: 'Delete Conversation',
titleColor: StreamChatTheme.of(context).colorTheme.accentRed, titleColor: StreamChatTheme.of(context).colorTheme.accentRed,
@@ -157,8 +166,11 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
}, },
), ),
OptionListTile( OptionListTile(
leading: StreamSvgIcon.close_small( leading: Padding(
color: StreamChatTheme.of(context).colorTheme.grey, padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: StreamSvgIcon.close_small(
color: StreamChatTheme.of(context).colorTheme.grey,
),
), ),
title: 'Cancel', title: 'Cancel',
onTap: () { onTap: () {
lib/src/image_footer.dart
+26 -16
View File
@@ -112,13 +112,14 @@ class _ImageFooterState extends State<ImageFooter> {
context: context, context: context,
removeTop: true, removeTop: true,
child: BottomAppBar( child: BottomAppBar(
color: StreamChatTheme.of(context).colorTheme.white,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
IconButton( IconButton(
icon: StreamSvgIcon.icon_SHARE( icon: StreamSvgIcon.icon_SHARE(
size: 24.0, size: 24.0,
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
onPressed: () { onPressed: () {
_buildShareModal(context); _buildShareModal(context);
@@ -134,11 +135,8 @@ class _ImageFooterState extends State<ImageFooter> {
children: <Widget>[ children: <Widget>[
Text( Text(
'${widget.currentPage + 1} of ${widget.totalPages}', '${widget.currentPage + 1} of ${widget.totalPages}',
style: TextStyle( style:
fontSize: 16.0, StreamChatTheme.of(context).textTheme.headlineBold,
fontWeight: FontWeight.w700,
color: Colors.black,
),
), ),
], ],
), ),
@@ -146,7 +144,7 @@ class _ImageFooterState extends State<ImageFooter> {
), ),
IconButton( IconButton(
icon: StreamSvgIcon.Icon_grid( icon: StreamSvgIcon.Icon_grid(
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
onPressed: () { onPressed: () {
_buildPhotosModal(context); _buildPhotosModal(context);
@@ -337,7 +335,10 @@ class _ImageFooterState extends State<ImageFooter> {
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(
@@ -436,32 +437,41 @@ class _ImageFooterState extends State<ImageFooter> {
), ),
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(
prefixIconConstraints: BoxConstraints.tight(Size(40, 24)), prefixIconConstraints: BoxConstraints.tight(Size(40, 24)),
prefixIcon: Padding( prefixIcon: Padding(
padding: const EdgeInsets.only(left: 8, right: 8), padding: const EdgeInsets.only(left: 8, right: 8),
child: StreamSvgIcon.search( child: StreamSvgIcon.search(
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
size: 24, size: 24,
), ),
), ),
hintText: 'Search', hintText: 'Search',
hintStyle: TextStyle( hintStyle: TextStyle(
color: Colors.black.withOpacity(0.5), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
fontSize: 14, fontSize: 14,
), ),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Colors.black.withOpacity(0.08), color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.08),
), ),
borderRadius: BorderRadius.circular(24), borderRadius: BorderRadius.circular(24),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(24.0), borderRadius: BorderRadius.circular(24.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,
@@ -500,7 +510,7 @@ class _ImageFooterState extends State<ImageFooter> {
padding: const EdgeInsets.symmetric(horizontal: 6.0), padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: IconButton( child: IconButton(
icon: StreamSvgIcon.search( icon: StreamSvgIcon.search(
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
iconSize: 24.0, iconSize: 24.0,
onPressed: () { onPressed: () {
@@ -517,7 +527,7 @@ class _ImageFooterState extends State<ImageFooter> {
style: TextStyle( style: TextStyle(
fontSize: 16.0, fontSize: 16.0,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
), ),
), ),
@@ -525,7 +535,7 @@ class _ImageFooterState extends State<ImageFooter> {
padding: const EdgeInsets.symmetric(horizontal: 6.0), padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: IconButton( child: IconButton(
icon: StreamSvgIcon.share_arrow( icon: StreamSvgIcon.share_arrow(
color: Colors.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
onPressed: () async { onPressed: () async {
final attachment = widget.mediaAttachments[widget.currentPage]; final attachment = widget.mediaAttachments[widget.currentPage];
lib/src/option_list_tile.dart
+13 -13
View File
@@ -4,12 +4,13 @@ import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
class OptionListTile extends StatelessWidget { class OptionListTile extends StatelessWidget {
final String title; final String title;
final StreamSvgIcon leading; final Widget leading;
final Widget trailing; final Widget trailing;
final VoidCallback onTap; final VoidCallback onTap;
final Color titleColor; final Color titleColor;
final Color tileColor; final Color tileColor;
final Color separatorColor; final Color separatorColor;
final TextStyle titleTextStyle;
OptionListTile({ OptionListTile({
this.title, this.title,
@@ -19,6 +20,7 @@ class OptionListTile extends StatelessWidget {
this.titleColor, this.titleColor,
this.tileColor, this.tileColor,
this.separatorColor, this.separatorColor,
this.titleTextStyle,
}); });
@override @override
@@ -38,10 +40,7 @@ class OptionListTile extends StatelessWidget {
onTap: onTap, onTap: onTap,
child: Row( child: Row(
children: [ children: [
if (leading != null) if (leading != null) Center(child: leading),
Expanded(
child: Center(child: leading),
),
if (leading == null) if (leading == null)
SizedBox( SizedBox(
width: 16.0, width: 16.0,
@@ -50,14 +49,15 @@ class OptionListTile extends StatelessWidget {
flex: 4, flex: 4,
child: Text( child: Text(
title, title,
style: titleColor == null style: titleTextStyle ??
? StreamChatTheme.of(context).textTheme.bodyBold (titleColor == null
: StreamChatTheme.of(context) ? StreamChatTheme.of(context).textTheme.bodyBold
.textTheme : StreamChatTheme.of(context)
.bodyBold .textTheme
.copyWith( .bodyBold
color: titleColor, .copyWith(
), color: titleColor,
)),
), ),
), ),
Expanded( Expanded(