Flutter Selection Controls: Radio Button, Switch, and Checkbox Explained

 Flutter Selection Controls: Radio Button, Switch, and Checkbox Explained

Flutter provides various selection controls that allow users to make choices in an app. These include Radio Buttons, Switches, and Checkboxes, each serving a unique purpose. Understanding when and how to use these controls can enhance your app’s user experience.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true, // Enable Material 3 features
        colorSchemeSeed: Colors.blue,
      ),
      home: const SelectionControlsScreen(),
    );
  }
}

class SelectionControlsScreen extends StatefulWidget {
  const SelectionControlsScreen({super.key});

  @override
  _SelectionControlsScreenState createState() => _SelectionControlsScreenState();
}

class _SelectionControlsScreenState extends State<SelectionControlsScreen> {
  // Radio Button selection
  String? selectedRadio = 'Option 1';

  // Switch toggle state
  bool isSwitched = false;

  // Checkbox selections
  bool isChecked1 = false;
  bool isChecked2 = false;

  // Segmented button selection
  String selectedSegment = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Selection Controls in Flutter")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [

            // Radio Button (Single Selection)
            const Text("Radio Button (Single Selection)", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            ListTile(
              title: const Text("Option 1"),
              leading: Radio(
                value: 'Option 1',
                groupValue: selectedRadio,
                onChanged: (value) {
                  setState(() {
                    selectedRadio = value;
                  });
                },
              ),
            ),
            ListTile(
              title: const Text("Option 2"),
              leading: Radio(
                value: 'Option 2',
                groupValue: selectedRadio,
                onChanged: (value) {
                  setState(() {
                    selectedRadio = value;
                  });
                },
              ),
            ),

            const SizedBox(height: 16),

            // Switch (Toggle Button)
            const Text("Switch (Toggle Button)", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            SwitchListTile(
              title: const Text("Enable Feature"),
              value: isSwitched,
              onChanged: (value) {
                setState(() {
                  isSwitched = value;
                });
              },
            ),

            const SizedBox(height: 16),

            // Checkbox (Multiple Selection)
            const Text("Checkbox (Multiple Selection)", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            CheckboxListTile(
              title: const Text("Option 1"),
              value: isChecked1,
              onChanged: (value) {
                setState(() {
                  isChecked1 = value!;
                });
              },
            ),
            CheckboxListTile(
              title: const Text("Option 2"),
              value: isChecked2,
              onChanged: (value) {
                setState(() {
                  isChecked2 = value!;
                });
              },
            ),

            const SizedBox(height: 16),

            // Segmented Button (Material 3 Toggle Button)
            const Text("Segmented Button (Material 3)", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            Center(
              child: SegmentedButton<String>(
                segments: const [
                  ButtonSegment(value: 'Option 1', label: Text('Option 1')),
                  ButtonSegment(value: 'Option 2', label: Text('Option 2')),
                  ButtonSegment(value: 'Option 3', label: Text('Option 3')),
                ],
                selected: {selectedSegment},
                onSelectionChanged: (newSelection) {
                  setState(() {
                    selectedSegment = newSelection.first;
                  });
                },
              ),
            ),

          ],
        ),
      ),
    );
  }
}