RonakCN

Avatar

In ProgressDark modeRTL

A user image display with fallback initials or icon.

7:21
AB
CN
RK
AB
Abdullah B.
Admin
JD
Jane Doe
Member
RK
Ronak K.
Viewer

Installation

Copy the component into your project using the CLI:

$ronakcn add avatar

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart
import 'package:flutter/material.dart';
import '../components/avatar/avatar.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnAvatar Example')),
      body: Center(
        child: RcnAvatar(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Avatar ships with the following variants:

with-image

Shows a user profile image.

7:21
AB
CN
RK
AB
Abdullah B.
Admin
JD
Jane Doe
Member
RK
Ronak K.
Viewer

with-initials

Falls back to initials when no image.

7:21
AB
CN
RK
AB
Abdullah B.
Admin
JD
Jane Doe
Member
RK
Ronak K.
Viewer

with-fallback-icon

Shows a generic user icon fallback.

7:21
AB
CN
RK
AB
Abdullah B.
Admin
JD
Jane Doe
Member
RK
Ronak K.
Viewer

Props

PropTypeDefaultDescription
imageUrlString?nullURL of the user image.
initialsString?nullInitials shown as fallback.
sizedouble40Diameter of the avatar.
fallbackIconWidget?nullIcon shown when image is absent.

Source files

lib/components/ui/avatar.dart
import 'package:flutter/material.dart';

class RcnAvatar extends StatelessWidget {
  const RcnAvatar({super.key, this.imageUrl, this.initials, this.size = 40, this.fallbackIcon});
  final String? imageUrl;
  final String? initials;
  final double size;
  final Widget? fallbackIcon;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: colors.secondary,
        image: imageUrl != null ? DecorationImage(image: NetworkImage(imageUrl!), fit: BoxFit.cover) : null,
      ),
      child: imageUrl == null
          ? Center(
              child: initials != null
                  ? Text(initials!, style: TextStyle(color: colors.onSecondary, fontSize: size * 0.38, fontWeight: FontWeight.w600))
                  : fallbackIcon ?? Icon(Icons.person, size: size * 0.55, color: colors.onSecondary),
            )
          : null,
    );
  }
}
Version 0.1.0 · display category