flutter-theming-apps

Installation

Summary

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

SKILL.md

Implementing Flutter Theming and Adaptive Design

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.