GSRadio

The GSRadio widget presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys.

API Reference

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


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSRadio<Value>(
      size: GSRadioSizes.$md,
      isDisabled: false,
      isInvalid: false,
      value: Value.four,
      groupValue: groupValue,
      onChanged: (p0) {
        setState(() {
          groupValue = p0!;
      });
    },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'text'),
      style: GSStyle(margin: const EdgeInsets.only(right: $GSSpace.$2)),
    )

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.

GSRadio

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

Parameters	Type	Default	Description
value	string	-	The value to be used in the radio input. This is the value that will be returned on form submission.
onChanged	function	-	Function called when the state of the radio changes.
isDisabled	bool	false	To manually set disable to the radio.
isInvalid	bool	false	To manually set invalid to the radio.

GSRadioIcon

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

GSRadioText

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

Parameters

GSRadio widget is created using InkWell widget from flutter. It extends all the props supported by InkWell and additionally the properties mentioned below.

GSRadio

Name	Value	Default
size	lg \| md \| sm	md

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.

Multiple Radio

GSRadio buttons provide a mutually exclusive selection mechanism, allowing users to choose a single option from a set of related choices.


    import 'package:gluestack_ui/gluestack_ui.dart';

    Value groupValueOne = Value.one;
    GSVStack(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
      GSRadio<Value>(
      value: Value.one,
      groupValue: groupValueOne,
      onChanged: (p0) {
        setState(() {
          groupValueOne = p0!;
        });
      },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'English'),
      style: GSStyle(margin: EdgeInsets.only(right: $GSSpace.$2)),
    ),
    const SizedBox(
      height: 20,
    ),
    GSRadio<Value>(
      value: Value.two,
      groupValue: groupValueOne,
      onChanged: (p0) {
        setState(() {
          groupValueOne = p0!;
        });
      },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'French'),
      style: GSStyle(margin: EdgeInsets.only(right: $GSSpace.$2)),
    ),
    const SizedBox(
      height: 20,
    ),
    GSRadio<Value>(
      value: Value.three,
      groupValue: groupValueOne,
      onChanged: (p0) {
        setState(() {
          groupValueOne = p0!;
        });
      },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'German'),
      style: GSStyle(margin: EdgeInsets.only(right: $GSSpace.$2)),
    ),
    ],
    )

Horizontal

GSRadio buttons can be used horizontally.


  import 'package:gluestack_ui/gluestack_ui.dart';
  
  GSHStack(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    GSRadio<Value>(
      value: Value.one,
      groupValue: groupValueOne,
      onChanged: (p0) {
        setState(() {
          groupValueOne = p0!;
        });
      },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'Credit Card'),
      style: GSStyle(margin: EdgeInsets.only(right: $GSSpace.$2)),
    ),
    const SizedBox(
      width: 20,
    ),
    GSRadio<Value>(
      value: Value.two,
      groupValue: groupValueOne,
      onChanged: (p0) {
        setState(() {
          groupValueOne = p0!;
        });
      },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'UPI'),
      style: GSStyle(margin: EdgeInsets.only(right: $GSSpace.$2)),
    ),
    const SizedBox(
      width: 20,
    ),
    GSRadio<Value>(
      value: Value.three,
      groupValue: groupValueOne,
      onChanged: (p0) {
        setState(() {
          groupValueOne = p0!;
        });
      },
      icon: const GSRadioIcon<Value>(),
      label: const GSRadioText<Value>(text: 'Cash on Delivery'),
      style: GSStyle(margin: EdgeInsets.only(right: $GSSpace.$2)),
    ),
    ],
    )

With help text

GSRadio buttons can be used with helper text.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSVStack(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        GSRadio<Value>(
          value: Value.one,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          icon: const GSRadioIcon<Value>(),
          label: const GSVStack(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GSRadioText<Value>(text: 'Extended Coverage'),
              GSText(text: 'Extra services included'),
            ],
          ),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
              bottom: $GSSpace.$4,
            ),
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        GSRadio<Value>(
          value: Value.two,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          icon: const GSRadioIcon<Value>(),
          label: const GSVStack(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GSRadioText<Value>(text: 'Basic Coverage'),
              GSText(text: 'Basic services'),
            ],
          ),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
              bottom: $GSSpace.$4,
            ),
          ),
        ),
      ],
    )

Form Control

GSRadio buttons can be used inside FormControl for better control of states and functionality.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSVStack(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const GSHeading(text: 'Which time slot works best for you?'),
        const SizedBox(
          height: 10,
        ),
        GSRadio<Value>(
          value: Value.one,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          icon: const GSRadioIcon<Value>(),
          label: const GSRadioText<Value>(text: 'Monday'),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
            ),
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        GSRadio<Value>(
          value: Value.two,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          icon: const GSRadioIcon<Value>(),
          label: const GSRadioText<Value>(text: 'Tuesday'),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
            ),
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        GSRadio<Value>(
          value: Value.three,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          icon: const GSRadioIcon<Value>(),
          label: const GSRadioText<Value>(text: 'Wednesday'),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
            ),
          ),
        ),
        const SizedBox(
          height: 10,
        ),
        const GSText(text: 'Choose a time slot for the meeting'),
      ],
    )

Controlled

The GSRadio widget can be used with a controlled state, enabling precise management of the selected option through external state management.


    import 'package:gluestack_ui/gluestack_ui.dart';

    Value groupValueOne = Value.one;

    GSVStack(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        GSRadio<Value>(
          value: Value.one,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          label: const GSRadioText<Value>(text: 'Apartments'),
          icon: const GSRadioIcon<Value>(),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
            ),
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        GSRadio<Value>(
          value: Value.two,
          groupValue: groupValueOne,
          onChanged: (p0) {
            setState(() {
              groupValueOne = p0!;
            });
          },
          icon: const GSRadioIcon<Value>(),
          label: const GSRadioText<Value>(text: 'Houses'),
          style: GSStyle(
            margin: EdgeInsets.only(
              right: $GSSpace.$4,
            ),
          ),
        ),
      ],
    )