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

パッケージ詳細v0.0.2

golden_layout

http://golden-layout.com/ をベースにした Flutter 向け内部ウィンドウライブラリ

30日間ダウンロード
21
いいね数
36
Pub ポイント
40

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

flutter pub add golden_layout

パッケージ概要

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

Golden Layout は、Flutter アプリケーションに Golden Layout ライブラリの強力なウィンドウ管理機能をもたらす Flutter パッケージです。複雑でサイズ変更可能かつドラッグ可能な UI レイアウトを複数のパネルで作成でき、ネストされた配置や動的なコンテンツをサポートします。内部アプリケーションインターフェース向けに設計されており、ダッシュボード、IDE、データ可視化プラットフォームなど、カスタマイズ可能なワークスペースが必要なツールに最適です。パッケージは Flutter のウィジェットシステムとシームレスに統合されつつ、パフォーマンスと応答性を維持しています。

用途

  • ダッシュボードインターフェース
  • IDEに似た開発環境
  • データ可視化ツール
  • マルチパネルレポートアプリ
  • カスタマイズ可能なユーザー作業領域

主な機能

  • サイズ変更可能でドラッグ可能なパネル
  • ネストされたレイアウトのサポート
  • 動的パネル配置
  • 複数のコンテンツタイプのサポート
  • Flutter ウィジェットとの統合

適している対象

  • 複雑なUIを開発する開発者
  • 柔軟なワークスペースレイアウトを必要とするアプリケーション
  • マルチペインインターフェースを必要とするツール
  • デスクトップに似たFlutterアプリケーション
  • UI中心の内部ツール

注意事項

  • モバイルファーストのデザインには最適化されていない
  • 利用可能なドキュメントが限られている
  • 高度なユースケースにはカスタムスタイルの適用が必要になる場合があります
  • デスクトップまたはタブレットのシナリオに最も適している
  • 状態管理における潜在的な複雑さ

元の README

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

Buy Me A Coffee Donate golden_layout

golden_layout

A Flutter inspired package from http://golden-layout.com/

Demo: https://rodydavis.github.io/golden_layout/

screenshot

Example

import 'package:flutter/material.dart';
import 'package:golden_layout/golden_layout.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Golden Layout'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = WindowController();
  int _count = 0;

  @override
  void initState() {
    final _group = WindowGroup();
    _group.addTab(_getTab(_count++));
    (_controller.base as WindowColumn).children.add(_group);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            tooltip: 'Add Window',
            icon: Icon(Icons.restore),
            onPressed: () {
              if (mounted)
                setState(() {
                  _controller.base =
                      WindowColumn([WindowGroup()..addTab(_getTab(_count++))]);
                });
            },
          ),
          IconButton(
            tooltip: 'Add Group',
            icon: Icon(Icons.list),
            onPressed: () {
              if (mounted)
                setState(() {
                  final _group = WindowGroup();
                  _group.addTab(_getTab(_count++));
                  (_controller.base as WindowColumn).children.add(_group);
                });
            },
          ),
          IconButton(
            tooltip: 'Add Row',
            icon: Icon(Icons.category),
            onPressed: () {
              if (mounted)
                setState(() {
                  final _group1 = WindowGroup()..addTab(_getTab(_count++));
                  final _group2 = WindowGroup()..addTab(_getTab(_count++));
                  (_controller.base as WindowColumn)
                      .children
                      .add(WindowRow([_group1, _group2]));
                });
            },
          ),
        ],
      ),
      body: GoldenLayout(
        controller: _controller,
      ),
    );
  }

  WindowTab _getTab(int count) {
    return WindowTab(
        title: 'Window $count',
        child: Container(color: Colors.red[100 * count]));
  }
}

カテゴリー

ソースリポジトリ

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

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