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

not_static_icons のカバー
パッケージ詳細v0.54.0

not_static_icons

Flutter用に美しく作られたアニメーションアイコン。Lucideで作成—RiveやLottieは不要。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
797
いいね数
53
Pub ポイント
160

パッケージをインストール

flutter pub add not_static_icons

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

not_static_icons は、Rive や Lottie を必要とせずに Lucide のデザイン原則に基づいて美しく作られたアニメーションアイコンを提供する Flutter パッケージです。Flutter のレンダリングエンジンを通じてスムーズで軽量なアニメーションを直接実装し、表現力がありながらもパフォーマンスに優れたアイコンが必要なアプリに最適です。複数のプラットフォームをサポートしており、既存の Flutter プロジェクトともシームレスに統合できます。各アイコンは明確さと美的魅力を意識して設計されており、微細な動きによってユーザー体験を向上させます。視覚的なフィードバックが重要な現代的な UI にぴったりです。

用途

  • アニメーションアイコンによるアプリUIの向上
  • 繊細なマイクロインタラクションを追加する
  • 魅力的なオンボーディング体験を作成する
  • ボタンの視覚フィードバックの改善
  • 現代的でダイナミックなダッシュボードの構築
  • 静的アイコンをアニメーション版に置き換える

主な機能

  • Lucide をインスパイアしたデザイン
  • Rive または Lottie の依存関係なし
  • 軽量でパフォーマンスに優れる
  • クロスプラットフォーム対応
  • Flutter との簡単な統合
  • スムーズな組み込みアニメーション

適している対象

  • 洗練されたアニメーションアイコンを探している開発者
  • モーションに注力するUI/UXデザイナー
  • インタラクティブなインターフェースを持つアプリ
  • モダンな美学を目指すプロジェクト
  • 複雑なアニメーションライブラリを避けるチーム

注意事項

  • すべてのLucideアイコンバリエーションをサポートしない可能性があります
  • アニメーションの複雑さは事前に定義されたスタイルに制限される
  • 最高のパフォーマンスを得るには Flutter 3.0+ を推奨します
  • 非常に複雑なアニメーションには適していません
  • アイコンごとのカスタマイズが限られている
  • 最適なパフォーマンスを得るために、最小限のアイコンセットと併用してください

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト