From e837b9b0e567f21e63b0b0de945551b14e607d31 Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Fri, 1 Jan 2021 18:35:25 +0530 Subject: [PATCH] feat: Fixed issues with alignment in group info screen and dark theme --- example/lib/chat_info_screen.dart | 78 ++++++++++----- example/lib/group_info_screen.dart | 147 ++++++++++++++++------------- lib/src/channel_bottom_sheet.dart | 28 ++++-- lib/src/image_footer.dart | 42 +++++---- lib/src/option_list_tile.dart | 26 ++--- 5 files changed, 198 insertions(+), 123 deletions(-) diff --git a/example/lib/chat_info_screen.dart b/example/lib/chat_info_screen.dart index 125c510f..d992e73b 100644 --- a/example/lib/chat_info_screen.dart +++ b/example/lib/chat_info_screen.dart @@ -76,6 +76,7 @@ class _ChatInfoScreenState extends State { SizedBox(height: 15.0), OptionListTile( title: '@${widget.user.id}', + tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, trailing: Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Text( @@ -131,13 +132,18 @@ class _ChatInfoScreenState extends State { stream: StreamChannel.of(context).channel.isMutedStream, builder: (context, snapshot) { return OptionListTile( + tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, title: 'Mute user', - leading: StreamSvgIcon.mute( - size: 23.0, - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.5), + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.mute( + size: 24.0, + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.5), + ), ), trailing: snapshot.data == null ? CircularProgressIndicator() @@ -174,10 +180,15 @@ class _ChatInfoScreenState extends State { // ), OptionListTile( title: 'Photos & Videos', - leading: StreamSvgIcon.pictures( - size: 32.0, - color: - StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), + tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + 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(), onTap: () { @@ -206,12 +217,19 @@ class _ChatInfoScreenState extends State { ), OptionListTile( title: 'Files', - leading: StreamSvgIcon.files( - size: 32.0, - color: - StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), + tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + 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: () { final channel = StreamChannel.of(context).channel; @@ -238,12 +256,19 @@ class _ChatInfoScreenState extends State { ), OptionListTile( title: 'Shared groups', - leading: StreamSvgIcon.Icon_group( - size: 24.0, - color: - StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), + tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + 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: () { Navigator.push( context, @@ -259,9 +284,16 @@ class _ChatInfoScreenState extends State { Widget _buildDeleteListTile() { return OptionListTile( title: 'Delete Conversation', - leading: StreamSvgIcon.delete( - color: StreamChatTheme.of(context).colorTheme.accentRed, - size: 24.0, + tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, + titleTextStyle: StreamChatTheme.of(context).textTheme.body.copyWith( + 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: () { _showDeleteDialog(); diff --git a/example/lib/group_info_screen.dart b/example/lib/group_info_screen.dart index fd866578..c044a23d 100644 --- a/example/lib/group_info_screen.dart +++ b/example/lib/group_info_screen.dart @@ -70,8 +70,7 @@ class _GroupInfoScreenState extends State { } return Scaffold( - backgroundColor: - StreamChatTheme.of(context).colorTheme.greyGainsboro, + backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow, appBar: AppBar( elevation: 1.0, toolbarHeight: 56.0, @@ -259,7 +258,7 @@ class _GroupInfoScreenState extends State { horizontal: 21.0, vertical: 12.0), child: StreamSvgIcon.down( color: - StreamChatTheme.of(context).colorTheme.white, + StreamChatTheme.of(context).colorTheme.grey, ), ), Expanded( @@ -306,19 +305,18 @@ class _GroupInfoScreenState extends State { child: Row( children: [ Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.all(7.0), child: Text( 'NAME', - style: TextStyle( + style: StreamChatTheme.of(context).textTheme.footnote.copyWith( color: StreamChatTheme.of(context) .colorTheme .black - .withOpacity(0.5), - fontSize: 12.0), + .withOpacity(0.5)), ), ), SizedBox( - width: 9.0, + width: 7.0, ), Expanded( child: TextField( @@ -326,15 +324,15 @@ class _GroupInfoScreenState extends State { controller: _nameController, cursorColor: StreamChatTheme.of(context).colorTheme.black, decoration: InputDecoration.collapsed( - hintText: 'Add a group name', - hintStyle: TextStyle( - fontWeight: FontWeight.bold, - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.5), - ), - ), + hintText: 'Add a group name', + hintStyle: StreamChatTheme.of(context) + .textTheme + .bodyBold + .copyWith( + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.5))), style: TextStyle( fontWeight: FontWeight.bold, height: 0.82, @@ -409,12 +407,16 @@ class _GroupInfoScreenState extends State { separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro, title: 'Mute group', - leading: StreamSvgIcon.mute( - size: 23.0, - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.5), + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.mute( + size: 24.0, + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.5), + ), ), trailing: snapshot.data == null ? CircularProgressIndicator() @@ -435,12 +437,18 @@ class _GroupInfoScreenState extends State { tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro, title: 'Photos & Videos', - leading: StreamSvgIcon.pictures( - size: 32.0, - color: - StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + 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( + color: StreamChatTheme.of(context).colorTheme.grey, ), - trailing: StreamSvgIcon.right(), onTap: () { var channel = StreamChannel.of(context).channel; @@ -469,12 +477,18 @@ class _GroupInfoScreenState extends State { tileColor: StreamChatTheme.of(context).colorTheme.whiteSnow, separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro, title: 'Files', - leading: StreamSvgIcon.files( - size: 32.0, - color: - StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + 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: () { var channel = StreamChannel.of(context).channel; @@ -505,10 +519,16 @@ class _GroupInfoScreenState extends State { separatorColor: StreamChatTheme.of(context).colorTheme.greyGainsboro, title: 'Leave Group', - leading: StreamSvgIcon.userRemove( - size: 24.0, - color: - StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5), + titleTextStyle: StreamChatTheme.of(context).textTheme.body, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.userRemove( + size: 24.0, + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.5), + ), ), trailing: Container( height: 24.0, @@ -767,36 +787,37 @@ class _GroupInfoScreenState extends State { ); }, ), - _buildModalListTile( - context, - StreamSvgIcon.message( - color: StreamChatTheme.of(context).colorTheme.grey, - size: 24.0, - ), - 'Message', - () async { - var client = StreamChat.of(context).client; + if (StreamChat.of(context).user.id != user.id) + _buildModalListTile( + context, + StreamSvgIcon.message( + color: StreamChatTheme.of(context).colorTheme.grey, + size: 24.0, + ), + 'Message', + () async { + var client = StreamChat.of(context).client; - var c = client.channel('messaging', extraData: { - 'members': [ - user.id, - StreamChat.of(context).user.id, - ], - }); + var c = client.channel('messaging', extraData: { + 'members': [ + user.id, + StreamChat.of(context).user.id, + ], + }); - await c.watch(); + await c.watch(); - await Navigator.push( - context, - MaterialPageRoute( - builder: (context) => StreamChannel( - channel: c, - child: ChannelPage(), + await Navigator.push( + context, + MaterialPageRoute( + builder: (context) => StreamChannel( + channel: c, + child: ChannelPage(), + ), ), - ), - ); - }, - ), + ); + }, + ), if (!channel.isDistinct && StreamChat.of(context).user.id != user.id && isUserAdmin) diff --git a/lib/src/channel_bottom_sheet.dart b/lib/src/channel_bottom_sheet.dart index d2c7eb04..3e9f6ec3 100644 --- a/lib/src/channel_bottom_sheet.dart +++ b/lib/src/channel_bottom_sheet.dart @@ -129,16 +129,22 @@ class _ChannelBottomSheetState extends State { height: 24.0, ), OptionListTile( - leading: StreamSvgIcon.user( - color: StreamChatTheme.of(context).colorTheme.grey, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.user( + color: StreamChatTheme.of(context).colorTheme.grey, + ), ), title: 'View Info', onTap: widget.onViewInfoTap, ), if (!channel.isDistinct) OptionListTile( - leading: StreamSvgIcon.userRemove( - color: StreamChatTheme.of(context).colorTheme.grey, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.userRemove( + color: StreamChatTheme.of(context).colorTheme.grey, + ), ), title: 'Leave Group', onTap: () async { @@ -147,8 +153,11 @@ class _ChannelBottomSheetState extends State { ), if (isOwner) OptionListTile( - leading: StreamSvgIcon.delete( - color: StreamChatTheme.of(context).colorTheme.accentRed, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.delete( + color: StreamChatTheme.of(context).colorTheme.accentRed, + ), ), title: 'Delete Conversation', titleColor: StreamChatTheme.of(context).colorTheme.accentRed, @@ -157,8 +166,11 @@ class _ChannelBottomSheetState extends State { }, ), OptionListTile( - leading: StreamSvgIcon.close_small( - color: StreamChatTheme.of(context).colorTheme.grey, + leading: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: StreamSvgIcon.close_small( + color: StreamChatTheme.of(context).colorTheme.grey, + ), ), title: 'Cancel', onTap: () { diff --git a/lib/src/image_footer.dart b/lib/src/image_footer.dart index c17a5bcf..11e62302 100644 --- a/lib/src/image_footer.dart +++ b/lib/src/image_footer.dart @@ -112,13 +112,14 @@ class _ImageFooterState extends State { context: context, removeTop: true, child: BottomAppBar( + color: StreamChatTheme.of(context).colorTheme.white, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( icon: StreamSvgIcon.icon_SHARE( size: 24.0, - color: Colors.black, + color: StreamChatTheme.of(context).colorTheme.black, ), onPressed: () { _buildShareModal(context); @@ -134,11 +135,8 @@ class _ImageFooterState extends State { children: [ Text( '${widget.currentPage + 1} of ${widget.totalPages}', - style: TextStyle( - fontSize: 16.0, - fontWeight: FontWeight.w700, - color: Colors.black, - ), + style: + StreamChatTheme.of(context).textTheme.headlineBold, ), ], ), @@ -146,7 +144,7 @@ class _ImageFooterState extends State { ), IconButton( icon: StreamSvgIcon.Icon_grid( - color: Colors.black, + color: StreamChatTheme.of(context).colorTheme.black, ), onPressed: () { _buildPhotosModal(context); @@ -337,7 +335,10 @@ class _ImageFooterState extends State { padding: const EdgeInsets.all(24), child: StreamSvgIcon.search( size: 96, - color: Colors.grey, + color: + StreamChatTheme.of(context) + .colorTheme + .grey, ), ), Text( @@ -436,32 +437,41 @@ class _ImageFooterState extends State { ), child: TextField( controller: _searchController, - cursorColor: Colors.black, + cursorColor: StreamChatTheme.of(context).colorTheme.black, autofocus: true, decoration: InputDecoration( prefixIconConstraints: BoxConstraints.tight(Size(40, 24)), prefixIcon: Padding( padding: const EdgeInsets.only(left: 8, right: 8), child: StreamSvgIcon.search( - color: Colors.black, + color: StreamChatTheme.of(context).colorTheme.black, size: 24, ), ), hintText: 'Search', hintStyle: TextStyle( - color: Colors.black.withOpacity(0.5), + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.5), fontSize: 14, ), enabledBorder: OutlineInputBorder( borderSide: BorderSide( - color: Colors.black.withOpacity(0.08), + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.08), ), borderRadius: BorderRadius.circular(24), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(24.0), borderSide: BorderSide( - color: Colors.black.withOpacity(0.08), + color: StreamChatTheme.of(context) + .colorTheme + .black + .withOpacity(0.08), ), ), contentPadding: EdgeInsets.zero, @@ -500,7 +510,7 @@ class _ImageFooterState extends State { padding: const EdgeInsets.symmetric(horizontal: 6.0), child: IconButton( icon: StreamSvgIcon.search( - color: Colors.black, + color: StreamChatTheme.of(context).colorTheme.black, ), iconSize: 24.0, onPressed: () { @@ -517,7 +527,7 @@ class _ImageFooterState extends State { style: TextStyle( fontSize: 16.0, fontWeight: FontWeight.w700, - color: Colors.black, + color: StreamChatTheme.of(context).colorTheme.black, ), ), ), @@ -525,7 +535,7 @@ class _ImageFooterState extends State { padding: const EdgeInsets.symmetric(horizontal: 6.0), child: IconButton( icon: StreamSvgIcon.share_arrow( - color: Colors.black, + color: StreamChatTheme.of(context).colorTheme.black, ), onPressed: () async { final attachment = widget.mediaAttachments[widget.currentPage]; diff --git a/lib/src/option_list_tile.dart b/lib/src/option_list_tile.dart index a18c2ab1..eb6e0ab7 100644 --- a/lib/src/option_list_tile.dart +++ b/lib/src/option_list_tile.dart @@ -4,12 +4,13 @@ import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; class OptionListTile extends StatelessWidget { final String title; - final StreamSvgIcon leading; + final Widget leading; final Widget trailing; final VoidCallback onTap; final Color titleColor; final Color tileColor; final Color separatorColor; + final TextStyle titleTextStyle; OptionListTile({ this.title, @@ -19,6 +20,7 @@ class OptionListTile extends StatelessWidget { this.titleColor, this.tileColor, this.separatorColor, + this.titleTextStyle, }); @override @@ -38,10 +40,7 @@ class OptionListTile extends StatelessWidget { onTap: onTap, child: Row( children: [ - if (leading != null) - Expanded( - child: Center(child: leading), - ), + if (leading != null) Center(child: leading), if (leading == null) SizedBox( width: 16.0, @@ -50,14 +49,15 @@ class OptionListTile extends StatelessWidget { flex: 4, child: Text( title, - style: titleColor == null - ? StreamChatTheme.of(context).textTheme.bodyBold - : StreamChatTheme.of(context) - .textTheme - .bodyBold - .copyWith( - color: titleColor, - ), + style: titleTextStyle ?? + (titleColor == null + ? StreamChatTheme.of(context).textTheme.bodyBold + : StreamChatTheme.of(context) + .textTheme + .bodyBold + .copyWith( + color: titleColor, + )), ), ), Expanded(