bubbleBuilder method

@override Widget bubbleBuilder(BuildContext context, Message message, MessageRenderContext ctx)

Implementation

@override
Widget bubbleBuilder(
  BuildContext context,
  Message message,
  MessageRenderContext ctx,
) {
  final p = message.payload as ImagePayload;
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      GestureDetector(
        onTap: ctx.onTap,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 260, maxHeight: 300),
            child: Image.network(
              p.thumbnailUrl ?? p.url,
              fit: BoxFit.cover,
              errorBuilder: (_, __, ___) => Container(
                width: 220,
                height: 160,
                color: Colors.grey.shade200,
                alignment: Alignment.center,
                child: const Icon(Icons.broken_image_rounded,
                    size: 48, color: Colors.grey),
              ),
              loadingBuilder: (_, child, progress) {
                if (progress == null) return child;
                return Container(
                  width: 220,
                  height: 160,
                  color: Colors.grey.shade100,
                  alignment: Alignment.center,
                  child: CircularProgressIndicator(
                    value: progress.expectedTotalBytes != null
                        ? progress.cumulativeBytesLoaded /
                            progress.expectedTotalBytes!
                        : null,
                    strokeWidth: 2,
                  ),
                );
              },
            ),
          ),
        ),
      ),
      if (p.caption != null && p.caption!.isNotEmpty)
        Padding(
          padding: const EdgeInsets.only(top: 6),
          child: Text(
            p.caption!,
            style: DefaultTextStyle.of(context).style.copyWith(fontSize: 14),
          ),
        ),
    ],
  );
}