GF Flutter Avatar

Banner image

GFAvatar is a Flutter Avatar which is an image basically used to display the user picture in the profile section. GFAvatar has different shapes wherein the popular is a Circular Avatar.

GF Flutter Circle Avatar

The Flutter Circle Avatar widget has a circle shape image**. GFAvatar** comes with different shapes, in which one of the default shapes is a circle. To place the image inside the GFAvatar, the image should be given inbackgroundImageproperty. The below code shows a simple Circle Avatar.

Flutter Circle Avatar

import 'package:getwidget/getwidget.dart';

GFAvatar(
  backgroundImage:NetworkImage(AvatarUrl),
)

GF Flutter Standard Avatar

GFAvatar has another type of avatar called Standard Avatar. It is a Square shape avatar with slightly rounded corners as shown in the below image. The code below gives a Standard Square Avatar.

Flutter Standard Square Avatar

import 'package:getwidget/getwidget.dart';

GFAvatar(
  backgroundImage:NetworkImage(AvatarUrl),
  shape: GFAvatarShape.standard
)

GF Flutter Square Avatar

GFAvatar has another type of avatar called Square Avatar. It is a Square shape avatar with no rounded corners as shown in the below image. The code below gives a Standard Avatar.

Flutter Square Avatar Widget

import 'package:getwidget/getwidget.dart';

GFAvatar(
  backgroundImage:NetworkImage(AvatarUrl),
  shape: GFAvatarShape.square
)

GF Avatar Custom Properties:

The look and feel of GFAvatar can be customized using the following properties:

NameDescription
childtype of [Widget], which can have text, icon, etc
backgroundColorGFColor or Color to fill the background of the avatar
foregroundColorGFColor or Color to change the textColor inside the avatar
radiussize of the avatar
minRadiusminimum size of the avatar
maxRadiusmaximum size of the avatar
sizesize of the avatar i.e GFSize.large, GFSize.medium, GFSize.small
shapeshape of the avatar i.e, GFAvatarShape.standard, GFAvatarShape.circle, GFAvatarShape.square
borderRadiusextra radius to avatar shapes, not applicable to the circular avatar

Last Updated: February 4, 2022