flutter_page_scaffold #

A reusable Flutter widget package for consistent, theme-aware main content area layouts. Provides structured page templates with bold titles, section headers with accent bars, and grouped content cards.

Features #

• MainAreaTemplate -- Page-level wrapper with large title, description, icon, and action buttons
• MainAreaSection -- Grouped content card with accent-bar section headers
• Fully theme-aware -- All colors derived from Theme.of(context), works with any ThemeData
• Zero dependencies -- Only requires Flutter SDK

Installation #

Add to your pubspec.yaml:

dependencies:
  flutter_page_scaffold: ^0.1.0

Then run:

flutter pub get

Usage #

Basic page layout #

import 'package:flutter_page_scaffold/flutter_page_scaffold.dart';

MainAreaTemplate(
  title: 'Network Devices',
  description: 'Manage network switches across all domains.',
  icon: Icons.router,
  actions: [
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.add),
      label: const Text('Add'),
    ),
  ],
  child: Column(
    children: [
      MainAreaSection(
        label: 'TOOLBAR',
        child: Row(children: [/* toolbar content */]),
      ),
      const SizedBox(height: 12),
      MainAreaSection(
        label: 'DATA',
        expanded: true,
        child: MyDataTable(),
      ),
    ],
  ),
)

Settings page layout #

MainAreaTemplate(
  title: 'Log Settings',
  description: 'Configure log storage and retention policies.',
  icon: Icons.settings_outlined,
  child: Column(
    children: [
      MainAreaSection(
        label: 'STORAGE LIMITS',
        child: MyFormFields(),
      ),
      const SizedBox(height: 16),
      MainAreaSection(
        label: 'STATUS',
        child: MyStatusWidget(),
      ),
    ],
  ),
)

Tabbed page layout #

MainAreaTemplate(
  title: 'Network Manager',
  description: 'Manage network infrastructure.',
  icon: Icons.router,
  tabs: [
    PageTab(
      label: 'Devices',
      icon: Icons.table_chart_outlined,
      child: Column(children: [/* device list content */]),
    ),
    PageTab(
      label: 'Settings',
      icon: Icons.settings_outlined,
      child: Column(children: [/* settings content */]),
    ),
  ],
  onTabChanged: (index) => print('Switched to tab $index'),
)

Tabs without title (compact mode) #

MainAreaTemplate(
  title: 'Manager',        // still required but hidden
  showTitle: false,
  tabs: [
    PageTab(label: 'Tab A', child: ContentA()),
    PageTab(label: 'Tab B', child: ContentB()),
  ],
)

API Reference #

MainAreaTemplate #

* Required when tabs is null.

PageTab #

MainAreaSection #

Theme Integration #

All colors are pulled from Theme.of(context).colorScheme:

Works out of the box with light, dark, or any custom ThemeData.

Example #

A playground app is included in example/. Run it with:

cd example
flutter run -d chrome

The playground demonstrates three page layouts (table, settings, dashboard) with a theme switcher to preview light, dark, and sunshine themes.

License #

MIT