circular_badge_avatar

Description:

circular badge avatar

Description #
A useful flutter package to make a cicular avater with with badge or without badge. This widget will redure to write a lots of code of adjustable cirular badge avater for your project
Features #

Able to change circular background color
Able to set own letters or any database name / username. It will auto split 1st 2 digit and show as capital letter instead of image
Able to chnage the badge color
Can set your own placeholder image
Able to adjust image picker icon top or bottom
And many more options are open to you, pick and use them

Getting started #
Just add this in your dependecies
circular_badge_avatar: ^0.1.4
copied to clipboard
and import the bellow line where you want to use the Widget
import 'package:circular_badge_avatar/circular_badge_avatar.dart';
copied to clipboard
To use our helper class widget [if auto import not work] then copy and paste this in the import section. You can use any one of this two helper widgets.

One is image pick from dialog box
And another is from bottomsheet

To know more about it please continue reading about in CircularBadgeAvatar implementation
import 'package:circular_badge_avatar/helper/image_picker_dialog.dart';

import 'package:circular_badge_avatar/helper/bottomsheet_image_picker.dart';
copied to clipboard
Here are the perameters all are optional. You can override all of those
/// [circule properties]
String centeralText;
Color centeralTextColor;
double centeralTextSize;
Color circleBgColor;
Color circleBorderColor;
double circleBorderWidth;
double circleBorderRadius;
String assetImage;
String networkPlaceholderImage;
String networkImage;
XFile imagePath;
String imageString;

/// [icons properties]
IconData icon;
double iconSize;
Color iconBgColor;
Color iconColor;
Color iconBorderColor;
double iconBorderWith;
double iconPosition;
VoidCallback iconOnTap;
bool needImagePickerIcon;
copied to clipboard
Usage #
To get a clear idea plese have a look in the example folder to /example.
Sample output #

CircularBadgeAvatar #
This widget allow you to do everything you want to with circular badge avater with Color, Text or using Asset image, network image, firebase image path.
Please mouse hover CircularBadgeAvatar to see more optional usable perameters you are able to use. #
An example of to show info of a image avater with text or asset image.
SizedBox(
height: 110,
child: CircularBadgeAvatar(
iconPosition: 0, /// [adjust your icon position]
icon: Icons.info_outline, /// [replace with your favorite icon]
// iconSize: 15, /// [resize your icon size]
centeralText: "Mukta Ahmed",
/// [if you want to use asset image]
// assetImage: "assets/images/asset_image.png",
iconOnTap: (){
showSuccessSnackBar(message: "An example of info circular badge avater", context: context);
},
),
),
copied to clipboard
If you want to use image path as string use [imageString:] remeber that it will only accept File or XFile path not asset image string. You can use Firebase file path diretly here
///if you want to pass a asset image [assetImage: pass your asset image]
SizedBox(
height: 110,
child: CircularBadgeAvatar(
needImagePickerIcon: true, /// if you decide not to show the picker icon and user are not able to pick any image [needImagePickerIcon: false]
imageString: selectedImagePath1,
iconOnTap: () async {
final file = await showDialog<XFile>(
context: context,
builder: (context) {
return const ImagePickerDialogBox(
// title: Text("Pick your"),
// titleText: "Please choose your media",
);
},
);
setState(() {
selectedImagePath1 = file!.path; // e.g: you need to set a path
});
},
),
),
const SizedBox(height: 20),
//
copied to clipboard
Handle Network Images #
To handle all kind of network image from HTTP or Firebase image path you can view from here and also able to update the image to any kind of databas
Here is an example how to use this widget when you want it to pick image and view. To use this widget you need to add image_picker package.
SizedBox(
height: 110,
child: CircularBadgeAvatar(
imagePath: /// your image path [XFile] e.g: XFile? imageSource;
networkImage: "https://cdn.pixabay.com/photo/2023/09/04/06/59/dog-8232158_1280.jpg", // replace your http image url
iconOnTap: () async {
log("Hello badge");

/// by default we're showing [BottomSheetImagePicker] helper class
/// if you don't want you can comment out the lines

final file = await showModalBottomSheet<XFile?>(
context: context,
builder: (context) {
return const BottomSheetImagePicker();
});

/// if you want to use image picker dialog then use [ImagePickerDialog] helper class
/// remove this comment out lines

/*
final file = await showDialog<XFile>(
context: context,
builder: (context) {
return const ImagePickerDialog();
});
*/

setState(() {
imageSource = file;
});
},
),
),
copied to clipboard
Visit pub dot dev:
https://pub.dev/packages/circular_badge_avatar
Need help? #
IF you're still need help or want to help me to update or add more features do let me know. Ping me mailto:abdullahibnamukta or visit my portfolio
Additional information #
For more and help us to improve this package feel to
Visit: https://github.com/muktabd/circular_badge_avatar.git
Visit me: www.muktabd.info