GSDivider

Revamp your content organization with the GSDivider widget! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.

API Reference

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


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text("Easy"),
        ),
        GSDivider(
          orientation: GSOrientations.vertical,
          style: GSStyle(height: 30),
        ),
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text("Difficult"),
        ),
      ],
    )

API Reference

Import

To use this component 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.

GSDivider

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

GSDivider

Name	Value	Default
orientation	vertical \| horizontal	horizontal

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.

Variants

A GSDivider widget with different layouts offers versatile options for visually dividing content in various arrangements, such as horizontal or vertical orientations, enabling flexible and visually appealing designs for organizing and structuring widgets within a user interface.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSVStack(
      children: [
        GSHStack(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const GSText(
              text: "Simple",
            ),
            const SizedBox(
              width: 10,
            ),
            GSDivider(
              orientation: GSOrientations.vertical,
              style: GSStyle(
                height: 30,
                color: $GSColors.rose300,
              ),
            ),
            const SizedBox(
              width: 10,
            ),
            const GSText(
              text: "Easy",
            ),
            const SizedBox(
              width: 10,
            ),
            GSDivider(
              orientation: GSOrientations.vertical,
              style: GSStyle(
                height: 30,
                color: $GSColors.green300,
              ),
            ),
            const SizedBox(
              width: 10,
            ),
            const GSText(
              text: "Difficult",
            ),
          ],
        ),
      ],
    )

Orientation

A GSDivider widget with a specified divider orientation allows for clear visual separation of content, either horizontally or vertically, providing a structured and organized layout within a user interface.

Adding content within a GSDivider

A GSDivider widget with added content allows for the inclusion of additional text or elements alongside the dividing line, enhancing the visual and informational aspects of the divider while providing a seamless integration of content within a user interface.

Edit this page on GitHub

GSDivider

API Reference

Import

Widget Parameters

GSDivider

GSDivider

Examples

Variants

Orientation

Adding content within a GSDivider