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

bottom_drawer のカバー
パッケージ詳細v0.0.5

bottom_drawer

下部ドロワーのウィジェットで、カスタムドロワーヘッダーとボディをサポートし、リストボディをサポートし、ドラッグして開閉できます。

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

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

flutter pub add bottom_drawer

パッケージ概要

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

Flutter向けのカスタマイズ可能な下部ドロワー・ウィジェットで、ドラッグによる開閉をサポートし、ヘッダーとボディーのカスタマイズが可能です。静的コンテンツまたはリストベースのボディーを表示でき、モーダルやフィルター、補足情報パネルに最適です。モバイル、ウェブ、デスクトップなどさまざまなプラットフォームに対応しており、デバイス間での一貫したUXを確保します。シンプルさと柔軟性を重視して設計されており、既存のFlutterアプリへのスムーズな統合が可能です。

用途

  • モーダルオーバーレイ
  • フィルターパネル
  • 補足コンテンツが表示されます
  • インタラクティブなボトムシート
  • フォーム入力
  • ナビゲーションドロワー

主な機能

  • ドラッグで開く/閉じるジェスチャー
  • カスタマイズ可能なヘッダーと本文
  • リスト本文のサポート
  • クロスプラットフォーム互換性
  • 既存のウィジェットとの簡単な統合
  • カスタマイズ可能なアニメーションと動作

適している対象

  • インタラクティブUIを構築する開発者
  • 折りたたみパネルが必要なアプリ
  • プラットフォームに依存しないボトムシートを必要とするプロジェクト
  • 柔軟なドロワーレイアウトを望むデザイナー
  • スムーズなユーザーインタラクションを最優先とするチーム

注意事項

  • 複雑なヘッダー用に追加のスタイリングが必要になる場合があります
  • 大規模なリストによるパフォーマンスへの影響
  • 基本的なスライド以外の組み込みアニメーションは限定的
  • フルスクリーンモーダルには適していません
  • ネストされたスクロール可能なコンポーネント上のタッチイベントの慎重な処理が必要です

元の README

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

Bottom Drawer for Flutter Pub version

Bottom Drawer.

DEMO

1. Add dependency
dependencies:
  bottom_drawer: ^0.0.5
2. Import bottom drawer
import 'package:bottom_drawer/bottom_drawer.dart';
3. Use bottom drawer

Create a bottom drawer controller.

/// create a bottom drawer controller to control the drawer.
BottomDrawerController controller = BottomDrawerController();

Build a bottom drawer widget.

/// return a bottom drawer widget.
Widget buildBottomDrawer(BuildContext context) {
  return BottomDrawer(
    /// your customized drawer header.
    header: Container(),
    /// your customized drawer body.
    body: Container(),
    /// your customized drawer header height.
    headerHeight: 60.0,
    /// your customized drawer body height.
    drawerHeight: 180.0,
    /// drawer background color.
    color: Colors.lightBlue,
    /// drawer controller.
    controller: controller,
  );
}

Control the bottom drawer.

/// open the bottom drawer.
controller.open();

/// close the bottom drawer.
controller.close();

For more information, see the example.

カテゴリー

ソースリポジトリ

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

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