0
0
Fluttermobile~20 mins

Radio buttons in Flutter - Mini App: Build & Ship

Choose your learning style9 modes available
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