flutter 自定义图片实现Radio和CheckBox

最新推荐文章于 2025-05-10 11:31:52 发布

原创

最新推荐文章于 2025-05-10 11:31:52 发布 · 990 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

自定义实现Radio和CheckBox，利用图片实现更换选中和不选择的状态，以下代码是关键代码

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class RadioOption<T> extends StatelessWidget {
  final T value;
  final T? groupValue;
  final String selectImage;
  final String unSelectImage;
  final String text;
  final ValueChanged<T?> onChanged;

  const RadioOption({
    required this.value,
    required this.groupValue,
    required this.text,
    required this.selectImage,
    required this.unSelectImage,
    required this.onChanged,
  });

  Widget _buildLabel() {
    final bool isSelected = value == groupValue;
    return SizedBox(
      width: 30,
      height: 30,
      child: SvgPicture.asset(isSelected ? selectImage : unSelectImage),
    );
  }

  Widget _buildText() {
    return Text(
      text,
      style: const TextStyle(color: Colors.black, fontSize: 24),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(