套件詳情v1.0.0

pluto_layout

PlutoLayout 是一個 Flutter UI 套件，可在每一側設定選單或標籤畫面。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 130
喜歡數: 82
Pub 分數: 140

安裝套件

flutter pub add pluto_layout

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

PlutoLayout 是一個 Flutter 套件，專門用於在螢幕的任何一側建立可自訂的選單或標籤介面。它讓開發者能輕鬆建立響應式、基於側邊的導航佈局，支援水平與垂直排列。非常適合儀表板、管理介面或需要可摺疊側邊欄的應用程式，提供流暢的過渡效果與跨多個平台的彈性定位。此套件可透過簡單的 pub add 命令無縫整合至現有的 Flutter 專案中。

適用情境

側邊導航菜單
儀表板UI
可摺疊面板
管理員儀表板
響應式佈局
標籤式介面設計

主要特色

並排佈局設定
可自定義菜單位置
流暢的動畫
跨平台支援
透過 pub 輕鬆整合
靈活的控件放置

適合對象

開發儀表板應用的開發者
需要側邊導航的UI設計師
需要響應式佈局的專案
Flutter 初學者探索佈局模式
具有複雜導航需求的應用程式

使用建議

可能需要為自定義主題添加額外的樣式
除了基本範例外，文件有限
最適合單窗格佈局
深度嵌套小組件帶來的效能影響
不適合全螢幕模態覆蓋

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

PlutoLayout - v1.0.0

PlutoLayout is a Flutter UI package that can configure a menu or tab screen on each side.
You can adjust the width of the tab menu by dragging the right border of the tab menu.
You can also assign custom shortcut keys to open or close tab views and resize tab views.

Demo

Demo Web

Installation

pub.dev

Screenshot

PlutoLayout Screenshot

Usage

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pluto_layout/pluto_layout.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PlutoLayout(
        shortcuts: {
          LogicalKeySet(LogicalKeyboardKey.escape):
          PlutoLayoutActions.hideAllTabView(),
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit1):
          PlutoLayoutActions.rotateTabView(
            PlutoLayoutContainerDirection.left,
          ),
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit2):
          PlutoLayoutActions.rotateTabView(
            PlutoLayoutContainerDirection.right,
          ),
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowUp):
          PlutoLayoutActions.increaseTabView(),
          LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowDown):
          PlutoLayoutActions.decreaseTabView(),
        },
        body: const PlutoLayoutContainer(
          child: Text('Body container'),
        ),
        top: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'top1',
                title: 'top1',
                tabViewBuilder: (e) => const Text('top1'),
              ),
              PlutoLayoutTabItem(
                id: 'top2',
                title: 'top2',
                tabViewBuilder: (e) => const Text('top2'),
              ),
            ],
          ),
        ),
        left: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'left1',
                title: 'left1',
                tabViewBuilder: (e) => const Text('left1'),
              ),
              PlutoLayoutTabItem(
                id: 'left2',
                title: 'left2',
                tabViewBuilder: (e) => const Text('left2'),
              ),
            ],
          ),
        ),
        right: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'right1',
                title: 'right1',
                tabViewBuilder: (e) => const Text('right1'),
              ),
              PlutoLayoutTabItem(
                id: 'right2',
                title: 'right2',
                tabViewBuilder: (e) => const Text('right2'),
              ),
            ],
          ),
        ),
        bottom: PlutoLayoutContainer(
          child: PlutoLayoutTabs(
            items: [
              PlutoLayoutTabItem(
                id: 'bottom1',
                title: 'bottom1',
                tabViewBuilder: (e) => const Text('bottom1'),
              ),
              PlutoLayoutTabItem(
                id: 'bottom2',
                title: 'bottom2',
                tabViewBuilder: (e) => const Text('bottom2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}