flutter 自定义图片实现Radio和CheckBox

 自定义实现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(
      margin: EdgeInsets.all(8),
      child: InkWell(
        onTap: () => onChanged(value),
        child: Padding(
          padding: const EdgeInsets.all(5),
          child: Row(
            children: [
              _buildLabel(),
              const SizedBox(width: 10),
              _buildText(),
            ],
          ),
        ),
      ),
    );
  }
}

class CheckBoxOption extends StatelessWidget {
  final bool value;
  final bool autofocus;
  final String selectImage;
  final String unSelectImage;
  final String text;
  final ValueChanged onChanged;

  const CheckBoxOption({
    required this.value,
    required this.text,
    required this.selectImage,
    required this.unSelectImage,
    required this.onChanged,
    this.autofocus = false,
  });

  Widget _buildLabel() {
    final bool isSelected = value;
    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(
      margin: EdgeInsets.all(8),
      child: InkWell(
        onTap: () => onChanged(value),
        child: Padding(
          padding: const EdgeInsets.all(5),
          child: Row(
            children: [
              _buildLabel(),
              const SizedBox(width: 10),
              _buildText(),
            ],
          ),
        ),
      ),
    );
  }
}

具体使用方式

import 'package:flutter/material.dart';
import 'imageRadioWidght.dart';

class SettingView extends StatefulWidget {
  // const SettingView({Key? key}) : super(key: key);
  late int defaultValue = 1;

  @override
  State<SettingView> createState() => _GridViewItemState();
}

class _GridViewItemState extends State<SettingView> {
  // int defaultValue = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("AAAA"),
        ),
        body: Column(
          children: [
            RadioOption(
              value: 0,
              groupValue: widget.defaultValue,
              unSelectImage: "images/单选_未选中.svg",
              selectImage: "images/单选_复选.svg",
              text: "你的",
              onChanged: _onChange,
            ),
            RadioOption(
              value: 1,
              groupValue: widget.defaultValue,
              unSelectImage: "images/单选_未选中.svg",
              selectImage: "images/单选_复选.svg",
              text: "我的",
              onChanged: _onChange,
            ),
            CheckBoxOption(
              value: false,
              unSelectImage: "images/单选_未选中.svg",
              selectImage: "images/单选_复选.svg",
              text: "我的1",
              onChanged: (value) {},
            ),
            CheckBoxOption(
              value: true,
              unSelectImage: "images/单选_未选中.svg",
              selectImage: "images/单选_复选.svg",
              text: "我的2",
              onChanged: (value) {},
            ),
            CheckBoxOption(
              value: false,
              unSelectImage: "images/单选_未选中.svg",
              selectImage: "images/单选_复选.svg",
              text: "我的3",
              onChanged: (value) {},
            ),
            CheckBoxOption(
              value: false,
              unSelectImage: "images/单选_未选中.svg",
              selectImage: "images/单选_复选.svg",
              text: "我的4",
              onChanged: (value) {},
            ),
          ],
        ));
  }

  void _onChange(value) {
    if (mounted) {
      setState(() {
        widget.defaultValue = value;
      });
    }
  }
}

具体效果如下