platformCircleAvatar function

Widget platformCircleAvatar({ required String imageUrl, double radius = 20, Color? backgroundColor, Widget? child, })

Platform-aware circular avatar for network images. On web: uses Image.network + ClipOval (Flutter-rendered, properly clippable). On mobile: uses standard CircleAvatar with CachedNetworkImageProvider. Use this instead of CircleAvatar(backgroundImage: platformImageProvider(...))

Implementation

Widget platformCircleAvatar({
  required String imageUrl,
  double radius = 20,
  Color? backgroundColor,
  Widget? child,
}) {
  final bgColor = backgroundColor ?? Colors.grey[800];
  final fallbackChild = child ?? Icon(Icons.person, size: radius);

  if (kIsWeb) {
    final webUrl = imageUrl.trim();
    if (webUrl.isEmpty || !webUrl.startsWith('http')) {
      return CircleAvatar(
        radius: radius,
        backgroundColor: bgColor,
        child: fallbackChild,
      );
    }
    return _WebRetryCircleAvatar(
      imageUrl: webUrl,
      radius: radius,
      backgroundColor: bgColor,
      fallbackChild: fallbackChild,
    );
  }
  final optimizedUrl = _optimizeGoogleImageUrl(imageUrl);
  return CircleAvatar(
    radius: radius,
    backgroundColor: bgColor,
    backgroundImage: optimizedUrl.isNotEmpty
        ? CachedNetworkImageProvider(optimizedUrl)
        : null,
    child: imageUrl.isEmpty ? fallbackChild : child,
  );
}