GSSwitch

The GSSwitch widget offers a stylish alternative to the GSCheckbox, allowing users to enable or disable an option with a sleek sliding motion. This widget is perfect for adding a touch of elegance and interactivity to your user interface.

API Reference

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


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSSwitch(
      size: GSSwitchSizes.$md,
      isDisabled: false,
      style: GSStyle(
        checked: GSStyle(
          thumbColor: Colors.grey,
          activeThumbColor: Colors.blue,
        ),
      ),
      value: val1,
      onToggle: (bool value) {
        setState(() {
          val1 = value;
        });
      },
    )

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.

GSSwitch

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

Parameters	Type	Default	Description
isDisabled	bool	false	When true, the switch is disabled and cannot be toggled
isInvalid	bool	false	When true, the switch displays an error state.
isHovered	bool	false	When true, the switch displays a hover state.
value	bool	false	The value of the switch. If true the switch will be turned on.
onToggle	(void Function(bool)? onToggle	-	Callback to be invoked when switch value is changed.

Parameters

GSSwitch widget is created using Switch widget from flutter. It extends all the props supported by Flutter Switch and additionally the properties mentioned below.

GSSwitch

Name	Value	Default
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 props 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.

GSSwitch With Label

An example of a switch widget with a label, which includes another switch widget for toggling additional options.


    import 'package:gluestack_ui/gluestack_ui.dart';

    bool isSelected = false;

    GSHStack(
      children: [
        GSSwitch(
          value: isSelected,
          onToggle: (value) {
            setState(() {
              isSelected = value;
            });
          },
        ),
        const SizedBox(
          width: 10,
        ),
        const GSText(text: 'Allow notifications'),
      ],
    )

Checked State

An example of a switch widget used within a checked state widget to represent a pre-selected or activated option.


    import 'package:gluestack_ui/gluestack_ui.dart';
    
    
    bool isSelected = true;
    
    GSHStack(
      children: [
        GSSwitch(
          value: isSelected,
          onToggle: (value) {
            setState(() {
              isSelected = value;
            });
          },   
        ),
        const SizedBox(
          width: 10,
        ),
        const GSText(text: 'Public profile'),
      ],
    )

Color scheme

An example of a switch widget being used with a different color scheme.


    import 'package:gluestack_ui/gluestack_ui.dart';

    bool isSelected = false;
    bool isSelectedTwo = false;
    bool isSelectedThree = false;

    GSVStack(
      children: [
        GSSwitch(
          style: GSStyle(
            trackColorTrue: $GSColors.red500,
            onHover: GSStyle(
              trackColorTrue: $GSColors.red600,
            ),
          ),
          value: isSelected,
          onToggle: (value) {
            setState(() {
              isSelected = value;
            });
          },
        ),
        const SizedBox(
          height: 20,
        ),
        GSSwitch(
          style: GSStyle(
            trackColorTrue: $GSColors.green500,
            onHover: GSStyle(
              trackColorTrue: $GSColors.green600,
            ),
          ),
          value: isSelectedTwo,
          onToggle: (value) {
            setState(() {
              isSelectedTwo = value;
            });
          },
        ),
        const SizedBox(
          height: 20,
        ),
        GSSwitch(
          style: GSStyle(
            trackColorTrue: $GSColors.orange400,
            onHover: GSStyle(
              trackColorTrue: $GSColors.orange600,
            ),
          ),
          value: isSelectedThree,
          onToggle: (value) {
            setState(() {
              isSelectedThree = value;
            });
          },
        ),
      ],
    )