Flutter图标选择复选框插件 icon_checkbox 的使用

icon_checkbox 是一个提供简单且可定制的图标复选框的Flutter插件。本文将介绍如何使用这个插件，并通过示例代码展示其基本和高级用法。

介绍

该包提供了简单的、可自定义的图标复选框，适用于需要在应用中添加具有图标的复选框场景。

使用方法

IconCheckbox 小部件的使用方式类似于普通的复选框小部件。以下是一个基本的例子：

IconCheckbox(
    checkedIcon: Icons.lightbulb_outline,
    uncheckedIcon: Icons.lightbulb_outline_rounded,
    value: isChecked,
    onChanged: (value) {
        setState(() {
          isChecked = value;
        });
    },
)

这会生成一个带有指定图标的选择框。

自定义

你可以根据需求对 IconCheckbox 进行自定义，如改变图标的颜色、大小或添加边框等。

属性说明

示例代码

下面是一个完整的示例，展示了如何在Flutter项目中集成并使用 icon_checkbox。

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

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IconCheckbox Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'IconCheckbox Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isChecked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 最简单的用法
            IconCheckbox(
              checkedIcon: Icons.lightbulb_outline,
              uncheckedIcon: Icons.lightbulb_outline_rounded,
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  isChecked = value!;
                });
              },
            ),
            const SizedBox(height: 15,),
            // 改变图标颜色
            IconCheckbox(
              checkedIcon: Icons.lightbulb_outline,
              uncheckedIcon: Icons.lightbulb_outline_rounded,
              checkColor: const Color(0xFFFCD900),
              unCheckColor: Colors.black,
              value: false,
              onChanged: (value) {},
            ),
            const SizedBox(height: 15,),
            // 改变图标大小
            IconCheckbox(
              checkedIcon: Icons.lightbulb_outline,
              uncheckedIcon: Icons.lightbulb_outline_rounded,
              iconSize: 40,
              value: false,
              onChanged: (value) {},
            ),
            const SizedBox(height: 15,),
            // 改变复选框框架
            IconCheckbox(
              checkedIcon: Icons.lightbulb_outline,
              uncheckedIcon: Icons.lightbulb_outline_rounded,
              value: false,
              boxdecoration: BoxDecoration(
                border: Border.all(color: Colors.blue),
                borderRadius: BorderRadius.circular(8),
              ),
              onChanged: (value) {},
            ),
            const SizedBox(height: 15,),
            // 带有点击出现图标的复选框
            IconCheckbox(
              checkedIcon: Icons.lightbulb_outline,
              value: false,
              checkColor: Colors.white,
              boxdecoration: BoxDecoration(
                border: Border.all(color: const Color(0xFFBFBFBF)),
                color: const Color(0xFFBFBFBF),
              ),
              onChanged: (value) {},
              boxHeight: 50,
              boxWidth: 50,
              iconSize: 40,
            ),
          ],
        ),
      ),
    );
  }
}