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

hovering のカバー
パッケージ詳細v1.0.4

hovering

Flutter Webでホバー効果を有効にするための新しいFlutterパッケージ。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
7100
いいね数
126
Pub ポイント
140

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

flutter pub add hovering

パッケージ概要

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

ホバー パッケージは、ウェブアプリケーションにホバー効果をもたらすように設計されたFlutterプラグインであり、ユーザーがウィジェットの上にマウスを置いたときにスムーズなアニメーションを通じてユーザーインタラクションを強化します。すべての主要プラットフォームをサポートしており、特にWebに焦点を当てており、開発者がホバー時にスケール、不透明度、色の変化などの視覚フィードバックを簡単に追加できるようにしています。最小限のセットアップで既存のFlutterプロジェクトにシームレスに統合できます。ボタン、カード、ナビゲーション要素などのインタラクティブUIコンポーネントに最適です。

用途

  • ウェブボタンにホバー効果を追加する
  • インタラクティブなカードレイアウトの作成
  • ナビゲーションメニューの強化
  • クリック可能な要素に対するユーザーのフィードバックの改善
  • レスポンシブなWebダッシュボードの設計

主な機能

  • ホバーアニメーション用のシンプルな API
  • 複数のアニメーションタイプをサポートしています
  • クロスプラットフォーム互換性
  • 軽量で統合が簡単
  • カスタマイズ可能なホバーのトリガー

適している対象

  • Flutter Web開発者
  • UI/UXデザイナー
  • インタラクティブなアプリケーション作成者
  • フロントエンド中心のFlutterプロジェクト
  • ホバーに基づくインタラクションを必要とするプロジェクト

注意事項

  • Web以外のプラットフォームへの影響は限定的
  • タッチデバイスに対するネイティブサポートなし
  • モバイル環境では注意が必要です
  • 低価格端末ではアニメーションのパフォーマンスが異なる場合があります
  • 複雑なジェスチャーに基づくインタラクションには適していません

元の README

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

hovering

A new Flutter package to enable the hover effect on Flutter web.
Hover Grow Effect Hover Shrink Effect Hover Fade Effect Hoverbutton Effect Hover SnackBar Effect

Intallation :

Add Dependency:
    dependencies:
        hovering: ^1.0.4
Import Package:
import"package:hovering/hovering.dart";

List of Widgets :

1. HoverWidget:
-Simply changes one widget to another on Hover.
-Also uses onHover property.
2. HoverContainer
-Hover effect on a Container Widget
3. HoverCrossFadeWidget
-Gives a Hover effect with a fade animation.
-Transition between two widgets.
4. HoverAnimatedContainer
-Creates a Container widget with an Animation.
-Duration can be provided.
5. HoverButton
-Creates a Button widget with hover effect.

Constructors :

HoverWidget({
    Key? key,
    required Widget child, 
    required Widget hoverChild, 
    required void Function(PointerEnterEvent) onHover
    })
HoverCrossFadeWidget({
     Key? key, 
     MouseCursor cursor = SystemMouseCursors.basic, 
     required Widget firstChild, 
     required Widget secondChild, 
     required Duration duration, 
     AlignmentGeometry alignmentry = Alignment.center, 
     Curve firstCurve = Curves.linear, 
     Duration? reverseDuration, 
     Curve secondCurve = Curves.linear, 
     Curve sizeCurve = Curves.linear})
HoverContainer({
    Key? key, 
    AlignmentGeometry? alignment, 
    AlignmentGeometry? hoveraAlignment, 
    Color? color, 
    Color? hoverColor, 
    double? width, 
    double? hoverWidth, 
    double? height, 
    double? hoverHeight, 
    Decoration? decoration, 
    Decoration? hoverDecoration, 
    Decoration? foregroundDecoration, 
    Decoration? hoverForegroundDecoration, 
    Widget? child, 
    Clip clipBehavior = Clip.none, 
    BoxConstraints? constraints, 
    EdgeInsetsGeometry? margin, 
    EdgeInsetsGeometry? hoverMargin, 
    EdgeInsetsGeometry? padding, 
    EdgeInsetsGeometry? hoverPadding, 
    Matrix4? transform, 
    MouseCursor cursor = SystemMouseCursors.basic, 
    Matrix4? hoverTransform})
HoverAnimatedContainer({
    Key? key, 
    AlignmentGeometry? alignment, 
    AlignmentGeometry? hoveraAlignment, 
    Color? color, 
    Duration duration = const Duration(milliseconds: 200), 
    Color? hoverColor, 
    double? width, 
    double? hoverWidth, 
    double? height, 
    double? hoverHeight, 
    Decoration? decoration, 
    Decoration? hoverDecoration, 
    Decoration? foregroundDecoration, 
    Decoration? hoverForegroundDecoration, 
    Widget? child, 
    BoxConstraints? constraints, 
    EdgeInsetsGeometry? margin, 
    EdgeInsetsGeometry? hoverMargin, 
    EdgeInsetsGeometry? padding, 
    EdgeInsetsGeometry? hoverPadding, 
    Matrix4? transform, 
    Curve curve = Curves.linear, 
    MouseCursor cursor = SystemMouseCursors.basic, 
    Matrix4? hoverTransform})
HoverButton({
    Key? key, 
    required void Function() onpressed, 
    Duration? animationDuration, 
    bool autofocus = false, 
    Widget? child, 
    Clip clipBehavior = Clip.none, 
    Color? color, 
    Brightness? colorBrightness, 
    Color? disabledColor, 
    double? disabledElevation, 
    Color? disabledTextColor, 
    double elevation = 4.0, 
    bool enableFeedback = true, 
    Color? focusColor, 
    double? focusElevation, 
    FocusNode? focusNode, 
    double? height, 
    Color? highlightColor, 
    double? highlightElevation, 
    Color? hoverColor, 
    double hoverElevation = 8.0, 
    MaterialTapTargetSize? materialTapTargetSize, 
    double? minWidth, 
    MouseCursor mouseCursor = SystemMouseCursors.click, 
    void Function(bool)? onHighlightChanged, 
    void Function()? onLongPress, 
    EdgeInsetsGeometry? padding, 
    EdgeInsetsGeometry hoverPadding = const EdgeInsets.all(2.0), ShapeBorder shape = const StadiumBorder(), 
    Color? splashColor, 
    Color? textColor, 
    ButtonTextTheme? textTheme, 
    VisualDensity? visualDensity, 
    ShapeBorder? hoverShape, 
    Color? hoverTextColor, 
    ButtonTextTheme? hoverTextTheme, 
    Brightness? hoverColorBrightness})

カテゴリー

ソースリポジトリ

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