Flutter Checkbox & Radio

Selection widgets for user choices

☑️ What are Selection Widgets?

Checkbox and Radio buttons let users make selections. Checkboxes allow multiple choices while Radio buttons permit only one selection from a group, perfect for forms and settings. 


// Simple checkbox
Checkbox(
  value: true,
  onChanged: (bool? value) {},
)

Output:

Selection Types

☑️

Checkbox

Multiple selections allowed 

Checkbox(
  value: isChecked,
  onChanged: (value) {},
)
🔘

Radio

Single selection from group 

Radio(
  value: 1,
  groupValue: selected,
  onChanged: (value) {},
)
📋

CheckboxListTile

Checkbox with label 

CheckboxListTile(
  title: Text('Option'),
  value: isChecked,
  onChanged: (value) {},
)
📝

RadioListTile

Radio with label 

RadioListTile(
  title: Text('Option'),
  value: 1,
  groupValue: selected,
  onChanged: (value) {},
)

🔹 Basic Checkbox

Simple checkbox with state management: 

class CheckboxExample extends StatefulWidget {
  @override
  _CheckboxExampleState createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value ?? false;
            });
          },
        ),
        Text('Accept terms and conditions'),
      ],
    );
  }
}

Output:

🔹 CheckboxListTile

Checkbox with built-in label and tap area: 

bool _notifications = false;
bool _newsletter = false;

Column(
  children: [
    CheckboxListTile(
      title: Text('Enable Notifications'),
      subtitle: Text('Receive app notifications'),
      value: _notifications,
      onChanged: (bool? value) {
        setState(() {
          _notifications = value ?? false;
        });
      },
      secondary: Icon(Icons.notifications),
    ),
    CheckboxListTile(
      title: Text('Subscribe to Newsletter'),
      value: _newsletter,
      onChanged: (bool? value) {
        setState(() {
          _newsletter = value ?? false;
        });
      },
      controlAffinity: ListTileControlAffinity.leading,
    ),
  ],
)

Output:

🔹 Radio Buttons

Single selection from multiple options: 

class RadioExample extends StatefulWidget {
  @override
  _RadioExampleState createState() => _RadioExampleState();
}

class _RadioExampleState extends State {
  String? selectedGender;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Radio(
              value: 'male',
              groupValue: selectedGender,
              onChanged: (String? value) {
                setState(() {
                  selectedGender = value;
                });
              },
            ),
            Text('Male'),
          ],
        ),
        Row(
          children: [
            Radio(
              value: 'female',
              groupValue: selectedGender,
              onChanged: (String? value) {
                setState(() {
                  selectedGender = value;
                });
              },
            ),
            Text('Female'),
          ],
        ),
      ],
    );
  }
}

Output:

🔹 RadioListTile

Radio buttons with labels and descriptions: 

enum PaymentMethod { card, cash, online }

class PaymentSelection extends StatefulWidget {
  @override
  _PaymentSelectionState createState() => _PaymentSelectionState();
}

class _PaymentSelectionState extends State {
  PaymentMethod? _method = PaymentMethod.card;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RadioListTile(
          title: Text('Credit Card'),
          subtitle: Text('Pay with credit or debit card'),
          value: PaymentMethod.card,
          groupValue: _method,
          onChanged: (PaymentMethod? value) {
            setState(() {
              _method = value;
            });
          },
          secondary: Icon(Icons.credit_card),
        ),
        RadioListTile(
          title: Text('Cash on Delivery'),
          subtitle: Text('Pay when you receive'),
          value: PaymentMethod.cash,
          groupValue: _method,
          onChanged: (PaymentMethod? value) {
            setState(() {
              _method = value;
            });
          },
          secondary: Icon(Icons.money),
        ),
        RadioListTile(
          title: Text('Online Payment'),
          subtitle: Text('UPI, Net Banking, Wallet'),
          value: PaymentMethod.online,
          groupValue: _method,
          onChanged: (PaymentMethod? value) {
            setState(() {
              _method = value;
            });
          },
          secondary: Icon(Icons.phone_android),
        ),
      ],
    );
  }
}

Output:

🔹 Custom Styling

Customize checkbox and radio appearance: 

// Custom colored checkbox
Checkbox(
  value: isChecked,
  onChanged: (value) {},
  activeColor: Colors.green,
  checkColor: Colors.white,
)

// Custom colored radio
Radio(
  value: 1,
  groupValue: selected,
  onChanged: (value) {},
  activeColor: Colors.purple,
)

🧠 Test Your Knowledge

Which widget allows multiple selections?