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),
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<ChatInfoScreen> {
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<ChatInfoScreen> {
// ),
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<ChatInfoScreen> {
),
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<ChatInfoScreen> {
),
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<ChatInfoScreen> {
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();
example/lib/group_info_screen.dart
+84 -63
View File
@@ -70,8 +70,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
}
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<GroupInfoScreen> {
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<GroupInfoScreen> {
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<GroupInfoScreen> {
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<GroupInfoScreen> {
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<GroupInfoScreen> {
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<GroupInfoScreen> {
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<GroupInfoScreen> {
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<GroupInfoScreen> {
);
},
),
_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)
lib/src/channel_bottom_sheet.dart
+20 -8
View File
@@ -129,16 +129,22 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
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<ChannelBottomSheet> {
),
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<ChannelBottomSheet> {
},
),
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: () {
lib/src/image_footer.dart
+26 -16
View File
@@ -112,13 +112,14 @@ class _ImageFooterState extends State<ImageFooter> {
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<ImageFooter> {
children: <Widget>[
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<ImageFooter> {
),
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<ImageFooter> {
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<ImageFooter> {
),
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<ImageFooter> {
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<ImageFooter> {
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<ImageFooter> {
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];
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 {
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(