GSHStack

GSHStack arranges its child widgets horizontally, making it a suitable layout widget for creating a row of items. It is worth noting that Row is just an alternative name for GSHStack.

API Reference

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


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      mainAxisAlignment: MainAxisAlignment.center,
      isReversed: false,
      space: GSSpaces.$none,
      children: [
        GSBox(
          style: GSStyle(height: 100, width: 100, color: $GSColors.blue300),
          child: const Text('1'),
        ),
        GSBox(
          style: GSStyle(height: 100, width: 100, color: $GSColors.blue400),
          child: const Text('2'),
        ),
        GSBox(
          style: GSStyle(height: 100, width: 100, color: $GSColors.blue500),
          child: const Text('3'),
        ),
      ],
    )

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.

GSHStack

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

Accessibility

The accessibility of a GSHStack is primarily determined by the accessibility information of the widgets it contains. When you pass an accessible widget inside a GSHStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.

Parameters

GSHStack widget is created using Row widget from flutter. It extends all the properties supported by Flutter Row and additionally the parameters mentioned below.

Parameters	Type	Default	Description
space	GSSpaces	-	It sets the space between children.
reversed	boolean	-	When true, it places the HStack items in reverse direction.

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.

GSHStack Reversed

An GSHStack widget with the reversed parameter reverses the order of horizontally stacked elements, allowing for customized layouts and visual arrangements of content within a user interface.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      mainAxisAlignment: MainAxisAlignment.center,
      isReversed: true,
      space: GSSpaces.$none,
      children: [
        GSBox(
          style: GSStyle(height: 100, width: 100, color: $GSColors.blue300),
          child: const Text('1'),
        ),
        GSBox(
          style: GSStyle(height: 100, width: 100, color: $GSColors.blue400),
          child: const Text('2'),
        ),
        GSBox(
          style: GSStyle(height: 100, width: 100, color: $GSColors.blue500),
          child: const Text('3'),
        ),
      ],
    )

Edit this page on GitHub

GSHStack

API Reference

Import

Widget Parameters

GSHStack

Accessibility

Parameters

Examples

GSHStack Reversed