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.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:outlined_radio_buttons/outlined_radio_buttons.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a purple toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Radio Group Demo')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildHorizontalExample(),
            const SizedBox(height: 30),
            _buildVerticalExample(),
            const SizedBox(height: 30),
            _buildCustomSizeExample(),
          ],
        ),
      ),
    );
  }

  Widget _buildHorizontalExample() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Horizontal with Custom Widgets:'),
        const SizedBox(height: 10),
        OutlinedRadioButtons<int>(
          value: 1,
          options: [
            OutlinedRadioOption('Option 1', 1),
            OutlinedRadioOption(
              'Option 2',
              2,
              customWidget: const Icon(Icons.star),
            ),
            OutlinedRadioOption('Long Text Option 3', 3),
          ],
          selectedTextStyle: TextStyle(
            fontSize: 14,
            overflow: TextOverflow.ellipsis,
          ),
          selectedColorFill: Colors.blue.withValues(alpha: 0.001),
          borderWidth: 2,
          unselectedTextStyle: TextStyle(
            fontSize: 14,
            overflow: TextOverflow.ellipsis,
          ),
          optionPadding: EdgeInsets.all(4),
          optionWidth: 100,
          optionHeight: 40,
          selectedColor: Colors.blue,
          onChanged: (value) => print("Selected: $value"),
        ),
      ],
    );
  }

  Widget _buildVerticalExample() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Vertical with Builder:'),
        const SizedBox(height: 10),
        OutlinedRadioButtons<int>(
          options: [
            OutlinedRadioOption('First', 1),
            OutlinedRadioOption('Second', 2),
            OutlinedRadioOption('Third', 3),
          ],
          direction: Axis.vertical,
          optionBuilder:
              (option, isSelected) => Container(
            padding: const EdgeInsets.all(8),
            child: Builder(
              builder: (context) {
                return Row(
                  children: [
                    Icon(
                      isSelected
                          ? Icons.radio_button_checked
                          : Icons.radio_button_off,
                      color:
                      isSelected
                          ? Theme.of(context).primaryColor
                          : Colors.grey,
                    ),
                    const SizedBox(width: 12),
                    Text(option.label),
                  ],
                );
              },
            ),
          ),
          onChanged: (value) => print("Selected: $value"),
        ),
      ],
    );
  }

  Widget _buildCustomSizeExample() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Custom Size Options:'),
        const SizedBox(height: 10),
        OutlinedRadioButtons<int>(
          options: [
            OutlinedRadioOption('Small', 1),
            OutlinedRadioOption('Medium', 2),
            OutlinedRadioOption('Large', 3),
            OutlinedRadioOption('Large Large', 4),
          ],
          optionConstraints: const BoxConstraints(
            minWidth: 80,
            maxWidth: 150,
            minHeight: 40,
          ),
          borderWidth: 2,
          borderRadius: BorderRadius.circular(16),
          onChanged: (value) => print("Selected: $value"),
        ),
      ],
    );
  }
}