spaceMembersBuilder method

Implementation

Widget spaceMembersBuilder(
  BuildContext context,
  WidgetRef ref,
  Widget? child,
) {
  final membersLoader = ref.watch(membersIdsProvider(spaceId));
  return membersLoader.when(
    data: (members) {
      final membersCount = members.length;
      if (membersCount > 5) {
        // too many to display, means we limit to 5
        members = members.sublist(0, 5);
      }
      return Padding(
        padding: const EdgeInsets.only(left: 10),
        child: GestureDetector(
          onTap: () => context.pushNamed(
            Routes.spaceMembers.name,
            pathParameters: {'spaceId': spaceId},
          ),
          child: Wrap(
            direction: Axis.horizontal,
            spacing: -8,
            children: [
              ...members.map(
                (a) => MemberAvatar(memberId: a, roomId: spaceId),
              ),
              if (membersCount > 5)
                SizedBox(
                  height: 30,
                  width: 30,
                  child: CircleAvatar(
                    backgroundColor: Theme.of(context).colorScheme.primary,
                    child: Text(
                      '+${membersCount - 5}',
                      textAlign: TextAlign.center,
                      textScaler: const TextScaler.linear(0.8),
                      style: Theme.of(context).textTheme.labelMedium,
                    ),
                  ),
                ),
            ],
          ),
        ),
      );
    },
    error: (e, s) {
      _log.severe('Failed to load members in space', e, s);
      return Text(L10n.of(context).loadingMembersFailed(e));
    },
    loading: () => const Skeletonizer(
      child: Wrap(
        direction: Axis.horizontal,
        spacing: -12,
        children: [
          CircleAvatar(child: Text('0')),
          CircleAvatar(child: Text('1')),
          CircleAvatar(child: Text('2')),
          CircleAvatar(child: Text('3')),
          CircleAvatar(child: Text('4')),
          CircleAvatar(child: Text('5')),
        ],
      ),
    ),
  );
}