Theme

Shares a ThemeData with its subtree. Read it with Theme.of(context) or the context.theme shorthand (which fall back to ThemeData.fallback when absent, so widgets can always resolve a theme without a required ancestor).

Learn more: Theming

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

// Override the theme for one subtree, starting from the one above it:
Theme(
  data: Theme.of(context).copyWith(borderStyle: BorderStyle.double),
  child: child,
)

// Any descendant reads the nearest theme:
final primary = Theme.of(context).colorScheme.primary;

Details

An app usually sets its theme once, with FleuryApp(theme: ...), which installs a Theme above the whole app. Nest another Theme to restyle one subtree. The inner theme replaces the outer one below it; nothing is merged, so derive it from the enclosing theme to change only some fields.

Wrapping a subtree in a Theme also cascades ThemeData.textStyle as the DefaultTextStyle, so a base text color/dim can be set app-wide in one place.

Constructors

`Theme()`

Parameter	Type	Default	Description
`data:`	`ThemeData`	required	The theme for everything below this widget, replacing any theme above it rather than merging with it. More
`child:`	`Widget`	required	The subtree that reads `data`.

data: Descendants read it with Theme.of, context.theme, or context.colors (its ThemeData.colorScheme), and those readers rebuild when data changes (compared with ==). To override only a few fields, pass the enclosing theme’s Theme.of(context).copyWith(...), read where you build this widget. Its ThemeData.textStyle likewise replaces the subtree’s DefaultTextStyle.

Source

Theme is defined in packages/fleury/lib/src/widgets/theme.dart.

Category: App & theming · All widgets

Example · editable

ThemeData _buildCustomTheme() {
  final base = ThemeData.dark();
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      primary: const RgbColor(0xE8, 0xA3, 0x3D),
      focus: const RgbColor(0xF2, 0xC5, 0x5C),
      warning: const RgbColor(0xE8, 0xA3, 0x3D),
    ),
    borderStyle: BorderStyle.double,
  );
}

/// A compact slice of UI: enough surfaces that a theme's character shows.
class _ThemePreview extends StatelessWidget {
  const _ThemePreview();

  @override
  Widget build(BuildContext context) {
    final cs = context.colors;
    final theme = context.theme;
    // The border shows the theme's borderStyle; it replaces vertical padding
    // so the preview keeps its height in both embeds.
    return Container(
      color: cs.background,
      border: BoxBorder(
        style: theme.borderStyle,
        cellStyle: CellStyle(foreground: cs.primary),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 1),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Deploy Console',
            style: CellStyle(foreground: cs.foreground, bold: true),
          ),
          Text('one app, two surfaces', style: theme.mutedStyle),
          const SizedBox(height: 1),
          Text('  api-gateway  running  42%', style: theme.selectionStyle),
          Text(
            '  worker-01    running  18%',
            style: CellStyle(foreground: cs.foreground),
          ),
          const SizedBox(height: 1),
          ProgressBar(value: 0.62),
          const SizedBox(height: 1),
          Wrap(
            children: <Widget>[
              Text('success  ', style: CellStyle(foreground: cs.success)),
              Text('warning  ', style: CellStyle(foreground: cs.warning)),
              Text('error  ', style: CellStyle(foreground: cs.error)),
              Text('info', style: CellStyle(foreground: cs.info)),
            ],
          ),
          const SizedBox(height: 1),
          Wrap(
            children: <Widget>[
              Text(
                '\u2589 primary  ',
                style: CellStyle(foreground: cs.primary),
              ),
              Text('\u2589 focus', style: CellStyle(foreground: cs.focus)),
            ],
          ),
        ],
      ),
    );
  }
}

Live preview

Live

ⓘ how this demo runs