flutter-tutorial

Flutter Radio Widget

A radio button, often known as an options button, is a button that stores a Boolean value. It lets the user to select only one option from a list of possibilities. This distinguishes it from a checkbox, which allows us to pick several options and then return the unselected state. We can group two or more radio buttons together and display them on the screen as circular holes with white space (for unselected) or a dot (for selected) (for selected). We may additionally include a label for each related radio button that describes the option represented by the radio button. By clicking the mouse on the circular hole or using a keyboard shortcut, you can select a radio button.

Example

In this example, we will create a Flutter Application with three Radio button widgets, as in the above code snippet. The Radio widget displays only the radio button, but not the label. To display the label also, we use ListTile widget with label text assigned to title property, and radio button assigned to leading property.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Learn Code Zone';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

enum OS { mac, windows, linux }

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  OS? _os = OS.mac;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const SizedBox(
            height: 30,
          ),
          const Text('Which Operating System are your currently using?'),
          const SizedBox(
            height: 10,
          ),
          ListTile(
              title: const Text('Mac'),
              leading: Radio<OS>(
                value: OS.mac,
                groupValue: _os,
                onChanged: (OS? value) {
                  setState(() {
                    _os = value;
                  });
                },
              )),
          ListTile(
              title: const Text('Windows'),
              leading: Radio<OS>(
                value: OS.windows,
                groupValue: _os,
                onChanged: (OS? value) {
                  setState(() {
                    _os = value;
                  });
                },
              )),
          ListTile(
              title: const Text('Linux'),
              leading: Radio<OS>(
                value: OS.linux,
                groupValue: _os,
                onChanged: (OS? value) {
                  setState(() {
                    _os = value;
                  });
                },
              )),
        ],
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.