Flutter图标按钮插件iconic_button的使用

Flutter图标按钮插件iconic_button的使用

iconic_button 是一个替代 Flutter ToggleButtons 的插件，支持模块化可选按钮的使用，而无需知道按钮的大小或分组。这些按钮专注于带有可选标签的图标，在芯片、扩展框和简单按钮中使用。此外，该包还提供了一个控制器来编程方式启用、禁用、选择或取消选择按钮，而无需调用 setState()。

该插件使用 ButtonStyles、MaterialStates 和 InkWell 来遵循 Material Design 主题，但非常可定制，并且基于 ElevatedButton。

iconic_button 提供的功能：

1. 可选标签的图标。图标本身很棒，但单独使用可能会令人困惑。内置工具提示。隐式动画。默认内置 Material 和 InkWell 参数，使反应式设计更容易。
2. 选择和禁用方法提供了直接、明确的按钮状态控制。
3. 可重置属性：图标、标签和样式可以根据自定义事件进行更改。

此插件是我为其他项目中的需求构建的，现将其公开发布，以回馈社区。

使用

import 'package:iconic_button/iconic_button.dart';

// 创建一个控制器
final ButtonController controller = ButtonController();

// 使用控制器创建一个图标按钮
IconicButton(
  controller: controller,
  iconData: Icons.undo,
  onPressed: () {},
  label: 'Label',
)

// 通过控制器改变按钮的状态
controller.select(); // 选择按钮
controller.unSelect(); // 取消选择按钮
controller.enable(); // 启用按钮
controller.disable(); // 禁用按钮

// 记得在不再使用时释放控制器
controller.dispose();

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  iconic_button: ^x.x.x

然后运行 flutter pub get 命令。

示例代码

以下是一个完整的示例代码，展示了如何使用 iconic_button 插件创建不同类型的图标按钮。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Iconic Button Demo',
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Iconic Button Package'),
    );
  }
}

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: SingleChildScrollView(
          clipBehavior: Clip.none,
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: Examples(),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        IconicButtonExample(),
        BasicExample(),
        ColorExample(),
        ChipExample(),
        CardExample(),
      ],
    );
  }
}

/// Example of [IconicButton]
class IconicButtonExample extends StatefulWidget {
  const IconicButtonExample({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => IconicButtonExampleState();
}

class IconicButtonExampleState extends State<IconicButtonExample> {
  final ButtonController _iconicController = ButtonController();

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            const ListTile(
              title: Text('IconicButton'),
              subtitle: Text('A toggle-like button that uses an icon and an optional label and customizable styling.'),
            ),
            Row(
              children: [
                IconicButton(
                  controller: _iconicController,
                  iconData: Icons.rocket_launch,
                  label: "Tap To Select",
                  onPressed: () {},
                ),
                Flexible(
                  child: IconicExampleSwitches(
                    iconicController: _iconicController,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _iconicController.dispose();
    super.dispose();
  }
}

class IconicExampleSwitches extends StatelessWidget {
  final ButtonController iconicController;

  const IconicExampleSwitches({
    Key? key,
    required this.iconicController,
  }) : super(key: key);

  void _onSelectChanged(bool value) {
    if (value != iconicController.isSelected) {
      if (value) {
        iconicController.select();
      } else {
        iconicController.unSelect();
      }
    }
  }

  void _onEnableChanged(bool value) {
    if (value != iconicController.isEnabled) {
      if (value) {
        iconicController.enable();
      } else {
        iconicController.disable();
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return SetListenableBuilder(
      valueListenable: iconicController,
      builder: (context, set, _) {
        return Column(
          children: [
            SwitchListTile(
              value: set.contains(ButtonState.selected),
              onChanged: _onSelectChanged,
              title: const Text('Select/Unselect:'),
              dense: true,
            ),
            SwitchListTile(
              value: set.contains(ButtonState.enabled),
              onChanged: _onEnableChanged,
              title: const Text('Enable/Disable:'),
              dense: true,
            )
          ],
        );
      },
    );
  }
}

更多选项可以查看示例应用。

示例应用

要查看更多的选项，可以查看示例应用中的代码。示例代码位于：

// https://github.com/jwehrle/iconic_button/blob/main/example/lib/main.dart