avatar_profile 0.0.1

A customizable Flutter avatar profile picker widget with built-in avatar images and bottom sheet selection.

Avatar Profile

A simple and customizable Flutter avatar profile picker widget with built-in avatar images and a modern bottom sheet selection UI.[page:1]

Quickly add profile avatar selection to your Flutter app with minimal setup and sensible defaults.[page:1]

---

Features

• Built-in avatar image URLs (no manual list required for common use cases).[page:1]
• Bottom sheet avatar picker with a modern, mobile-friendly UI.[page:1]
• Customizable colors for primary accents, border, and edit icon.[page:1]
• Edit badge support to indicate that the avatar is editable.[page:1]
• Network image loading with basic error handling.[page:1]
• Simple callback when an avatar is selected, making state updates straightforward.[page:1]
• Optionally supply your own list of avatar URLs when you need full control.[page:1]

---

Installation

Add the dependency in your pubspec.yaml:

dependencies:
  avatar_profile: ^0.0.1

Then fetch the package:

flutter pub get

---

Usage

Basic usage

Import the package and use the AvatarProfile widget to let users pick an avatar.[page:1]

import 'package:avatar_profile/avatar_profile.dart';
import 'package:flutter/material.dart';

class AvatarExamplePage extends StatefulWidget {
  const AvatarExamplePage({super.key});

  @override
  State<AvatarExamplePage> createState() => _AvatarExamplePageState();
}

class _AvatarExamplePageState extends State<AvatarExamplePage> {
  String? selectedAvatar;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Avatar Profile Example'),
      ),
      body: Center(
        child: AvatarProfile(
          displayUrl: selectedAvatar,
          onAvatarSelected: (url) {
            setState(() {
              selectedAvatar = url;
            });
          },
        ),
      ),
    );
  }
}

In this example, the selected avatar URL is stored in selectedAvatar and updated whenever the user picks a new avatar.[page:1]

---

Customization

Colors

You can customize the primary, border, and edit icon colors to match your app theme.[page:1]

AvatarProfile(
  displayUrl: selectedAvatar,
  primaryColor: Colors.deepPurple,
  borderColor: Colors.deepPurple,
  editIconColor: Colors.deepPurple,
  onAvatarSelected: (url) {
    setState(() {
      selectedAvatar = url;
    });
  },
)

Custom avatar list

By default, AvatarProfile ships with a built-in set of avatar images so you can start quickly.[page:1]
If you want to provide your own avatars (for example, branded images or user-uploaded content), pass a custom list of URLs.[page:1]

AvatarProfile(
  avatarUrls: const [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
  ],
  displayUrl: selectedAvatar,
  onAvatarSelected: (url) {
    setState(() {
      selectedAvatar = url;
    });
  },
)

---

API overview

Commonly used properties:

• displayUrl: The currently selected avatar URL to display.[page:1]
• avatarUrls: Optional list of avatar image URLs to override the built-in set.[page:1]
• onAvatarSelected: Callback that receives the selected avatar URL whenever the user picks one.[page:1]
• primaryColor: Main accent color used in the picker UI.[page:1]
• borderColor: Color of the avatar border.[page:1]
• editIconColor: Color of the edit badge/icon.[page:1]

---

Roadmap and contributions

Planned ideas include:

• More built-in avatar packs (e.g., outlined, cartoon, minimalist styles).
• Support for local file/image pickers as a source.
• Additional configuration for bottom sheet layout and behavior.

Contributions, bug reports, and feature requests are welcome.
Feel free to open an issue or pull request in the repository to help improve AvatarProfile.[page:1]

---

License

This package is released under the MIT License.