GSBadge

The badge widget lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.

API Reference


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBadge(
      action: GSActions.success,
      variant: GSVariants.solid,
      size: GSSizes.$md,
      icon: const GSBadgeIcon(
        iconData: Icons.info_outline,
      ),
      text: const GSBadgeText(
        'information',
      ),
    )

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.

GSBadge

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

GSBadgeText

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

GSBadgeIcon

Contains all Icon related layout style properties and actions. It inherits all the properties of Flutter's Icon widget.

Parameters

GSBadge 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.

GSBadge

Name	Value	Default
action	error \| warning \| success \| info \| muted	success
variant	solid \| outline	solid
size	sm \| md \| lg	md

Note: These properties are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these properties 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.

GSBadge with Avatar

An example of the GSBadge widget being used with the GSAvatar widget to display badges alongside user avatars for enhanced visual representation or identification.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GSAvatar(
          size: GSSizes.$md,
          style: GSStyle(bg: $GSColors.backgroundLight600),
          avatarImage: const GSImage(
            imageType: GSImageType.network,
            path: 'https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=2564&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          ),
          fallBackText: const GSAvatarFallBackText(
            'Rax Martin',
          ),
        ),
        const SizedBox(
          width: 10,
        ),
        const GSHeading(text: "Ronald Richards"),
        const SizedBox(
          width: 10,
        ),
        const GSBadge(
          action: GSActions.success,
          text: GSBadgeText(
            "Verified",
          ),
        ),
      ],
    )

Edit this page on GitHub

GSBadge

API Reference

Import

Widget Parameters

GSBadge

GSBadgeText

GSBadgeIcon

Parameters

GSBadge

Examples

GSBadge with Avatar