カテゴリー・パッケージ・リポジトリを検索

scaled_list のカバー
パッケージ詳細v2.0.0

scaled_list

スケーリングされた現在のアイテムとカーブしたカスタムペイントを含む、多数の変更が加えられた水平リストビュー。

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

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

flutter pub add scaled_list

パッケージ概要

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

Scaled List は、視覚的にインパクトのある拡大された現在のアイテムとカスタムカーブペイント効果を備えた水平スクロール可能なリストを提供する Flutter パッケージです。サイズスケーリングとスムーズなアニメーションにより、アクティブなアイテムを強調することでユーザー体験を向上させ、カルーセルやカバーフローインターフェースに最適です。このパッケージは Android、iOS、Web、macOS、Windows、Linux など複数のプラットフォームをサポートしており、デバイス間で一貫した動作を提供します。開発者は外観やインタラクションをカスタマイズでき、最小限の努力で創造的な UI デザインが可能になります。

用途

  • インタラクティブなカルーセルの作成
  • カバーフローのナビゲーションの設計
  • ビジュアルフォーカスを使用した画像スライダーの構築
  • 製品のショーケースを強化する
  • アニメーション付きの水平リストの実装
  • UI における動的アイテムスケーリングの追加

主な機能

  • スケーリングされた現在のアイテムの可視化
  • カスタムカーブドペインティングサポート
  • スムーズな水平スクロール
  • クロスプラットフォーム互換性
  • 拡張可能なカスタマイズオプション
  • 組み込みアニメーション遷移

適している対象

  • 視覚的インパクトを求めるUIデザイナー
  • メディアギャラリーを構築する開発者
  • フォーカスされたアイテムの強調が必要なアプリ
  • インタラクティブ製品ブラウジング機能
  • カルーセルスタイルのナビゲーションを持つプロジェクト

注意事項

  • 低性能デバイスではパフォーマンスチューニングが必要になる場合があります
  • カスタムペインティングは複雑さを増す可能性があります
  • 限られた垂直サポート
  • 水平レイアウトにのみ最適
  • 大規模データセットでのメモリ使用量の可能性

元の README

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

Effective Dart Badge MIT License Badge

Pub.dev

Scaled List

A Horizontal List view With Lots of modification including a scaled current item.

  • Provided with curved custom painting and Dots indictor below it.
  • it makes the widget of item builder responsive to the device screen's width and height.
  • You can also set the relative width, margin width, height of selected and unselected Card to the entire screen

Image Image Image

Usage

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScaledList(
        itemCount: Data.categories.length,
        itemColor: (index) {
          return kMixedColors[index % kMixedColors.length];
        },
        itemBuilder: (index, selectedIndex) {
          final category = Data.categories[index];
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: selectedIndex == index
                    ? 100
                    : 80,
                child: Image.asset(category.image),
              ),
              SizedBox(height: 15),
              Text(
                category.name,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: selectedIndex == index
                        ? 25
                        : 20),
              )
            ],
          );
        },
      ),
    );
  }

Usage Scenarios

  • When You like to add items in scaled manner and add custom curved painting over each item.

Contributers

Hosain Mohamed Muhammad Alsaied

カテゴリー

ソースリポジトリ

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

データはまだありません。