avatar_better 0.1.0

This is a complete avatar package that you can use for your profile and avatar.

Avatar Better

A complete Flutter package for implementing customizable avatars and profile images with various styling options and interactive features.

Features

✔️ Initial Text Display - Shows initials when no image is provided ✔️ Random Colors - Automatically generates colors based on text ✔️ Random Linear Gradients - Creates beautiful gradient backgrounds ✔️ Border Support - Add customizable borders around avatars ✔️ Gradient Borders - Apply gradient colors to avatar borders ✔️ Multiple Image Sources - Support for assets, network, and selected images ✔️ Image Cropping - Cross-platform image cropping functionality ✔️ Interactive PageView - View avatars in an interactive full-screen mode ✔️ Platform Support - Works on Android, iOS, Web, Windows, and macOS

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  avatar_better: ^0.1.0

copied to clipboard

Then run:

flutter pub get

copied to clipboard

Basic Usage

Import the package:

import 'package:avatar_better/avatar_better.dart';

copied to clipboard

Simple Avatar

Avatar(
  text: "John Doe",
  radius: 35,
  randomColor: true,
)

copied to clipboard

Avatar with Network Image

Avatar(
  text: "John Doe",
  radius: 50,
  imageNetwork: "https://example.com/profile.jpg",
)

copied to clipboard

Avatar with PageView on Tap

Avatar(
  text: "John Doe",
  radius: 50,
  showPageViewOnTap: true,
  imageNetwork: "https://example.com/profile.jpg",
)

copied to clipboard

Profile Avatar with Image Picker

Avatar.profile(
  text: "John Doe",
  radius: 50,
  onPickerChange: (file) {
    // Handle the selected file
  },
)

copied to clipboard

Advanced Usage

Custom Styling

Avatar(
  text: "John Doe",
  radius: 50,
  randomGradient: true,
  isBorderAvatar: true,
  widthBorder: 5.0,
  gradientWidthBorder: const LinearGradient(
    colors: [Colors.purple, Colors.blue],
  ),
  style: const TextStyle(
    fontSize: 20,
    color: Colors.white,
    fontWeight: FontWeight.bold,
  ),
)

copied to clipboard

PageView with Custom Options

Avatar(
  text: "John Doe",
  radius: 50,
  showPageViewOnTap: true,
  imageNetwork: "https://example.com/profile.jpg",
  profileImageViewerOptions: ProfileImageViewerOptions(
    fitBackgroundImage: BoxFit.cover,
    backgroundColorPageViewAppBar: Colors.black,
    backBottomColorPageView: Colors.white,
  ),
)

copied to clipboard

Profile with Image Picker and Custom Bottom Sheet

Avatar.profile(
  text: "John Doe",
  radius: 50,
  bottomSheetStyles: BottomSheetStyles(
    backgroundColor: Colors.blue,
    elevation: 4,
    middleText: 'OR',
    middleTextStyle: const TextStyle(color: Colors.white),
  ),
  onPickerChange: (file) {
    // Handle the selected file
  },
  optionsCrop: OptionsCrop(
    // Customize cropping options
  ),
)

copied to clipboard

Configuration

Avatar Properties

Property	Type	Description
text	String	The text to display as initials when no image is available
radius	double	The radius of the avatar (default: 35)
widthBorder	double	Width of the avatar border (default: 5.0)
isBorderAvatar	bool	Whether to show a border around the avatar
image	String	Path to a local asset image
imageNetwork	String	URL of a network image
listImageNetwork	List<String>	List of network image URLs for PageView
backgroundColor	Color	Background color of the avatar
gradientBackgroundColor	Gradient	Gradient background for the avatar
gradientWidthBorder	Gradient	Gradient for the avatar border
randomColor	bool	Generate random color based on text
randomGradient	bool	Generate random gradient based on text
style	TextStyle	Style for the text initials
elevation	double	Shadow elevation for the avatar
shadowColor	Color	Color of the shadow
onTapAvatar	Function()	Callback when avatar is tapped
showPageViewOnTap	bool	Show PageView when avatar is tapped
profileImageViewerOptions	ProfileImageViewerOptions	Options for the profile image viewer
child	Widget	Custom child widget to display inside the avatar

ProfileImageViewerOptions Properties

Property	Type	Description
backgroundColorPageViewAppBar	Color	Background color of the PageView app bar
backBottomColorPageView	Color	Background color of the PageView bottom bar
backgroundColorDropdownMenuItem	Color	Background color of dropdown menu items
iconColorDropdownMenuItem	Color	Icon color in dropdown menu items
widgetLoadingPageView	Widget	Custom loading widget for PageView
fitBackgroundImage	BoxFit	How to fit the image in PageView

BottomSheetStyles Properties

Property	Type	Description
backgroundColor	Color	Background color of the bottom sheet
elevation	double	Elevation of the bottom sheet
middleText	String	Text displayed between options
middleTextStyle	TextStyle	Style for the middle text

OptionsCrop Properties

Customize image cropping behavior with the OptionsCrop class. See the image_cropper package documentation for details.

Platform Setup

Android

Add the following permissions to your AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    
    <!-- For Android 10 and above -->
    <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
    
    <!-- For Android 12 and above -->
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" tools:ignore="ScopedStorage"/>
    
    <!-- For Android 13 and above -->
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>

copied to clipboard

Add this to your application tag:

<application
    android:requestLegacyExternalStorage="true"
    ...>

copied to clipboard

Add UCropActivity to your AndroidManifest.xml:

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

copied to clipboard

Add these queries:

<queries>
    <intent>
        <action android:name="android.intent.action.GET_CONTENT" />
    </intent>
</queries>

copied to clipboard

iOS

Add these keys to your Info.plist:

<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to select images for editing.</string>

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to take photos for editing.</string>

<key>NSMicrophoneUsageDescription</key>
<string>App needs access to the microphone to record audio.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>App needs access to your photo library to save images and videos.</string>

copied to clipboard

macOS

Add this entitlement to enable file selection:

<key>com.apple.security.files.user-selected.read-only</key>
<true/>

copied to clipboard

Web

Add the following to the <head> section of your web/index.html:

<!-- cropperjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>

copied to clipboard

Related Packages

If you want a similar avatar package without cropping functionality, check out avatar_better_pro.

Contact & Support

If you have any issues, questions, or suggestions:

• Email: [e-mail]
• GitHub: https://github.com/SwanFlutter/avatar_better

We welcome your feedback and contributions!