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

flutter_inner_drawer のカバー
パッケージ詳細v1.0.0+1

flutter_inner_drawer

インナードロワーは、リストメニューまたはその他の要素を挿入できる内部サイドセクション(左/右)を作成する簡単な方法です。

30日間ダウンロード
163
いいね数
482
Pub ポイント
70

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

flutter pub add flutter_inner_drawer

パッケージ概要

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

Flutter Inner Drawer は、Flutter アプリ内に内部サイドドロワー(左または右)を実装できる軽量パッケージです。メインのUIフローを妨げることなく、ナビゲーションメニューまたは追加コンテンツ領域を簡単にカスタマイズ可能に追加できます。ドロワーは画面の端からスライドインし、洗練された現代的なユーザー体験を提供します。開閉には水平および垂直のジェスチャーをサポートし、既存のウィジェットとシームレスに統合されます。コンパクトでアクセスしやすいナビゲーションパネルが必要なアプリに最適です。

用途

  • 折りたたみ可能なナビゲーションメニューの追加
  • コンテキストアクションパネルの作成
  • サイドベースのフィルターや設定の実装
  • 隠しコンテンツでモバイルアプリのレイアウトを強化する
  • ネストされたドロワーを使用したレスポンシブインターフェースの設計

主な機能

  • 既存のウィジェットとの簡単な統合
  • 左および右のドロワー位置をサポートしています
  • ジェスチャー駆動の開閉インタラクション
  • カスタマイズ可能なアニメーションとスタイル
  • 軽量でパフォーマンスに優れる
  • カスタマイズ可能なドロワーの幅とアラインメント

適している対象

  • 直感的なナビゲーションを求めるモバイルアプリ開発者
  • スリムなサイドパネルを希望するデザイナー
  • 最小限ながら機能的なUIを必要とするアプリ
  • マテリアルデザインの原則を使用するプロジェクト
  • スムーズなジェスチャー操作を実現する開発者

注意事項

  • 重複するコンテンツの取り扱いには注意が必要な場合があります
  • 複雑なネストされたドロワーに対する制限付きの組み込みサポート
  • フルスクリーンオーバーレイのシナリオには適していません
  • タッチジェスチャーのアクセシビリティに注意が必要です
  • 単一レベルのナビゲーション構造に最適

元の README

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

flutter_inner_drawer

pub package Awesome Flutter Donate

Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list menu or other.

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_inner_drawer: "^1.0.0+1"

Demo

Simple usage
import 'package:flutter_inner_drawer/inner_drawer.dart';
.
.
.
   
    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            onTapClose: true, // default false
            swipe: true, // default true            
            colorTransitionChild: Color.red, // default Color.black54
            colorTransitionScaffold: Color.black54, // default Color.black54
            
            //When setting the vertical offset, be sure to use only top or bottom
            offset: IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0),
            
            scale: IDOffset.horizontal( 0.8 ), // set the offset in both directions
            
            proportionalChildArea : true, // default true
            borderRadius: 50, // default 0
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic,
            backgroundDecoration: BoxDecoration(color: Colors.red ), // default  Theme.of(context).backgroundColor
            
            //when a pointer that is in contact with the screen and moves to the right or left            
            onDragUpdate: (double val, InnerDrawerDirection direction) {
                // return values between 1 and 0
                print(val);
                // check if the swipe is to the right or to the left
                print(direction==InnerDrawerDirection.start);
            },
            
            innerDrawerCallback: (a) => print(a), // return  true (open) or false (close)
            leftChild: Container(), // required if rightChild is not set
            rightChild: Container(), // required if leftChild is not set
            
            //  A Scaffold is generally used but you are free to use other widgets
            // Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
            scaffold: Scaffold(
                appBar: AppBar(
                    automaticallyImplyLeading: false
                ),
            ) 
            /* OR
            CupertinoPageScaffold(                
                navigationBar: CupertinoNavigationBar(
                    automaticallyImplyLeading: false
                ),
            ), 
            */
        )
    }
    
    //  Current State of InnerDrawerState
    final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();    

    void _toggle()
    {
       _innerDrawerKey.currentState.toggle(
       // direction is optional 
       // if not set, the last direction will be used
       //InnerDrawerDirection.start OR InnerDrawerDirection.end                        
        direction: InnerDrawerDirection.end 
       );
    }
    
InnerDrawer Parameters
PropName Description default value
scaffold A Scaffold is generally used but you are free to use other widgets required
leftChild Inner Widget required if rightChild is not set
rightChild Inner Widget required if leftChild is not set
leftOffset(deprecated) Offset drawer width 0.4
rightOffset(deprecated) Offset drawer width 0.4
leftScale(deprecated) Left scaffold scaling 1
rightScale(deprecated) Right scaffold scaling 1
offset Offset InnerDrawer width IDOffset.horizontal(0.4)
scale Scaffold scaling IDOffset.horizontal(1)
proportionalChildArea If true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen. true
borderRadius For scaffold border 0
onTapClose Tap on the Scaffold closes it false
swipe activate or deactivate the swipe true
swipeChild activate or deactivate the swipeChild false
duration Animation Controller duration Duration(milliseconds: 246)
velocity Allows you to set the opening and closing velocity when using the open/close methods 1
tapScaffoldEnabled Possibility to tap the scaffold even when open false
boxShadow BoxShadow of scaffold opened [BoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)]
colorTransitionChild Change background color while swiping Colors.black54
colorTransitionScaffold Change background color while swiping Colors.black54
leftAnimationType static / linear / quadratic static
rightAnimationType static / linear / quadratic static
backgroundDecoration possibility to manage the main background Decoration BoxDecoration(color: Theme.of(context).backgroundColor)
innerDrawerCallback Optional callback that is called when a InnerDrawer is opened or closed
onDragUpdate When a pointer that is in contact with the screen and moves to the right or left
_innerDrawerKey.currentState.open Current State of GlobalKey(check example) - OPEN
_innerDrawerKey.currentState.close Current State of GlobalKey(check example) - CLOSE
_innerDrawerKey.currentState.toggle Current State of GlobalKey(check example) - OPEN or CLOSE

Donate

It takes time to carry on this project. If you found it useful or learned something from the source code please consider the idea of donating 5, 20, 50 € or whatever you can to support the project.

  • Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

カテゴリー

ソースリポジトリ

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