golden_layout

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Golden Layout ist ein Flutter-Paket, das die leistungsstarken Fensterverwaltungsfunktionen der Golden Layout-Bibliothek in Flutter-Anwendungen bringt. Es ermöglicht Entwicklern, komplexe, veränderbare und ziehbare UI-Layouts mit mehreren Paneelen zu erstellen, die verschachtelte Anordnungen und dynamischen Inhalt unterstützen. Für interne Anwendungsinterfaces konzipiert, ist es ideal für Werkzeuge, die anpassbare Arbeitsbereiche erfordern, wie beispielsweise Dashboards, IDEs oder Datenvisualisierungsplattformen. Das Paket integriert sich nahtlos in das Widget-System von Flutter und gewährleistet Leistung und Reaktionsfähigkeit.

Anwendungsfälle

Dashboard-Oberflächen
IDE-ähnliche Entwicklungs-Umgebungen
Datenvisualisierungstools
Multi-Panel-Berichtsanwendungen
Anpassbare Benutzerarbeitsbereiche

Hauptmerkmale

Größenveränderbare und ziehbare Panels
Unterstützung für verschachtelte Layouts
Dynamische Panel-Anordnung
Unterstützung für mehrere Inhaltstypen
Integration mit Flutter-Widgets

Geeignet für

Entwickler, die komplexe Benutzeroberflächen erstellen
Anwendungen mit flexiblen Arbeitsbereichslayouts
Werkzeuge, die mehrspaltige Schnittstellen erfordern
Desktop-ähnliche Flutter-Anwendungen
UI-intensive interne Tools

Hinweise

Nicht für mobile-first-Designs optimiert
Beschränkte Dokumentation verfügbar
Kann bei fortgeschrittenen Anwendungsfällen eine benutzerdefinierte Styling-Anforderung erfordern
Am besten geeignet für Desktop- oder Tablet-Szenarien
Potenzielle Komplexität bei der Zustandsverwaltung

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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]));
  }
}

Pakete, Repositories und App-Kategorien suchen

golden_layout

Paket installieren

Paketübersicht

Anwendungsfälle

Hauptmerkmale

Geeignet für

Hinweise

Original-README

golden_layout

Example

Kategorien

Quell-Repository

golden_layout

Projekte, die dieses Paket verwenden