Hướng dẫn và ví dụ Flutter Radio

Constructor
Ví dụ

Radio Buttons là một widget cho phép người dùng chọn một tùy chọn từ một nhóm các tùy chọn loại trừ nhau. Trong Flutter, chúng ta có thể dễ dàng triển khai các radio buttons bằng cách sử dụng widget Radio.

RadioListTile là một widget được xây dựng dựa trên Radio, hỗ trợ Icon và Text rất thuận tiện mà bạn có thể cân nhắc sử dụng.
Hướng dẫn và ví dụ Flutter RadioListTile

1. Constructor

Radio({
  Key? key, 
  required T value, 
  required T? groupValue,
  required ValueChanged<T?>? onChanged,
  MouseCursor? mouseCursor, 
  bool toggleable = false, 
  Color? activeColor, 
  MaterialStateProperty<Color?>? fillColor,
  Color? focusColor, 
  Color? hoverColor, 
  MaterialStateProperty<Color?>? overlayColor,
  double? splashRadius, 
  MaterialTapTargetSize? materialTapTargetSize, 
  VisualDensity? visualDensity,
  FocusNode? focusNode,
  bool autofocus = false
});

value	Giá trị liên kết với Radio. Khi nút Radio này được chọn, giá trị này được truyền đến hàm onChanged.
groupValue	Giá trị đang được chọn hiện tại trong nhóm các nút Radio. groupValue phải khớp với giá trị của nút Radio đã chọn.
toggleable	Một tham số tùy chọn xác định xem nút Radio này có thể được bật và tắt hay không. Nếu đặt thành true, nhấp vào nút Radio đã chọn sẽ bỏ chọn nút đó.
onChanged	Một hàm callback được gọi khi nút Radio được chọn.

2. Ví dụ

main_radio_ex1.dart

import 'package:flutter/material.dart';

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

class RadioExampleApp extends StatelessWidget {
  const RadioExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: RadioExample(),
    );
  }
}

enum Gender { male, female }

class RadioExample extends StatefulWidget {
  const RadioExample({super.key});

  @override
  State<RadioExample> createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  Gender? _gender = Gender.male;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Radio Demo'),
        backgroundColor: Colors.blue,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            Row(
              children: [
                Radio<Gender>(
                  value: Gender.male,
                  groupValue: _gender,
                  onChanged: (Gender? value) {
                    setState(() {
                      _gender = value;
                    });
                  },
                ),
                const Text('Male'),
              ],
            ),
            Row(
              children: [
                Radio<Gender>(
                  value: Gender.female,
                  groupValue: _gender,
                  onChanged: (Gender? value) {
                    setState(() {
                      _gender = value;
                    });
                  },
                ),
                const Text('Female'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Hướng dẫn và ví dụ Flutter Radio

1. Constructor

2. Ví dụ

Các hướng dẫn lập trình Flutter

Các hướng dẫn lập trình Flutter

Các bài viết mới nhất