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(),
      ),
    ],
  ),
)

API Reference #

MainAreaTemplate #

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