adaptive_dashboard_shell 0.1.3 copy "adaptive_dashboard_shell: ^0.1.3" to clipboard
adaptive_dashboard_shell: ^0.1.3 copied to clipboard

Adaptive dashboard shell with collapsible sidebar and mobile bottom nav.

example/lib/main.dart

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

void main() => runApp(const ExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'adaptive_dashboard_shell example',
      theme: ThemeData(colorSchemeSeed: Colors.indigo, useMaterial3: true),
      home: const HomePage(),
    );
  }
}

const _navItems = <NavItem>[
  NavLeaf(
    NavAction(
      route: '/dashboard',
      label: 'Dashboard',
      icon: Icons.dashboard_outlined,
    ),
  ),
  NavBranch(
    NavGroup(
      title: 'Sales',
      icon: Icons.point_of_sale_outlined,
      children: [
        NavAction(
          route: '/orders',
          label: 'Orders',
          icon: Icons.receipt_long_outlined,
        ),
        NavAction(
          route: '/invoices',
          label: 'Invoices',
          icon: Icons.description_outlined,
        ),
      ],
    ),
  ),
  NavLeaf(
    NavAction(
      route: '/settings',
      label: 'Settings',
      icon: Icons.settings_outlined,
    ),
  ),
];

const _mobileNav = <NavAction>[
  NavAction(route: '/dashboard', label: 'Home', icon: Icons.home_outlined),
  NavAction(
    route: '/orders',
    label: 'Orders',
    icon: Icons.receipt_long_outlined,
  ),
  NavAction(
    route: '/settings',
    label: 'Settings',
    icon: Icons.settings_outlined,
  ),
];

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _route = '/dashboard';

  @override
  Widget build(BuildContext context) {
    return AppDashboardShell(
      appTitle: 'Acme',
      logo: const FlutterLogo(),
      currentRoute: _route,
      items: _navItems,
      mobileNavItems: _mobileNav,
      userName: 'Ada Lovelace',
      userEmail: 'ada@example.com',
      onNavigate: (route) => setState(() => _route = route),
      onLogout: () => ScaffoldMessenger.of(
        context,
      ).showSnackBar(const SnackBar(content: Text('Logout tapped'))),
      child: Center(
        child: Text(
          'Current route:\n$_route',
          textAlign: TextAlign.center,
          style: Theme.of(context).textTheme.headlineSmall,
        ),
      ),
    );
  }
}
1
likes
160
points
153
downloads

Documentation

API reference

Publisher

verified publishersubashkc.info.np

Weekly Downloads

Adaptive dashboard shell with collapsible sidebar and mobile bottom nav.

Repository (GitHub)
View/report issues

License

MIT (license)

Dependencies

flutter

More

Packages that depend on adaptive_dashboard_shell