VisorSectionHeader

Flutter section heading with title, optional subtitle, and optional trailing slot (e.g. "View all" link, filter button, count badge).

VisorSectionHeader renders a section heading row with a title, an optional subtitle, and an optional trailing slot. It reads all styling from Visor's BuildContext extensions.

Preview

When to Use

Dividing a screen into labeled groups of content
Introducing a list or card grid with context
Pairing a title with a secondary action (filter, view-all)

When Not to Use

Page-level titles — use AppBar instead
Table column headers — use the table's built-in headers
Dialogs and sheets — use their built-in titles

Installation

npx visor add section-header --target flutter

Or copy components/flutter/visor_section_header/visor_section_header.dart into your project.

Basic Usage

import 'package:ui/ui.dart';

VisorSectionHeader(
  title: 'Recent activity',
)

With Subtitle

VisorSectionHeader(
  title: 'Recent activity',
  subtitle: 'Last 30 days',
)

With Trailing Action

VisorSectionHeader(
  title: 'Recent activity',
  subtitle: 'Last 30 days',
  trailing: TextButton(
    onPressed: _viewAll,
    child: const Text('View all'),
  ),
)

With Count Badge

VisorSectionHeader(
  title: 'Notifications',
  trailing: Container(
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
    decoration: BoxDecoration(
      color: context.visorColors.surfaceAccentSubtle,
      borderRadius: BorderRadius.circular(context.visorRadius.pill),
    ),
    child: Text(
      '$count',
      style: context.visorTextStyles.labelSmall.copyWith(
        color: context.visorColors.surfaceAccentStrong,
      ),
    ),
  ),
)

API Reference

Property	Type	Default	Description
`title`	`String`	required	Section heading text
`subtitle`	`String?`	`null`	Supporting label below title
`trailing`	`Widget?`	`null`	Right-aligned slot (button, badge, etc.)

Source

components/flutter/visor_section_header/visor_section_header.dart
Quality contract audit row: docs/flutter-widget-quality-contract.md (Rec8)

VisorSectionHeader

On this page