flutter_admin_scaffold

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das ein anpassbares Gerüst mit einer responsive Seitenleiste und App-Leiste bietet, speziell für Admin-Dashboards und komplexe Navigationslayouts konzipiert. Es unterstützt sowohl Drawer- als auch Navigation-Rail-Muster und passt sich nahtlos über Plattformen wie Mobile, Web und Desktop an. Das Gerüst gewährleistet eine konsistente UI-Struktur und ermöglicht reibungslose Navigation und Layout-Verwaltung. Ideal für Anwendungen, die strukturierte, mehrstufige Navigation mit klarer visueller Hierarchie erfordern.

Anwendungsfälle

Admin-Übersichtsflächen
Dashboard-Schnittstellen
Multiplattform-Anwendungen
Komplexe Navigationslayouts
Reaktive Benutzeroberflächengestaltung

Hauptmerkmale

Seitenleistenintegration
AppBar-Kompatibilität
Reaktives Layout
Unterstützung für Schublade und Navigationsleiste
Plattformübergreifende Konsistenz

Geeignet für

Entwickler, die Administrationspanele erstellen
Teams, die eine konsistente Navigation benötigen
Projekte, die mehrere Plattformen ansprechen
UI-intensive Anwendungen
Apps mit hierarchischem Inhalt

Hinweise

Erfordert sorgfältige Behandlung verschachtelter Routen
Möglicherweise sind benutzerdefinierte Stile für einzigartige Designs erforderlich
Am besten geeignet für größere Anwendungen
Beschränkt auf navigationsorientierte Anwendungsfälle
Abhängig von einer ordnungsgemäßen Routenverwaltung

Original-README

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

A scaffold class with a sideBar that works with a appBar.

Usage

import 'package:flutter_admin_scaffold/admin_scaffold.dart';

You can add a sideBar as shown below. See example for details.

import 'package:flutter/material.dart';
import 'package:flutter_admin_scaffold/admin_scaffold.dart';

class SamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AdminScaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Sample'),
      ),
      sideBar: SideBar(
        items: const [
          AdminMenuItem(
            title: 'Dashboard',
            route: '/',
            icon: Icons.dashboard,
          ),
          AdminMenuItem(
            title: 'Top Level',
            icon: Icons.file_copy,
            children: [
              AdminMenuItem(
                title: 'Second Level Item 1',
                route: '/secondLevelItem1',
              ),
              AdminMenuItem(
                title: 'Second Level Item 2',
                route: '/secondLevelItem2',
              ),
              AdminMenuItem(
                title: 'Third Level',
                children: [
                  AdminMenuItem(
                    title: 'Third Level Item 1',
                    route: '/thirdLevelItem1',
                  ),
                  AdminMenuItem(
                    title: 'Third Level Item 2',
                    route: '/thirdLevelItem2',
                  ),
                ],
              ),
            ],
          ),
        ],
        selectedRoute: '/',
        onSelected: (item) {
          if (item.route != null) {
            Navigator.of(context).pushNamed(item.route!);
          }
        },
        header: Container(
          height: 50,
          width: double.infinity,
          color: const Color(0xff444444),
          child: const Center(
            child: Text(
              'header',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
        footer: Container(
          height: 50,
          width: double.infinity,
          color: const Color(0xff444444),
          child: const Center(
            child: Text(
              'footer',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.topLeft,
          padding: const EdgeInsets.all(10),
          child: const Text(
            'Dashboard',
            style: TextStyle(
              fontWeight: FontWeight.w700,
              fontSize: 36,
            ),
          ),
        ),
      ),
    );
  }
}

Pakete, Repositories und App-Kategorien suchen