flutter chat app with stream.io members page - flutter

Question

i am using stream io for my flutter chat app and i have a couple of 'group' channels, meaning there's multiple users in the channel. i am having problems integrating a members page. does anybody knows how to use 'querying members' from https://getstream.io/chat/docs/flutter-dart/query_members/?language=dart#query-options ? any help will be greatly appreciated!
// ignore_for_file: deprecated_member_use
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:ibchat/helpers.dart';
import 'package:ibchat/screens/screens.dart';
import 'package:ibchat/themes/theme.dart';
import 'package:ibchat/widgets/widgets.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:ibchat/stream/app.dart';
class CommunityProfileScreen extends StatefulWidget {
static Route routeWithChannel(Channel channel) => MaterialPageRoute(
builder: (context) => StreamChannel(
channel: channel,
child: const CommunityProfileScreen(),
));
const CommunityProfileScreen({Key? key}) : super(key: key);
#override
State<CommunityProfileScreen> createState() => _CommunityProfileScreenState();
}
class _CommunityProfileScreenState extends State<CommunityProfileScreen> {
final channelListController = ChannelListController();
final List<String> _areaOfInterest = [
'PersonalDevelopment',
'AcquiringNewSkills',
'Mentoring',
'Coaching',
'WealthManagement',
'InvestingOnPassiveIncome',
'BusinessDevelopment',
'BuildingANetwork',
'GrowingMyBusiness',
'PartnershipAndAlliances',
'RecruitmentOfTalents',
'Lifestyle',
'LuxuryExperiences',
'TheArtOfLiving'
];
#override
Widget build(BuildContext context) {
return ChannelListCore(
channelListController: channelListController,
filter: Filter.and([
Filter.and(
[
Filter.equal('type', 'messaging'),
Filter.in_('members', [
StreamChatCore.of(context).currentUser!.id,
]),
Filter.notIn('members', const ['influential-brands']),
],
),
Filter.nor([
Filter.equal('id', _areaOfInterest[0]),
Filter.equal('id', _areaOfInterest[1]),
Filter.equal('id', _areaOfInterest[2]),
Filter.equal('id', _areaOfInterest[3]),
Filter.equal('id', _areaOfInterest[4]),
Filter.equal('id', _areaOfInterest[5]),
Filter.equal('id', _areaOfInterest[6]),
Filter.equal('id', _areaOfInterest[7]),
Filter.equal('id', _areaOfInterest[8]),
Filter.equal('id', _areaOfInterest[9]),
Filter.equal('id', _areaOfInterest[10]),
Filter.equal('id', _areaOfInterest[11]),
Filter.equal('id', _areaOfInterest[12]),
Filter.equal('id', _areaOfInterest[13]),
]),
]),
sort: const [SortOption('name', direction: SortOption.DESC)],
emptyBuilder: (context) {
return Scaffold(
appBar: AppBar(
leadingWidth: 54,
leading: Align(
alignment: Alignment.centerRight,
child: IconBackground(
icon: CupertinoIcons.chevron_back,
onTap: () => Navigator.of(context).pop()),
),
title: const _AppBarTitle(),
),
body: const Center(
child: Text('No Other Members', textAlign: TextAlign.center),
),
);
},
errorBuilder: (context, error) => const DisplayErrorMessage(),
loadingBuilder: (
context,
) =>
const Center(
child: SizedBox(
height: 100,
width: 100,
child: CircularProgressIndicator(
color: AppColors.accent,
),
)),
listBuilder: (context, channels) {
return Scaffold(
appBar: AppBar(
leadingWidth: 54,
leading: Align(
alignment: Alignment.centerRight,
child: IconBackground(
icon: CupertinoIcons.chevron_back,
onTap: () => Navigator.of(context).pop()),
),
title: const _AppBarTitle(),
),
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return _ProfileTile(
channel: channels[index],
);
},
childCount: channels.length,
),
)
],
),
);
},
);
}
}
class _ProfileTile extends StatelessWidget {
const _ProfileTile({Key? key, required this.channel}) : super(key: key);
final Channel channel;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.of(context).push(ChatScreen.routeWithChannel(channel));
},
child: Container(
height: 100,
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey, width: 0.2))),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Avatar.medium(
url: // needs help
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
// needs help,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
letterSpacing: 0.2,
wordSpacing: 1.5,
fontWeight: FontWeight.w900)),
),
],
)),
],
),
),
),
);
}
}
class _AppBarTitle extends StatelessWidget {
const _AppBarTitle({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Members Of Community',
style: GoogleFonts.lato(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black)),
const SizedBox(height: 2),
],
)),
const SizedBox(
width: 16,
),
Hero(
tag: 'community-profile-picture',
child: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Avatar.medium(
url: Helpers.randomPictureUrl(),
onTap: () => Navigator.of(context).pop()),
),
),
],
);
}
}