sidebarx

パッケージ概要

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

SidebarX は、Android、iOS、Web、macOS、Windows、Linux でドロワーウィジェットとして機能するカスタマイズ可能なナビゲーションサイドバーまたはサイドナビゲーションバーを提供するマルチプラットフォームの Flutter パッケージです。滑らかな遷移と応答性のあるデザインにより、直感的なナビゲーションを実現し、恒久的なナビゲーションメニューが必要なアプリに最適です。コンパクトおよび拡張状態の両方をサポートしており、さまざまな画面サイズやユーザーの好みに対応可能です。Flutter のクロスプラットフォーム機能に基づいて構築されており、デバイス間で一貫したナビゲーション体験を実装しやすくしています。

用途

永続的なナビゲーションを備えたシングルページアプリケーション
サイドバーメニュー付きのマルチスクリーンダッシュボード
統一されたナビゲーションを必要とするクロスプラットフォームアプリ
さまざまな画面サイズに適応するレスポンシブレイアウト
ドロワー形式のナビゲーションを必要とするデスクトップおよびウェブアプリ

主な機能

マルチプラットフォーム対応（Android、iOS、Web、macOS、Windows、Linux）
カスタマイズ可能なサイドバーの外観と動作
コンパクトおよび拡張状態の両方をサポートしています
状態遷移のスムーズなアニメーション
さまざまな画面サイズに対応するレスポンシブデザイン

適している対象

クロスプラットフォームアプリを開発する開発者
一貫したナビゲーションパターンを求めるデザイナー
複数のプラットフォーム間でコード再利用を最優先するチーム
複雑なナビゲーション構造を持つアプリ
モダンで洗練されたサイドバーインターフェースを必要とするプロジェクト

注意事項

非常にカスタマイズされたデザインには、追加のスタイル設定が必要になる場合があります
非常に大きなナビゲーションリストへのパフォーマンスの影響
完全なUIフレームワークと比較して、組み込みのテーマオプションが限られている
高度な使用にはFlutterのレイアウトシステムの理解が必要です
非常に高い周波数の状態変更には最適化されていません

元の README

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

SidebarX 🔥

Flutter multiplatform navigation sidebar / side navigationbar / drawer widget

Show some ❤️ and star the repo to support the project!

Mobile	Desktop	Web

Getting started

Follow these steps to use this package

Add dependency

dependencies:
  sidebarx: ^0.17.2

Add import package

import 'package:sidebarx/sidebarx.dart';

Easy to use

The package is designed with maximum adaptation to large screens.
Therefore, adding a widget to your screen will be very simple.

    Scaffold(
      body: Row(
        children: [
          SidebarX(
            controller: SidebarXController(selectedIndex: 0),
            items: const [
              SidebarXItem(icon: Icons.home, label: 'Home'),
              SidebarXItem(icon: Icons.search, label: 'Search'),
            ],
          ),
          // Your app screen body
        ],
      ),
    )

Use with small mobile screens

On small screens and mobile devices, you can use the ready-made Sidebar widget as your application's drawer for excellent UX.
Otherwise, leave the code unchanged and get the same experience

    Scaffold(
      drawer: SidebarX(
        controller: SidebarXController(selectedIndex: 0, extended: true),
        items: const [
          SidebarXItem(icon: Icons.home, label: 'Home'),
          SidebarXItem(icon: Icons.search, label: 'Search'),
        ],
      ),
      body: const Center(child: Text('Your app body')),
    )

Additional information

The project is under development and ready for your pull-requests and issues 👍
Thank you for support ❤️

Thanks to all contributors of this package

For help getting started with 😍 Flutter, view [online documentation](https://flutter.dev/docs), which offers tutorials, samples, guidance on mobile development, and a full API reference.

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

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