outlined_radio_buttons 0.0.1

A customizable radio button group with outlined styles and additional features like custom widgets, flexible sizing, and orientation options.

OutlinedRadioButtons Flutter Widget

English / 中文简体

A customizable radio button group with outlined styles and additional features such as custom widgets, flexible sizing, and vertical/horizontal orientation.

Example Screenshots

Features

• Horizontal and vertical orientation support
• Custom widgets for each radio option
• Customizable border width, color, and radius
• Custom text styles for selected and unselected options
• Supports custom size for each option

Installation

Add the outlined_radio_buttons package to your pubspec.yaml file:

flutter pub add outlined_radio_buttons

Usage

Import the package in your Flutter project:

import 'package:outlined_radio_buttons/outlined_radio_buttons.dart';

Basic Usage

OutlinedRadioButtons<int>(
  value: 1,
  options: [
    OutlinedRadioOption('Option 1', 1),
    OutlinedRadioOption('Option 2', 2),
    OutlinedRadioOption('Option 3', 3),
  ],
  onChanged: (value) => print("Selected: $value"),
)

Custom Radio Buttons with Widgets

You can add custom widgets for each option:

OutlinedRadioButtons<int>(
  value: 1,
  options: [
    OutlinedRadioOption('Option 1', 1),
    OutlinedRadioOption(
      'Option 2',
      2,
      customWidget: Icon(Icons.star),
    ),
    OutlinedRadioOption('Option 3', 3),
  ],
  onChanged: (value) => print("Selected: $value"),
)

Vertical Layout with Custom Builder

You can use a custom builder to create the option layout:

OutlinedRadioButtons<int>(
  options: [
    OutlinedRadioOption('Option 1', 1),
    OutlinedRadioOption('Option 2', 2),
    OutlinedRadioOption('Option 3', 3),
  ],
  direction: Axis.vertical,
  optionBuilder: (option, isSelected) {
    return Row(
      children: [
        Icon(
          isSelected ? Icons.radio_button_checked : Icons.radio_button_off,
          color: isSelected ? Colors.blue : Colors.grey,
        ),
        Text(option.label),
      ],
    );
  },
  onChanged: (value) => print("Selected: $value"),
)

Customization

• Orientation: Choose between horizontal and vertical layouts using the direction parameter.
• Borders: Customize the borders using borderWidth, borderColor, and borderRadius.
• Text Styling: Customize selected and unselected text styles with selectedTextStyle and unselectedTextStyle.
• Padding & Size: Adjust padding and size using optionPadding, optionWidth, optionHeight, and optionConstraints.