flutter-theming-apps

SKILL.md

Global styling and adaptive design patterns for Flutter apps using Material 3 theming.

Covers Material 3 color schemes, typography, elevation, and modern component replacements (NavigationBar, FilledButton, SegmentedButton)

Includes component theme normalization using *ThemeData classes and deprecation guidance for legacy properties like accentColor and AppBarTheme.color

Provides platform-specific adaptive patterns: scrollbar visibility, selectable text, button order (Windows vs. macOS/Linux), and hover interactions

Includes workflows for migrating legacy themes to Material 3 and implementing cross-platform UI components with state-dependent styling

Implementing Flutter Theming and Adaptive Design

Contents

Core Theming Concepts

Material 3 Guidelines

Component Theme Normalization

Button Styling

Platform Idioms & Adaptive Design

Workflows

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.