feat: Added info tile to group screens

This commit is contained in:
Deven Joshi
2021-01-13 16:09:23 +05:30
parent f3ff758894
commit 1fd81adbf4
2 changed files with 315 additions and 253 deletions
+37 -6
View File
@@ -150,12 +150,36 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
), ),
], ],
), ),
body: Column( body: ValueListenableBuilder<ConnectionStatus>(
valueListenable: StreamChat.of(context).client.wsConnectionStatus,
builder: (context, status, _) {
String statusString = '';
bool showStatus = true;
switch (status) {
case ConnectionStatus.connected:
statusString = 'Connected';
showStatus = false;
break;
case ConnectionStatus.connecting:
statusString = 'Reconnecting...';
break;
case ConnectionStatus.disconnected:
statusString = 'Disconnected';
break;
}
return InfoTile(
showMessage: showStatus,
tileAnchor: Alignment.topCenter,
childAnchor: Alignment.topCenter,
message: statusString,
child: Column(
children: [ children: [
Container( Container(
width: double.maxFinite, width: double.maxFinite,
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: StreamChatTheme.of(context).colorTheme.bgGradient, gradient:
StreamChatTheme.of(context).colorTheme.bgGradient,
), ),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
@@ -178,14 +202,17 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
itemCount: _selectedUsers.length + 1, itemCount: _selectedUsers.length + 1,
separatorBuilder: (_, __) => Container( separatorBuilder: (_, __) => Container(
height: 1, height: 1,
color: StreamChatTheme.of(context).colorTheme.greyWhisper, color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
), ),
itemBuilder: (_, index) { itemBuilder: (_, index) {
if (index == _selectedUsers.length) { if (index == _selectedUsers.length) {
return Container( return Container(
height: 1, height: 1,
color: color: StreamChatTheme.of(context)
StreamChatTheme.of(context).colorTheme.greyWhisper, .colorTheme
.greyWhisper,
); );
} }
final user = _selectedUsers[index]; final user = _selectedUsers[index];
@@ -209,7 +236,9 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
trailing: IconButton( trailing: IconButton(
icon: Icon( icon: Icon(
Icons.clear_rounded, Icons.clear_rounded,
color: StreamChatTheme.of(context).colorTheme.black, color: StreamChatTheme.of(context)
.colorTheme
.black,
), ),
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
splashRadius: 24, splashRadius: 24,
@@ -229,6 +258,8 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
), ),
], ],
), ),
);
}),
), ),
); );
} }
+39 -8
View File
@@ -87,9 +87,33 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
) )
], ],
), ),
body: NestedScrollView( body: ValueListenableBuilder<ConnectionStatus>(
valueListenable: StreamChat.of(context).client.wsConnectionStatus,
builder: (context, status, _) {
String statusString = '';
bool showStatus = true;
switch (status) {
case ConnectionStatus.connected:
statusString = 'Connected';
showStatus = false;
break;
case ConnectionStatus.connecting:
statusString = 'Reconnecting...';
break;
case ConnectionStatus.disconnected:
statusString = 'Disconnected';
break;
}
return InfoTile(
showMessage: showStatus,
tileAnchor: Alignment.topCenter,
childAnchor: Alignment.topCenter,
message: statusString,
child: NestedScrollView(
floatHeaderSlivers: true, floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[ return <Widget>[
SliverToBoxAdapter( SliverToBoxAdapter(
child: SearchTextField( child: SearchTextField(
@@ -112,7 +136,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
Stack( Stack(
children: [ children: [
UserAvatar( UserAvatar(
onlineIndicatorAlignment: Alignment(0.9, 0.9), onlineIndicatorAlignment:
Alignment(0.9, 0.9),
user: user, user: user,
showOnlineStatus: true, showOnlineStatus: true,
borderRadius: BorderRadius.circular(32), borderRadius: BorderRadius.circular(32),
@@ -127,8 +152,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
if (_selectedUsers.contains(user)) { if (_selectedUsers.contains(user)) {
setState( setState(() =>
() => _selectedUsers.remove(user)); _selectedUsers.remove(user));
} }
}, },
child: Container( child: Container(
@@ -138,7 +163,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
.white, .white,
shape: BoxShape.circle, shape: BoxShape.circle,
border: Border.all( border: Border.all(
color: StreamChatTheme.of(context) color:
StreamChatTheme.of(context)
.colorTheme .colorTheme
.whiteSnow, .whiteSnow,
), ),
@@ -175,7 +201,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
child: Container( child: Container(
width: double.maxFinite, width: double.maxFinite,
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: StreamChatTheme.of(context).colorTheme.bgGradient, gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
), ),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
@@ -187,7 +215,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
? 'Matches for \"$_userNameQuery\"' ? 'Matches for \"$_userNameQuery\"'
: 'On the platform', : 'On the platform',
style: TextStyle( style: TextStyle(
color: StreamChatTheme.of(context).colorTheme.grey, color:
StreamChatTheme.of(context).colorTheme.grey,
), ),
), ),
), ),
@@ -278,6 +307,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
), ),
), ),
); );
}),
);
} }
} }