高级图标

一个 Flutter 包，其中包含一套图标装饰工具（例如渐变、不透明度）以及具有炫酷动画效果的图标过渡功能。 查看实时示例。

Pub Version
Build Status
MIT License
codecov
CodeFactor

安装

运行此命令即可添加 Flutter 包

flutter pub add advanced_icon

这将在你的包的 pubspec.yaml 文件中添加类似以下的行（并隐式运行 flutter pub get）

dependencies:
  advanced_icon: <latest version>

现在，在您的 Dart 代码中，您可以使用

import 'package:advanced_icon/advanced_icon.dart';

一览特性

  1. 提供了可选的 secondaryIcon 属性，只需少量手动操作即可增强用户交互。
  2. 提供炫酷的动画效果，可在 icon 和 secondaryIcon 之间实现平滑过渡。
  3. 除了颜色，图标还可以用渐变色绘制。
  4. 提供不透明度属性，可使图标不透明。
  5. 继承了 Material Design Icon 小部件的所有属性。

图标过渡

要使用图标过渡功能，secondaryIcon 不能为 null，当它不为 null 时，小部件将查找 state 并根据当前状态显示图标。要将图标从 icon 更改为 secondaryIcon 或反之，让我们先了解 AdvancedIcon 的 state。

state 包含有关 AdvancedIcon 当前状态的信息。AdvancedIcon 可以具有以下任一状态：

  1. AdvancedIconState.primary
  2. AdvancedIconState.secondary

每当状态更改时，它会通知 AdvancedIcon，AdvancedIcon 会根据以下规则更改当前图标：

  1. icon 将显示用于 AdvancedIconState.primary。
  2. secondaryIcon 将显示用于 AdvancedIconState.secondary。

state 可以使用以下任一方法进行更改：

  • setState
  • provider
  • stream
  • inheritedWidget
  • 或 Flutter 中用于状态管理的任何其他方法。

让我们使用 setState 来演示 AdvancedIcon 的状态管理。首先，创建一个 stateful 小部件。在小部件的私有类中，定义一个属性来保存 AdvancedIcon 的当前状态，并定义一个函数来在每次用户交互时更改当前状态，如下所示：

AdvancedIconState _state = AdvancedIconState.primary;

void _changeState(){
  setState(() {
    if (_state == AdvancedIconState.primary) {
      _state = AdvancedIconState.secondary;
    } else {
      _state == AdvancedIconState.primary;
    }
  });
}

然后，在 build 方法中添加一个 GestureDetector 或 IconButton，并按如下方式使用 AdvancedIcon：

GestureDetector(
  onTap: _changeState,
  child: AdvancedIcon(
    icon: Icons.add, //change this icon as per your requirement.
    secondaryIcon: Icons.check, //change this icon as per your requirement.
    state: _state,
  ),
)

在上面的示例中，当第一次调用 _changeState 时，state 将更改为 AdvancedIconState.secondary，并且过渡将从 Icons.add 到 Icons.check，在 300ms 内遵循默认的泡泡动画效果。

让我们进一步配置它。图标过渡功能提供七种炫酷的过渡效果。

  1. spin
  2. 气泡
  3. 淡入淡出
  4. flipH
  5. flipV
  6. spinBubble
  7. bubbleFade
  8. 无

通过更改 effect 属性来尝试更多动画效果，如下所示：

AdvancedIcon(
  icon: Icons.add, //change this icon as per your requirement.
  secondaryIcon: Icons.check, //change this icon as per your requirement.
  state: _state,
  effect: AdvancedIconEffect.spin, //change effect as per your requirement.
)

要增加或减少过渡时间，请按如下方式更改 duration 属性：

AdvancedIcon(
  icon: Icons.add, //change this icon as per your requirement.
  secondaryIcon: Icons.check, //change this icon as per your requirement.
  state: _state,
  duration: Duration(milliseconds: 700),
  effect: AdvancedIconEffect.fade,
)

通过设置 secondaryColor 属性为 secondaryIcon 提供更具体的颜色，如下所示：

AdvancedIcon(
  icon: Icons.add, //change this icon as per your requirement.
  secondaryIcon: Icons.check, //change this icon as per your requirement.
  color: Colors.blue, //color of primary icon, change it as per your requirement
  secondaryColor: Colors.green, //color of secondary icon, change it as per your requirement
  effect: AdvancedIconEffect.fade,
  state: _state,
)

为了更好地理解，请查看实时示例。

装饰

渐变

为了让图标看起来更吸引人，请使用渐变色来绘制图标。如果按如下方式设置 gradient，则会忽略 color 和 secondaryColor：

AdvancedIcon(
  icon: Icons.photo_camera,
  color: Colors.red, //color will have no effect
  gradient: const LinearGradient( //change gradient as per your requirement
    colors: <Color>[Colors.red, Colors.white],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    step: [0.2,0.8],
  ),
)

不透明度

通过按如下方式设置不透明度来使图标不透明：

AdvancedIcon(
  icon: Icons.direction_bike,
  color: Colors.red,
  opacity: 0.5, //should be between 0 and 1 inclusive
)

Decoration banner

更新日志

请参阅 更新日志 以了解最新更新。

贡献

非常欢迎对本项目做出贡献。

如果您发现错误或想要更多功能，但不知道如何修复/实现它们，请提交一个 问题。

如果您修复了错误或实现了新功能，请发送一个 拉取请求。

GitHub

查看 Github