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

[NewGroupChatScreen] Maintain selectedUsersList when going back and forward in the flow

Browse Source
This commit is contained in:
xsahil03x
2020-11-23 20:40:09 +05:30
parent 0a9652f1ac
commit 515b9734cb
3 changed files with 168 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/group_chat_details_screen.dart
+158 -152
View File
@@ -53,167 +53,173 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return WillPopScope(
backgroundColor: Color.fromRGBO(252, 252, 252, 1), onWillPop: () async {
appBar: AppBar( Navigator.pop(context, _selectedUsers);
elevation: 1, return false;
backgroundColor: Colors.white, },
leading: const StreamBackButton(), child: Scaffold(
title: Text( backgroundColor: Color.fromRGBO(252, 252, 252, 1),
'Name of Group Chat', appBar: AppBar(
style: TextStyle( elevation: 1,
color: Colors.black, backgroundColor: Colors.white,
fontSize: 16, leading: const StreamBackButton(),
), title: Text(
), 'Name of Group Chat',
centerTitle: true, style: TextStyle(
bottom: PreferredSize( color: Colors.black,
preferredSize: Size.fromHeight(kToolbarHeight), fontSize: 16,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 16),
child: Row(
children: [
Text(
'NAME',
style: TextStyle(
fontSize: 12,
color: Colors.black.withOpacity(0.5),
),
),
SizedBox(width: 16),
Expanded(
child: TextField(
controller: _groupNameController,
decoration: InputDecoration(
isDense: true,
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: const EdgeInsets.all(0),
hintText: 'Choose a group chat name',
hintStyle: TextStyle(
fontSize: 14, color: Colors.black.withOpacity(.5)),
),
),
),
],
), ),
), ),
), centerTitle: true,
actions: [ bottom: PreferredSize(
NeumorphicButton( preferredSize: Size.fromHeight(kToolbarHeight),
child: IconButton(
padding: const EdgeInsets.all(0),
icon: Icon(StreamIcons.check),
color: Color(0xFF006CFF),
onPressed: _isGroupNameEmpty
? null
: () async {
final groupName = _groupNameController.text;
final client = StreamChat.of(context).client;
final channel = client
.channel('messaging', id: Uuid().v4(), extraData: {
'members': [
client.state.user.id,
..._selectedUsers.map((e) => e.id),
],
'name': groupName,
});
await channel.watch();
Navigator.of(context)
..pop()
..pushReplacement(
MaterialPageRoute(
builder: (context) {
return StreamChannel(
child: ChannelPage(),
channel: channel,
);
},
),
);
},
),
),
],
),
body: Column(
children: [
Container(
width: double.maxFinite,
color: Colors.grey.shade50,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 16),
vertical: 8, child: Row(
horizontal: 8, children: [
Text(
'NAME',
style: TextStyle(
fontSize: 12,
color: Colors.black.withOpacity(0.5),
),
),
SizedBox(width: 16),
Expanded(
child: TextField(
controller: _groupNameController,
decoration: InputDecoration(
isDense: true,
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: const EdgeInsets.all(0),
hintText: 'Choose a group chat name',
hintStyle: TextStyle(
fontSize: 14, color: Colors.black.withOpacity(.5)),
),
),
),
],
), ),
child: Text( ),
'$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}', ),
style: TextStyle( actions: [
fontWeight: FontWeight.w500, NeumorphicButton(
child: IconButton(
padding: const EdgeInsets.all(0),
icon: Icon(StreamIcons.check),
color: Color(0xFF006CFF),
onPressed: _isGroupNameEmpty
? null
: () async {
final groupName = _groupNameController.text;
final client = StreamChat.of(context).client;
final channel = client
.channel('messaging', id: Uuid().v4(), extraData: {
'members': [
client.state.user.id,
..._selectedUsers.map((e) => e.id),
],
'name': groupName,
});
await channel.watch();
Navigator.of(context)
..pop()
..pushReplacement(
MaterialPageRoute(
builder: (context) {
return StreamChannel(
child: ChannelPage(),
channel: channel,
);
},
),
);
},
),
),
],
),
body: Column(
children: [
Container(
width: double.maxFinite,
color: Colors.grey.shade50,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
'$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}',
style: TextStyle(
fontWeight: FontWeight.w500,
),
), ),
), ),
), ),
), Expanded(
Expanded( child: ListView.separated(
child: ListView.separated( itemCount: _selectedUsers.length + 1,
itemCount: _selectedUsers.length + 1, separatorBuilder: (_, __) => Container(
separatorBuilder: (_, __) => Container( height: 1,
height: 1, color: Theme.of(context).brightness == Brightness.dark
color: Theme.of(context).brightness == Brightness.dark ? Colors.white.withOpacity(0.1)
? Colors.white.withOpacity(0.1) : Colors.black.withOpacity(0.1),
: Colors.black.withOpacity(0.1), ),
), itemBuilder: (_, index) {
itemBuilder: (_, index) { if (index == _selectedUsers.length) {
if (index == _selectedUsers.length) { return Container(
return Container( height: 1,
height: 1, color: Theme.of(context).brightness == Brightness.dark
color: Theme.of(context).brightness == Brightness.dark ? Colors.white.withOpacity(0.1)
? Colors.white.withOpacity(0.1) : Colors.black.withOpacity(0.1),
: Colors.black.withOpacity(0.1), );
}
final user = _selectedUsers[index];
return ListTile(
key: ObjectKey(user),
leading: UserAvatar(
user: user,
constraints: BoxConstraints.tightFor(
width: 40,
height: 40,
),
),
title: Text(
user.name,
style: TextStyle(fontWeight: FontWeight.bold),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
trailing: IconButton(
icon: Icon(
Icons.clear_rounded,
color: Colors.black,
),
padding: const EdgeInsets.all(0),
splashRadius: 24,
onPressed: () {
setState(() {
_selectedUsers.remove(user);
});
if (_selectedUsers.isEmpty) {
Navigator.pop(context, _selectedUsers);
}
},
),
); );
} },
final user = _selectedUsers[index]; ),
return ListTile(
key: ObjectKey(user),
leading: UserAvatar(
user: user,
constraints: BoxConstraints.tightFor(
width: 40,
height: 40,
),
),
title: Text(
user.name,
style: TextStyle(fontWeight: FontWeight.bold),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
trailing: IconButton(
icon: Icon(
Icons.clear_rounded,
color: Colors.black,
),
padding: const EdgeInsets.all(0),
splashRadius: 24,
onPressed: () {
setState(() {
_selectedUsers.remove(user);
});
if (_selectedUsers.isEmpty) {
Navigator.pop(context);
}
},
),
);
},
), ),
), ],
], ),
), ),
); );
} }
example/lib/new_group_chat_screen.dart
+9 -2
View File
@@ -69,8 +69,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
StreamIcons.arrow_right, StreamIcons.arrow_right,
color: Color(0xFF006CFF), color: Color(0xFF006CFF),
), ),
onPressed: () { onPressed: () async {
Navigator.push( final updatedList = await Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (_) => GroupChatDetailsScreen( builder: (_) => GroupChatDetailsScreen(
@@ -78,6 +78,13 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
), ),
), ),
); );
if (updatedList != null) {
setState(() {
_selectedUsers
..clear()
..addAll(updatedList);
});
}
}, },
) )
], ],
lib/src/back_button.dart
+1 -1
View File
@@ -33,7 +33,7 @@ class StreamBackButton extends StatelessWidget {
if (onPressed != null) { if (onPressed != null) {
onPressed(); onPressed();
} else { } else {
Navigator.of(context).pop(); Navigator.maybePop(context);
} }
}, },
child: Icon( child: Icon(