GSToast

GSToast is a widget that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.

API Reference

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


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSButton(
      size: GSButtonSizes.$lg,
      child: const GSButtonText(text: "Click Me"),
      onPressed: () {
        showToast(
          context,
          child: const GSToast(
            variant: GSToastVariants.solid,
            action: GSToastActions.success,
            child: const GSVStack(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                GSToastTitle(
                  title: "Toast Title",
                ),
                GSToastDescription(
                  description: "Here is the toast description!",
                ),
              ],
            ),
          ),
        );
      },
    )

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.

GSToast

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

GSToastTitle

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

ToastDescription

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

Accessibility

We have outlined the various features that ensure the GSToast widget is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the WAI-ARIA design pattern.

Keyboard

Tab + Enter: Triggers the toast's action.

VoiceOver: When the toast is focused, the screen reader will announce the toast's title.

Parameters

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

GSToast

Name	Value	Default
action	error \| warning \| success \| info \| attention	attention
variant	solid \| outline \| accent	solid

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.

GSToast with actions

A versatile GSToast widget with customizable actions, enabling users to take various actions directly from the notification popup for enhanced usability and convenience.

GSToast with variants

A versatile GSToast widget with multiple variants, offering different styles and visual cues to effectively convey various types of notifications and feedback to users.

Edit this page on GitHub