Radio buttons in Flutter - Mini App: Build & Ship

Build: Radio Button Selection

A screen that lets users select their favorite fruit using radio buttons.

Target UI

Favorite Fruit:

(o) Apple
( ) Banana
( ) Cherry

[Submit]

Display a title 'Favorite Fruit:'

Show three radio buttons labeled Apple, Banana, and Cherry

Only one radio button can be selected at a time

A Submit button below the radio buttons

When Submit is tapped, show a SnackBar with the selected fruit

Starter Code

Flutter

import 'package:flutter/material.dart';

class RadioButtonScreen extends StatefulWidget {
  @override
  State<RadioButtonScreen> createState() => _RadioButtonScreenState();
}

class _RadioButtonScreenState extends State<RadioButtonScreen> {
  String? _selectedFruit;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Radio Button Selection')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Favorite Fruit:', style: TextStyle(fontSize: 20)),
            // TODO: Add radio buttons here
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // TODO: Show SnackBar with selected fruit
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class RadioButtonScreen extends StatefulWidget {
  @override
  State<RadioButtonScreen> createState() => _RadioButtonScreenState();
}

class _RadioButtonScreenState extends State<RadioButtonScreen> {
  String? _selectedFruit;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Radio Button Selection')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Favorite Fruit:', style: TextStyle(fontSize: 20)),
            RadioListTile<String>(
              title: Text('Apple'),
              value: 'Apple',
              groupValue: _selectedFruit,
              onChanged: (value) {
                setState(() {
                  _selectedFruit = value;
                });
              },
            ),
            RadioListTile<String>(
              title: Text('Banana'),
              value: 'Banana',
              groupValue: _selectedFruit,
              onChanged: (value) {
                setState(() {
                  _selectedFruit = value;
                });
              },
            ),
            RadioListTile<String>(
              title: Text('Cherry'),
              value: 'Cherry',
              groupValue: _selectedFruit,
              onChanged: (value) {
                setState(() {
                  _selectedFruit = value;
                });
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                final snackBar = SnackBar(
                  content: Text(_selectedFruit == null
                      ? 'Please select a fruit.'
                      : 'You selected: $_selectedFruit'),
                );
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

We use RadioListTile widgets for each fruit option. They share the same groupValue which is _selectedFruit. When a user taps a radio button, onChanged updates the state to the selected fruit. The Submit button shows a SnackBar with the selected fruit or asks the user to select one if none is chosen.

Final Result

Completed Screen

Favorite Fruit:

(o) Apple
( ) Banana
( ) Cherry

[Submit]

Tapping a radio button selects that fruit and deselects others

Tapping Submit shows a message at the bottom with the selected fruit or asks to select one

Stretch Goal

Add a reset button that clears the selection

💡 Hint

Add a TextButton below Submit that sets _selectedFruit to null inside setState