パッケージ、リポジトリ、アプリカテゴリを検索

GitHub リポジトリkhlebobul/not_static_icons

not_static_icons

Rive や Lottie を使わずに Flutter 向けに美しく作られたアニメーションアイコン

not_static_icons のプロジェクト画像
スター
23
フォーク
0
最終プッシュ(UTC)
2026/09/07
プロジェクト状態
公開中

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

not_static_icons | animated icons for Flutter

LICENCE - MIT pub package

Seamlessly animated Flutter icons — no Rive or Lottie required. Made with Lucide icons inspired by pqoqubbw/icons.

Features

  • 700+ Animated Icons: Based on popular Lucide icon set
  • Interactive Animations: Hover and touch effects
  • Customizable: Size, color, animation duration, stroke width
  • Flexible Integration: Works with GestureDetector, InkWell, IconButton
  • Programmatic Control: AnimatedIconController for external animation control

Usage

Basic Usage
// Simple icon
AirplayIcon()

// Customized icon
AArrowDownIcon(
  size: 45,
  color: Colors.blue,
  animationDuration: Duration(milliseconds: 800),
  strokeWidth: 3.0,
  hoverColor: Colors.red,
  enableTouchInteraction: true,
  infiniteLoop: false,
  reverseOnExit: false,
)
Using onTap Callback

Use onTap instead of wrapping the icon in GestureDetector:

CheckIcon(
  size: 40,
  color: Colors.green,
  onTap: () {
    print('Icon tapped!');
  },
)
Using with IconButton

Use interactive: false and AnimatedIconController for IconButton integration:

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _iconController = AnimatedIconController();

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {
        _iconController.animate(); // Trigger animation
        // Your action here
      },
      icon: HeartIcon(
        size: 32,
        color: Colors.red,
        interactive: false, // Disable internal gesture handlers
        controller: _iconController,
      ),
    );
  }
}
Using with InkWell
final _iconController = AnimatedIconController();

InkWell(
  onTap: () {
    _iconController.animate();
    // Your action here
  },
  child: Padding(
    padding: EdgeInsets.all(8),
    child: CopyIcon(
      size: 24,
      interactive: false,
      controller: _iconController,
    ),
  ),
)
All Configuration Options
ActivityIcon(
  size: 48.0,                                    // Icon size
  color: Colors.black87,                         // Default color
  hoverColor: Colors.blue,                       // Hover color
  animationDuration: Duration(milliseconds: 600), // Animation duration
  strokeWidth: 2.0,                              // Stroke width
  reverseOnExit: true,                           // Reverse animation on exit
  enableTouchInteraction: true,                  // Enable touch interaction
  infiniteLoop: false,                           // Enable infinite loop
  resetToStartOnComplete: false,                 // Reset after animation completes
  onTap: () {},                                  // Tap callback
  interactive: true,                             // Enable/disable internal gestures
  controller: AnimatedIconController(),          // External animation controller
)
AnimatedIconController Methods
Method Description
animate() Triggers the animation to play forward
stop() Stops the current animation
reset() Resets the animation to its initial state

Available Icons

Web demo MEDIUM ARTICLE

Animation Types

Each icon has its own unique animation:

  • Rotation: Icons rotate around their center
  • Scale: Icons scale up/down
  • Path Drawing: Icons draw their paths progressively
  • Morphing: Icons transform between states

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

CONTRIBUTING.md CODE_OF_CONDUCT.md ICON_CHECKLIST.md

Contacts

@khlebobul [Email - khlebobul@gmail.com](mailto:khlebobul@gmail.com) @khlebobul Personal - Website

Support

Support the project

License

LICENCE - MIT

Credits

Icons based on Lucide Icons inspired by pqoqubbw/icons

Used by

Gleb Shalimov GitHub avatar
GitHub 作者

Gleb Shalimov ↗

言語DartHTMLRubyCSSMakefileSwiftShellKotlinObjective-C

カテゴリー

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 4 件

  • flutter{"sdk":"flutter"}
  • flutter_test開発用{"sdk":"flutter"}
  • flutter_lints開発用^6.0.0
  • path開発用^1.9.1

プロジェクトに合うリポジトリを選ぶには?

用途で絞り込み、開発状況を比較し、採用前に元のリポジトリで要件を確認しましょう。

  1. 名前・作者・説明で検索し、技術トピックで絞り込みます。
  2. スター、フォーク、最近のプッシュを比較します。スターは関心の目安であり、品質の保証ではありません。
  3. 利用前に GitHub で README、ライセンス、Issues を確認します。

情報源と管理

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