avatar_better 1.0.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.

Table of Contents

• Features
• Screenshots
• Installation
• Basic Usage
  • Simple Avatar
  • Avatar with Network Image
  • Avatar with PageView on Tap
  • Profile Avatar with Image Picker
• Advanced Usage
  • Custom Styling
  • PageView with Custom Options
  • Profile with Image Picker and Custom Bottom Sheet
• Configuration
  • Avatar Properties
  • ProfileImageViewerOptions Properties
  • BottomSheetStyles Properties
  • OptionsCrop Properties
• Platform Support
• Related Packages
• Contact & Support

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

Screenshots

Installation

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

dependencies:
  avatar_better: ^1.0.0

Then run:

flutter pub get

Basic Usage

Import the package:

import 'package:avatar_better/avatar_better.dart';

Simple Avatar

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

Avatar with Network Image

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

Avatar with PageView on Tap

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

Profile Avatar with Image Picker

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

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,
  ),
)

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,
  ),
)

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
  ),
)

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

Property	Type	Description
cropperTheme	CropperTheme	Theme for the cropper UI (light, dark, blue)
aspectRatio	CropAspectRatio	Aspect ratio for cropping (square, free, etc.)
overlayType	CropOverlayType	Shape of crop overlay (rectangle, circle)
outputType	OutputType	Output format (bytes, file, both)
showGrid	bool	Whether to show grid in crop area
maxScale	double	Maximum zoom scale allowed
useDraggableCropper	bool	Enable draggable crop box
maxImageSize	int	Max image dimension for performance

Platform Support

This package works out of the box on all Flutter supported platforms:

✅ Android - No additional setup required
✅ iOS - No additional setup required
✅ Web - No additional setup required
✅ Windows - No additional setup required
✅ macOS - No additional setup required
✅ Linux - No additional setup required

Note: If you use the Avatar.profile() constructor with image picking and cropping functionality, please refer to the picker_image_cropper package documentation for any platform-specific setup requirements.

Related Packages

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

Additional information

If you have any issues, questions, or suggestions related to this package, please feel free to contact us at [e-mail]. We welcome your feedback and will do our best to address any problems or provide assistance.

For more information about this package, you can also visit our GitHub repository where you can find additional resources, contribute to the package's development, and file issues or bug reports. We appreciate your contributions and feedback, and we aim to make this package as useful as possible for our users.

Thank you for using our package, and we look forward to hearing from you!