Flutter可选中图标插件selectable_icon的使用

使用SelectableIcon可以在您的Flutter应用中创建一个可选择的框。SelectableIcon提供了许多自定义选项，可以将任何小部件转换为可选择的框。

安装

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  selectable_icon: ^1.0.4

然后运行flutter pub get来获取依赖项。

使用

首先，在Dart文件中导入selectable_icon包：

import 'package:selectable_icon/selectable_icon.dart';

接下来，您可以使用SelectableIcon在您的小部件树中。以下是一个简单的示例：

bool isSelected = false;
int count = 0;

SelectableIcon(
  onTap: () {
    setState(() {
      isSelected = !isSelected;
      if (isSelected) {
        count++;
      } else {
        count--;
      }
    });
  },
  isSelected: isSelected,
  selectedIcon: Icons.thumb_up,
  unSelectedIcon: Icons.thumb_up,
  size: 70,
  selectedColor: Colors.blue,
  unSelectedColor: Colors.grey,
  count: count,
  showCount: true,
  animationDuration: const Duration(milliseconds: 500),
  padding: const EdgeInsets.all(10),
),

示例代码

以下是一个完整的示例代码，展示了如何在应用中使用SelectableIcon：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool isSelected = false;
  int count = 0;

  bool isSelected2 = false;
  int count2 = 0;

  bool isSelected3 = false;
  int count3 = 0;

  bool isSelected4 = false;
  int count4 = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Center(
            child: SelectableIcon(
              count: count,
              onTap: () {
                setState(() {
                  isSelected = !isSelected;
                  if (isSelected) {
                    count++;
                  } else {
                    count--;
                  }
                });
              },
              isSelected: isSelected,
            ),
          ),
          SelectableIcon(
            count: count2,
            onTap: () {
              setState(() {
                isSelected2 = !isSelected2;
                if (isSelected2) {
                  count2++;
                } else {
                  count2--;
                }
              });
            },
            isSelected: isSelected2,
            selectedIcon: Icons.check_circle,
            unSelectedIcon: Icons.check_circle,
            size: 50,
          ),
          SelectableIcon(
            count: count3,
            onTap: () {
              setState(() {
                isSelected3 = !isSelected3;
                if (isSelected3) {
                  count3++;
                } else {
                  count3--;
                }
              });
            },
            isSelected: isSelected3,
            selectedIcon: Icons.thumb_up,
            unSelectedIcon: Icons.thumb_up,
            size: 70,
            selectedColor: Colors.blue,
            unSelectedColor: Colors.grey,
            animationDuration: const Duration(milliseconds: 500),
            padding: const EdgeInsets.all(10),
          ),
          SelectableIcon(
            count: count4,
            onTap: () {
              setState(() {
                isSelected4 = !isSelected4;
                if (isSelected4) {
                  count4++;
                } else {
                  count4--;
                }
              });
            },
            isSelected: isSelected4,
            selectedIcon: Icons.thumb_down,
            unSelectedIcon: Icons.thumb_down,
            size: 80,
            selectedColor: Colors.blue,
            unSelectedColor: Colors.grey,
          ),
        ],
      ),
    );
  }
}

更多关于Flutter可选中图标插件selectable_icon的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼

更多关于Flutter可选中图标插件selectable_icon的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用selectable_icon插件的示例代码。selectable_icon是一个允许用户通过点击在多个图标之间进行选择的Flutter插件。

首先，确保你已经在pubspec.yaml文件中添加了selectable_icon依赖项：

dependencies:
  flutter:
    sdk: flutter
  selectable_icon: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖项。

以下是一个完整的示例代码，展示如何在Flutter应用中使用selectable_icon：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selectable Icon Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始选择的图标索引
  int selectedIndex = 0;

  // 图标列表
  final List<IconData> icons = [
    Icons.star,
    Icons.star_border,
    Icons.heart,
    Icons.heart_broken,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selectable Icon Demo'),
      ),
      body: Center(
        child: SelectableIcon(
          // 当前选择的图标数据
          icons[selectedIndex],
          // 可选择的图标列表
          icons,
          // 选择图标改变时的回调
          onChanged: (newIcon) {
            setState(() {
              selectedIndex = icons.indexOf(newIcon);
            });
          },
          // 图标的大小
          size: 50,
          // 图标的颜色
          color: Colors.blue,
        ),
      ),
    );
  }
}

在这个示例中：

我们定义了一个MyHomePage类，它包含一个状态变量selectedIndex来跟踪当前选择的图标索引。
icons列表包含了多个IconData，这些是我们可以在SelectableIcon中选择的图标。
在build方法中，我们使用SelectableIcon组件，并传递当前的图标数据、可选择的图标列表、选择改变时的回调、图标的大小和颜色。
当用户点击图标时，onChanged回调会被触发，我们更新selectedIndex状态，这将导致UI重新构建，显示新的图标。

你可以根据需要自定义图标的列表、大小、颜色等属性。希望这个示例对你有帮助！