FlutterWorld
Published in

FlutterWorld

Flutter: AVATAR VIEW

Flutter has a CircleAvatar widget that comes with very limited functionality, to solve this I have created my own flutter lib called avatar_view. This will solve some of the common problems which we faced while development.

AvatarView Features

All below features will be supported for network and assets images.

  • Circular AvatarView Without Border
  • Circular AvatarView With Border
  • Rectangular AvatarView Without Border
  • Rectangular AvatarView With Border
  • Circular/Rectangular Text Widget
  • Error Support Widgets.

Some of the examples which describe how we can use this.

Circular AvatarView Without Border

       AvatarView(
radius: 60,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),

Circular AvatarView With Border

       AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),

Rectangular AvatarView Without Border

      AvatarView(
radius: 60,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),

Rectangular AvatarView With Border

      AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),

Output:

Please find examples repository inside below given GitHub URL, Please do star if you like the repository.

Github: https://github.com/jitsm555/flutter_avatar_view

--

--

--

The fastest growing community which makes development easier

Recommended from Medium

A baked goodness of distributed application components all in one docker stack. Part-1. Intro.

Tower of Hanoi using Java programming

Can you help me with the computer MCQs asked in the DXC technology placement test?

Amazon RDS integration with WordPress hosted on AWS

Automate K8s policy checks using Datree, AWS CodeBuild, and Terraform

Diagram of the magic solution

Thirty Day Web-Development Challenge (Day 1)

LOAD BALANCING KEY TO DATA TRAFFICKING

Advice for Ruby Programming Foundations Written Assessment(Part 3)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jitesh Mohite

Jitesh Mohite

I am technology enthusiastic, want to learn things quickly and dive deep inside it. I always believe in developing logical things which makes impact on end user

More from Medium

Google pay’s migration journey to Flutter!

Refreshing Future Builder List view after amount of time | Flutter

Sinister Rewind

What is Riverpod ? Hey guys, in this article I wanna talk quickly about Riverpod in Flutter!