CircularProfileAvatar is a Flutter package which allows developers to implement circular profile avatar

Overview

circular_profile_avatar

CircularProfileAvatar is a Flutter package which allows developers to implement circular profile avatar with border, overlay, initialsText and many other awesome features, which simplifies developers job. It is an alternative to Flutter's CircleAvatar Widget.

Usage

    CircularProfileAvatar(
          'https://avatars0.githubusercontent.com/u/8264639?s=460&v=4', //sets image path, it should be a URL string. default value is empty string, if path is empty it will display only initials
          radius: 100, // sets radius, default 50.0              
          backgroundColor: Colors.transparent, // sets background color, default Colors.white
          borderWidth: 10,  // sets border, default 0.0
          initialsText: Text(
            "AD",
            style: TextStyle(fontSize: 40, color: Colors.white),
          ),  // sets initials text, set your own style, default Text('')
          borderColor: Colors.brown, // sets border color, default Colors.white
          elevation: 5.0, // sets elevation (shadow of the profile picture), default value is 0.0
          foregroundColor: Colors.brown.withOpacity(0.5), //sets foreground colour, it works if showInitialTextAbovePicture = true , default Colors.transparent
          cacheImage: true, // allow widget to cache image against provided url
          imageFit = BoxFit.cover,  
          onTap: () {
            print('adil');
          }, // sets on tap 
          showInitialTextAbovePicture: true, // setting it true will show initials text above profile picture, default false  
          )
    )

If you want to use AssetImage or any other resource than just pass that to Child parameter. It will be shown at priority.

    CircularProfileAvatar(
                    '',
                    child: FlutterLogo(),
                    borderColor: Colors.purpleAccent,
                    borderWidth: 5,
                    elevation: 2,
                    radius: 50,
                  ),

If this project help you reduce time to develop, you can give me a cup of coffee :)

