高级图标

一个 Flutter 包，包含一系列图标装饰工具，如渐变、透明度和带炫酷动画效果的图标过渡功能。

安装

使用 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. 提供了 opacity 属性来使图标不透明。
  5. 继承了材质设计 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，以默认的气泡动画效果在 300 毫秒内完成。

让我们进一步配置它。图标过渡功能有 7 种炫酷的动画效果可供选择。

  1. 旋转
  2. 气泡
  3. 淡入淡出
  4. 水平翻转
  5. 垂直翻转
  6. 旋转气泡
  7. 气泡淡入淡出
  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),
)

通过设置 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
  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

https://github.com/ankitmishradev/advanced-icon