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

Developing Visual Documentation using diagrams in python

How to migrate AWS RedShift dc2 to ds2 node cluster

Get LME Tin Rates Using An API

How I Got Started in Coding

4 (and a half) Great Mac Productivity Apps

Let’s write a Tic-TacToe in Golang!

How to create Data Apps in Python using Streamlit — part I

Journey of Apache Kafka & Zookeeper Administrator ( Part 9 )

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

Flutter: Make ExpansionTile work as ExpansionPanelList.radio

SMS Autofill (OTP) in Flutter

Flutter — State management —  The easy way

IgnorePointer & AbsorbPointer In Flutter.