GSVStack

GSVStack organizes items vertically in a layout. Alternatively, you can use Column as an alias for GSVStack to achieve the same layout.

API Reference

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


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSVStack(
      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.

Accessibility

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

In essence, the GSVStack acts as a container that inherits and propagates the accessibility attributes of its child views.

Parameters

GSVStack widget is created using Column widget from flutter. It extends all the properties supported by Flutter Column 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.

GSVStack Reversed

A GSVStack widget with the reversed parameter reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSVStack(
      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

GSVStack

API Reference

Import

Widget Parameters

Accessibility

Parameters

Examples

GSVStack Reversed