Give me through Paypal ->

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Comments
  • Expose the BoxFit value to a widget.

    Expose the BoxFit value to a widget.

    Hello @ch-muhammad-adil

    I have exposed BoxFit value to a widget. So dev can set BoxFit value as want. Please check my PR and Let me know if require any changes.

    Thanks for the great package.

    opened by jigarfumakiya 5
  • Off centre display

    Off centre display

    I've just tried this package out but get an unexpected output, the icon is not centered. Screenshot_20200424-114218

    CircularProfileAvatar(
                        null,
                        child: Icon(
                          Icons.account_circle,
                          size: 200.0,
                        ),
                        borderColor: Colors.black,
                        borderWidth: 3,
                        elevation: 5,
                        radius: 75,
                      )
    
    opened by AllanSullivan 4
  • Image is being cached event after setting cacheImage property to false.

    Image is being cached event after setting cacheImage property to false.

    I am using it in my application, and the profile picture URL is same always for a user. Issue is the profile picture is not being changed on refresh, even after setting cacheImageproperty to false.

    opened by ashishkumart 2
  • Update cached network image package

    Update cached network image package

    Cached network image package is on version 1.1.0 but Circular Profile Avatar is using 0.8.0. If I'm using cached network image and circular profile avatar I can't use any version higher than 0.8.0.

    opened by GustavoContreiras 2
  • Failed image url

    Failed image url

    Hi @ch-muhammad-adil ,

    What would happen if the image url is not valid? Will there be a default empty/invalid image display? If not, do you think it is worth to put on it?

    Thanks in advance.

    opened by jasonlaw 2
  • There should be an option to display image as it is (without being in a circle)

    There should be an option to display image as it is (without being in a circle)

    The reason it was required because, if I am using this plugin, I don't want to use any other plugin to cache images, as this works fine. But if now I need to display the image as-is (and not in a Circular Widget), I have to use another widget, which cannot get the Image from the cache. So an option to programmatically disable the circular widget, would be great.

    opened by arpit24sahu 1
  • Image is Oval and not Circular

    Image is Oval and not Circular

    Hi, I used your library but the result image ha an oval shape.

    
    CircularProfileAvatar(
            state.user.profileImage,
            radius: 18,
            backgroundColor: Colors.transparent,
            borderWidth: 1,
            borderColor: Colors.white,
            cacheImage: true,
            initialsText: Text(
              state.user.name[0],
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onTap: () {
              print("image tap");
              // action();
            },
          );
    

    I suppose that the problem is caused because the image I used is rectangular.

    opened by chemickypes 1
  • Fix issue / update dependency

    Fix issue / update dependency

    Because circular_profile_avatar 0.2.0 depends on cached_network_image ^0.8.0 and no versions of circular_profile_avatar match >0.2.0 <0.3.0, circular_profile_avatar ^0.2.0 requires cached_network_image ^0.8.0

    opened by GustavoContreiras 0
  • addding support to http headers and cookies

    addding support to http headers and cookies

    currently the circular profile avatar only supports unauthenticated files this pull allows people to pass http headers/ cookie map to authenticate. this will enable to fetch images from authenticated cdn like cloudfront.

    opened by rgplvr 0
Releases(2.0.2)
Owner
Muhammad Adil
Experienced iOS/android developer with 7+ years of experience in both platforms and 3 years of experience in Flutter cross platform.
Muhammad Adil
Flutter profile ui - Round Image Profile UI For Flutter

round_image_page A new Flutter project.

Mahfozur Rahman Asif 2 Oct 21, 2022
A quick sample app on how to implement a friend list and a profile page in Flutter.

FlutterMates All code resides in the /lib folder: there's no Android / iOS specific code needed. The article, slides and how this came to be, is here.

Codemate Ltd 528 Jan 8, 2023
Petrus Nguyễn Thái Học 193 Dec 29, 2022
A group of overlapping round avatars are called face piles, a face pile is a series of overlapping avatar images that come and go as users join and leave a given group.

Flutter Face Pile A group of overlapping round avatars are called face piles. A face pile is a series of overlapping avatar images that come and go as

Amine Chamkh 3 Sep 22, 2022
A Flutter package to create a nice circular menu using a Floating Action Button.

FAB Circular Menu A Flutter package to create a nice circular menu using a Floating Action Button. Inspired by Mayur Kshirsagar's great FAB Microinter

Mariano Cordoba 198 Jan 5, 2023
Open source Flutter package, simple circular progress bar.

Simple circular progress bar Open source Flutter package, simple circular progress bar. Getting Started Installing Basic Examples Colors Start angle L

null 6 Dec 23, 2022
DEVS: Developer Board and Jobs Listing | For Developers, By Developers

devs Setup Currently, this DEVS project is using the master channel of the Flutter SDK. TODO: Migrate to beta Clone the project git clone https://gith

Flutter Philippines Community 40 Apr 16, 2022
A new Flutter package which helps you to implement Ticket Widget in your app.

flutter_ticket_widget A new Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and everything resid

Mohak Gupta 112 Dec 22, 2022
A customizable Flutter library that provides a circular context menu

Flutter Pie Menu ?? A customizable Flutter library that provides a circular context menu similar to Pinterest's. Usage Wrap the widget that will react

Raşit Ayaz 14 Jan 4, 2023
Flutter circular text widget

Circular Text Widget Installation Add dependency in pubspec.yaml: dependencies: flutter_circular_text: "^0.3.1" Import in your project: import 'pack

Farrukh 98 Dec 28, 2022
A customizable circular slider for Flutter.

flutter_circular_slider A customizable circular slider for Flutter. Getting Started Installation Basic Usage Constructor Use Cases Installation Add fl

David 193 Nov 14, 2022
A simple button that gives you the possibility to transform into a circular one and shows a progress indicator

Progress Button A simple button that gives you the possibility to transform into

Daniel B Schneider 0 Dec 22, 2021
Telnyx flutter - A Flutter package for both android and iOS which helps developers with Telnyx API services

Telnyx Flutter A Flutter package for both android and iOS which helps developers

Kfir Matityahu 0 Jan 23, 2022
UIWidget is a Unity Package which helps developers to create, debug and deploy efficient, cross-platform Apps.

⚠️ The main repository of UIWidgets has been moved to https://github.com/Unity-Technologies/com.unity.uiwidgets. Please visit the new site if you have

Unity Technologies 1.9k Dec 27, 2022
Scouter is a package which was made following the goal to provide a NestJS-like experience to Dart Developers that want to develop Rest APIS

Scouter is a package which was made following the goal to provide a NestJS-like experience to Dart Developers that want to develop Rest APIS Features

Vinicius Amélio 3 Sep 12, 2022
Flutter Multi-platform allows developers to unleash their app to run on the wide variety of different platforms with little or no change.

Flutter Multi-platform sample Flutter Multi-platform allows developers to unleash their app to run on the wide variety of different platforms with lit

MindInventory 22 Dec 31, 2022
From then on, developers only need to master one Button component, which is enough.

FButton From then on, developers only need to master one Button component, which is enough. Support corners, borders, icons, special effects, loading

Fliggy Mobile 198 Nov 22, 2022
Magpie-fly is a component library produced by 58 Group, which encapsulates a variety of common components to meet the needs of developers

[toc] magpie_fly Magpie-fly 是58集体出品组件库,封装了多种常用组件,以满足开发者需求。(Magpie-fly is a component library produced by 58 Group, which encapsulates a variety of com

Wuba 40 Mar 18, 2022
This is flutter package for creating a gender selection widget which allows users to choose a gender with cool animations

gender_selection A Flutter package for gender selection. It is an aweome gender selection widget with cool gradients and animation effects Demo Instal

Rohan Malik 10 Apr 8, 2022