Flutter Radio Button example

In this tutorial, we’re gonna build a Flutter App that uses Radio Button to select between a number of options.

Overview

Flutter App

Our example is Currency Converter App that can convert USD to Euro, Pound or Yen:

flutter-radio-button-example

To do this, we are going to add 3 Radio Buttons that allow users to select Currency they want to convert from USD.

Radio Button

When one radio button in a group is selected, the others are un-selected. This means only one option is accepted at the same time.

Radio Button itself does not maintain any state. Instead, when the state of the radio button changes, the widget calls the onChanged callback.
=> listen for the onChanged callback and rebuild the Radio Button with groupValue to update state variables.

class _CurrencyState extends State {
  
  // state variable
  double _result = 0.0;
  
  void _handleRadioValueChange(int value) {
    setState(() {
      _radioValue = value;
  
      switch (_radioValue) {
        case 0:
          _result = ...
          break;
        case 1:
          _result = ...
          break;
        case 2:
          _result = ...
          break;
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
    ...
    children: [
      new Radio(
        value: 0,
        groupValue: _radioValue,
        onChanged: _handleRadioValueChange,
      ),
      new Radio(
        value: 1,
        groupValue: _radioValue,
        onChanged: _handleRadioValueChange,
      ),
      new Radio(
        value: 2,
        groupValue: _radioValue,
        onChanged: _handleRadioValueChange,
      ),
    ]
    ...
  }
}

Practice

Project Structure

flutter-radio-button-example-project-structure

Add Image to Project

Under Project folder level, create images directory, then add currencies.png (you will find this image in the Source Code below).

Open pubspec.yaml, add assets:

flutter:
  ...
  assets:
  - images/currencies.png
Create a Custom StatefulWidget

Create new currency.dart file at lib/ui/ for Currency class:

import 'package:flutter/material.dart';

class Currency extends StatefulWidget {
  @override
  State createState() {
    return new _CurrencyState();
  }
}

class _CurrencyState extends State {
  final TextEditingController _currencyController = new TextEditingController();
  int _radioValue = 0;

  static const EURO_MUL = 0.86;
  static const POUND_MUL = 0.75;
  static const YEN_MUL = 110.63;
  double _result = 0.0;
  String _textResult = '';

  void _handleRadioValueChange(int value) {
    setState(() {
      _radioValue = value;

      switch (_radioValue) {
        case 0:
          _result = _currencyCalculate(_currencyController.text, EURO_MUL);
          if (_result > -1.0) {
            _textResult = '${_currencyController.text} USD = ${_result.toStringAsFixed(3)} Euro';
          } else {
            _textResult = 'Cannot convert USD to Euro\nPlease check the Amount!';
          }
          break;
        case 1:
          _result = _currencyCalculate(_currencyController.text, POUND_MUL);
          if (_result > -1.0) {
            _textResult = '${_currencyController.text} USD = ${_result.toStringAsFixed(3)} Pound';
          } else {
            _textResult = 'Cannot convert USD to Pound\nPlease check the Amount!';
          }
          break;
        case 2:
          _result = _currencyCalculate(_currencyController.text, YEN_MUL);
          if (_result > -1.0) {
            _textResult = '${_currencyController.text} USD = ${_result.toStringAsFixed(3)} Yen';
          } else {
            _textResult = 'Cannot convert USD to Yen\nPlease check the Amount!';
          }
          break;
      }
    });
  }

  void _handleCurrencyAmountChange(String amount) {
    setState(() {
      switch (_radioValue) {
        case 0:
          _result = _currencyCalculate(amount, EURO_MUL);
          if (_result > -1.0) {
            _textResult = '$amount USD = ${_result.toStringAsFixed(3)} Euro';
          } else {
            _textResult = 'Cannot convert USD to Euro\nPlease check the Amount!';
          }
          break;
        case 1:
          _result = _currencyCalculate(amount, POUND_MUL);
          if (_result > -1.0) {
            _textResult = '$amount USD = ${_result.toStringAsFixed(3)} Pound';
          } else {
            _textResult = 'Cannot convert USD to Pound\nPlease check the Amount!';
          }
          break;
        case 2:
          _result = _currencyCalculate(amount, YEN_MUL);
          if (_result > -1.0) {
            _textResult = '$amount USD = ${_result.toStringAsFixed(3)} Yen';
          } else {
            _textResult = 'Cannot convert USD to Yen\nPlease check the Amount!';
          }
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Currency Converter'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: new Container(
          alignment: Alignment.center,
          child: new ListView(
            padding: const EdgeInsets.all(25.0),
            children: [
              new Image.asset(
                'images/currencies.png',
                height: 150.0,
                width: 150.0,
              ),
              new Container(
                margin: const EdgeInsets.all(3.0),
                alignment: Alignment.center,
                child: new Column(
                  children: [
                    new TextField(
                      controller: _currencyController,
                      keyboardType: TextInputType.number,
                      decoration: new InputDecoration(
                        labelText: 'Amount',
                        hintText: 'in USD',
                        icon: new Icon(Icons.account_balance),
                      ),
                      onChanged: _handleCurrencyAmountChange,
                    ),
                    new Padding(padding: new EdgeInsets.all(5.0)),
                    new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        new Radio(
                          value: 0,
                          groupValue: _radioValue,
                          onChanged: _handleRadioValueChange,
                        ),
                        new Text('Euro'),
                        new Radio(
                          value: 1,
                          groupValue: _radioValue,
                          onChanged: _handleRadioValueChange,
                        ),
                        new Text('Pound'),
                        new Radio(
                          value: 2,
                          groupValue: _radioValue,
                          onChanged: _handleRadioValueChange,
                        ),
                        new Text('Yen'),
                      ],
                    ),
                    new Padding(padding: new EdgeInsets.all(15.0)),
                    new Text(
                      _currencyController.text.isEmpty ? 'Please enter the Amount!' : _textResult,
                      style: new TextStyle(
                        color: Colors.blueAccent,
                        fontSize: 20.0,
                      ),
                    ),
                  ],
                ),
              )
            ],
          )),
    );
  }

  double _currencyCalculate(String amount, double multiplier) {
    double _amount = amount.isNotEmpty ? double.parse(amount) : 0.0;

    if (_amount.toString().isNotEmpty && _amount > 0) {
      return _amount * multiplier;
    } else {
      return -1.0;
    }
  }
}

– Radio Button onChanged callback points to _handleRadioValueChange() method.
– Inside _handleRadioValueChange(), we use setState() to set the Widget’s state, and _textResult state variable will be updated to show the result.
– We create a TextEditingController (_currencyController) to get input Amount value (TextField), and we also use onChanged callback of TextField class to update the result everytime the text changes.

Inflate and attach stateful widget to screen

main.dart

import 'package:flutter/material.dart';
import './ui/currency.dart';

void main() {
  runApp(new MaterialApp(
    title: 'JSA Currency Converter',
    home: new Currency(),
  ));
}

Source Code

currency_converter



By grokonez | July 6, 2018.

Last updated on February 7, 2020.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*