← ClaudeAtlas

flutter-theming-appslisted

Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
openplaybooks-dev/converge · ★ 3 · AI & Automation · score 76
Install: claude install-skill openplaybooks-dev/converge
# Implementing Flutter Theming and Adaptive Design ## Contents - [Core Theming Concepts](#core-theming-concepts) - [Material 3 Guidelines](#material-3-guidelines) - [Component Theme Normalization](#component-theme-normalization) - [Button Styling](#button-styling) - [Workflows](#workflows) - [Examples](#examples) ## Core Theming Concepts Flutter applies styling in a strict hierarchy: styles applied to the specific widget -> themes that override the immediate parent theme -> the main app theme. - Define app-wide themes using the `theme` property of `MaterialApp` with a `ThemeData` instance. - Override themes for specific widget subtrees by wrapping them in a `Theme` widget and using `Theme.of(context).copyWith(...)`. - **Do not** use deprecated `ThemeData` properties: - Replace `accentColor` with `colorScheme.secondary`. - Replace `accentTextTheme` with `textTheme` (using `colorScheme.onSecondary` for contrast). - Replace `AppBarTheme.color` with `AppBarTheme.backgroundColor`. ## Material 3 Guidelines Material 3 is the default theme as of Flutter 3.16. - **Colors:** Generate color schemes using `ColorScheme.fromSeed(seedColor: Colors.blue)`. This ensures accessible contrast ratios. - **Elevation:** Material 3 uses `ColorScheme.surfaceTint` to indicate elevation instead of just drop shadows. To revert to M2 shadow behavior, set `surfaceTint: Colors.transparent` and define a `shadowColor`. - **Typography:** Material 3 updates font sizes, weights, and line heights. I