GSAvatar

The GSAvatar widget is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.

API Reference

This is an illustration of a Themed GSAvatar widget with default configuration.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSAvatar(
      radius: GSAvatarRadius.$full,
      size: GSAvatarSizes.$md,
      style: GSStyle(
        bg: Colors.orange,
        textStyle: const TextStyle(color: Colors.white),
      ),
      fallBackText: const GSAvatarFallBackText('Geeky Stack'),
    )

API Reference

Import

To use this widget in your project, include the following import statement in your file.

import "package:gluestack_ui/gluestack_ui.dart"

This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.

GSAvatar

It inherits all the properties of Flutter's Container widget.

Descendants Styling Parameters Parameters to style child widget

Sx Prop	Description
style	Parameter to style GSAvatar widget

AvatarImage

It inherits all the properties of Flutter's Image widget.

GSAvatarFallbackText

It inherits all the properties of Flutter's Text widget.

GSAvatarBadge

It inherits all the properties of Flutter's Container widget.

Features

Returns a fallback to FallbackText if given an invalid image source.

Parameters

GSAvatar widget is created using Container widget from flutter. It extends all the properties and methods supported by Flutter Container and additionally the properties mentioned below.

GSAvatar

Name	Value	Default
size	xs \| sm \| md \| lg \| xl \| 2xl	md

Note: These properties are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.

Examples

The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

GSAvatar with letters

An GSAvatar widget with text displays a stylized representation of a user or entity alongside accompanying text, providing a visual and textual identification within a user interface.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      children: [
        GSAvatar(
          style: GSStyle(
            bg: Colors.orange,
            textStyle: const TextStyle(color: Colors.white),
          ),
          fallBackText: const GSAvatarFallBackText('Geeky Stack'),
        ),
        const GSHeading(text: 'text'),
      ],
    )

GSAvatar with Image

An GSAvatar widget with an image incorporates a user or entity representation using a profile picture or image, adding a personalized touch and visual identification within a user interface.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSVStack(
      children: [
        GSHStack(
          children: [
            GSAvatar(
              avatarImage: const GSImage(
                path: 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
                imageType: GSImageType.network,
              ),
              style: GSStyle(
                bg: Colors.orange,
                textStyle: const TextStyle(color: Colors.white),
              ),
              fallBackText: const GSAvatarFallBackText('Ronald Richards'),
            ),
            const SizedBox(
              width: 10,
            ),
            const GSVStack(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                GSHeading(text: 'Nursing Assistant'),
                GSText(text: 'Ronald Richards'),
              ],
            ),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        GSHStack(
          children: [
            GSAvatar(
              avatarImage: const GSImage(
                path: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
                imageType: GSImageType.network,
              ),
              style: GSStyle(
                bg: Colors.orange,
                textStyle: const TextStyle(color: Colors.white),
              ),
              fallBackText: const GSAvatarFallBackText('Arlene McCoy'),
            ),
            const SizedBox(
              width: 10,
            ),
            const GSVStack(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                GSHeading(text: 'Arlene McCoy'),
                GSText(text: 'Marketing Coordinator'),
              ],
            ),
          ],
        ),
      ],
    )

GSAvatar Group

The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSAvatarGroup(
      children: [
        GSAvatar(
          size: GSSizes.$sm,
          avatarImage: const GSImage(
            path:
                'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
            imageType: GSImageType.network,
          ),
          style: GSStyle(
            bg: Colors.orange,
            textStyle: const TextStyle(color: Colors.white),
            padding: const EdgeInsets.symmetric(horizontal: 20),
          ),
          fallBackText: const GSAvatarFallBackText('RA'),
        ),
        GSAvatar(
          size: GSSizes.$sm,
          avatarImage: const GSImage(
            path:
                'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
            imageType: GSImageType.network,
          ),
          style: GSStyle(
            bg: Colors.orange,
            textStyle: const TextStyle(color: Colors.white),
          ),
          fallBackText: const GSAvatarFallBackText('BA'),
        ),
        GSAvatar(
          size: GSSizes.$sm,
          avatarImage: const GSImage(
            path:
                'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
            imageType: GSImageType.network,
          ),
          style: GSStyle(
            bg: Colors.orange,
            textStyle: const TextStyle(color: Colors.white),
          ),
          fallBackText: const GSAvatarFallBackText('GA'),
        ),
      ],
    )