fluffychat/lib/pages/chat/seen_by_row.dart

import 'package:flutter/material.dart';

import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat/chat.dart';
import 'package:fluffychat/utils/room_status_extension.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';

class SeenByRow extends StatelessWidget {
  final ChatController controller;
  const SeenByRow(this.controller, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final seenByUsers = controller.room.getSeenByUsers(
      controller.timeline,
      controller.filteredEvents,
      controller.unfolded,
    );
    const maxAvatars = 7;
    return AnimatedContainer(
      height: seenByUsers.isEmpty ? 0 : 24,
      duration: seenByUsers.isEmpty
          ? const Duration(milliseconds: 0)
          : const Duration(milliseconds: 300),
      alignment: controller.filteredEvents.isNotEmpty &&
              controller.filteredEvents.first.senderId ==
                  Matrix.of(context).client.userID
          ? Alignment.topRight
          : Alignment.topLeft,
      padding: const EdgeInsets.only(bottom: 4),
      child: Container(
        constraints:
            const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5),
        alignment: Alignment.center,
        child: Wrap(
          spacing: 4,
          children: [
            ...(seenByUsers.length > maxAvatars
                    ? seenByUsers.sublist(0, maxAvatars)
                    : seenByUsers)
                .map(
                  (user) => Avatar(
                    user.avatarUrl,
                    user.calcDisplayname(),
                    size: 16,
                    fontSize: 9,
                  ),
                )
                .toList(),
            if (seenByUsers.length > maxAvatars)
              SizedBox(
                width: 16,
                height: 16,
                child: Material(
                  color: Theme.of(context).backgroundColor,
                  borderRadius: BorderRadius.circular(32),
                  child: Center(
                    child: Text(
                      '+${seenByUsers.length - maxAvatars}',
                      style: const TextStyle(fontSize: 9),
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}