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

awesome_drawer_bar のカバー
パッケージ詳細v1.2.1

awesome_drawer_bar

カスタム実装のサイドメニュー(ドロワー)を備えたFlutterパッケージ

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

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

flutter pub add awesome_drawer_bar

パッケージ概要

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

Awesome Drawer Bar は、モダンで洗練されたデザインを持つカスタマイズ可能なサイドメニュー(ドロワー)を提供するFlutterパッケージです。洗練されたナビゲーション体験を求めている開発者向けに作られており、スムーズなアニメーション、レスポンシブレイアウト、複数プラットフォームでのアプリへの簡単な統合を実現しています。ドロワーはライトテーマとダークテーマの両方に対応し、カスタムウィジェット、アイコン、トランジションでカスタマイズ可能です。シンプルなインターフェースで直感的なナビゲーションが必要なアプリに最適です。このパッケージは積極的にメンテナンスされており、オープンソースであるため、コミュニティの貢献と透明性が保たれています。

用途

  • モバイルアプリのナビゲーション
  • Webダッシュボードインターフェース
  • デスクトップアプリケーションメニュー
  • カスタマイズ可能なサイドパネル
  • クロスプラットフォームナビゲーション

主な機能

  • スムーズなアニメーション
  • カスタマイズ可能なデザイン
  • マルチプラットフォーム対応
  • ライトおよびダークテーマの互換性
  • 既存のFlutterプロジェクトとの簡単な統合

適している対象

  • クロスプラットフォームアプリを構築するFlutter開発者
  • 柔軟なナビゲーションコンポーネントを必要とするデザイナー
  • 洗練されたサイドメニューを必要とするアプリ

注意事項

  • 基本的なFlutterの知識が必要です
  • 複雑なレイアウトには追加のスタイリングが必要になる場合があります
  • プラットフォーム固有のレンダリング動作に依存します

元の README

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

Flutter Awesome Drawer Bar

pub package License: MIT

A Flutter package with custom implementation of the Side Menu (Drawer)

Getting Started

To start using this package, add awesome_drawer_bar dependency to your pubspec.yaml

dependencies:
  awesome_drawer_bar: '<latest_release>'

Features

  • Simple sliding drawer
  • Sliding drawer with shadows
  • Sliding drawer with rotation
  • Sliding drawer with rotation and shadows
  • Support for both LTR & RTL

Documentation

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*.65,
      openCurve: Curves.fastOutSlowIn,
      closeCurve: Curves.bounceIn,
    )
Parameters Value Required Docs
controller AwesomeDrawerBarController No Controller to have access to the open/close/toggle function of the drawer
mainScreen Widget Yes Screen containing the main content to display
menuScreen Widget Yes Screen containing the menu/bottom screen
slideWidth double No Sliding width of the drawer - defaults to 275.0
borderRadius double No Border radius of the slided content - defaults to 16.0
angle double No Rotation angle of the drawer - defaults to -12.0 - should be 0.0 to -30.0
backgroundColor Color No Background color of the drawer shadows - defaults to white
showShadow bool No Boolean, whether to show the drawer shadows - defaults to false
openCurve Curve No open animation curve - defaults to Curves.easeOut
closeCurve Curve No close animation curve - defaults to Curves.easeOut
Controlling the drawer

To get access to the drawer, and be able to control it, there are 2 ways:

  • Using a AwesomeDrawerBarController inside the main widget where ou have the AwesomeDrawerBar widget and providing it to the widget, which will allow you to trigger the open/close/toggle methods.
    final _drawerController = AwesomeDrawerBarController();

    _drawerController.open();
    _drawerController.close();
    _drawerController.toggle();
    _drawerController.isOpen();
    _drawerController.stateNotifier;
  • Using the static method inside ancestor widgets to get access to the AwesomeDrawerBar.
  AwesomeDrawerBar.of(context).open();
  AwesomeDrawerBar.of(context).close();
  AwesomeDrawerBar.of(context).toggle();
  AwesomeDrawerBar.of(context).isOpen();
  AwesomeDrawerBar.of(context).stateNotifier;

Screens

Example app Demo

Example RTL Demo

  • Drawer Sliding
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • Drawer Sliding with shadow
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • Drawer Sliding with rotation
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation

  • Drawer Sliding with rotation and shadows
    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation and shadows

Issues

Please file any issues, bugs or feature request as an issue on our GitHub page.

Want to contribute

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our contribution guide and send us your pull request.

Credits

Credits goes to pedromassango as most of this package comes from his implementation.

カテゴリー

依存関係

依存関係一覧 1 件

  • flutter_adaptive_scaffold^0.3.1

ソースリポジトリ

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

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