flutter-theming

SKILL.md

Migrate Flutter apps from Material 2 to Material 3 with automated component and theme updates.

Identifies and replaces deprecated Material 2 components (FlatButton, RaisedButton, BottomNavigationBar, Drawer) with their Material 3 equivalents using a decision tree

Converts legacy theme properties to Material 3 ColorScheme and removes deprecated accent color references (accentColor, accentColorBrightness, etc.)

Normalizes all component themes to use *ThemeData classes and ensures useMaterial3: true across light and dark themes

Applies platform-specific UI idioms for scrollbars, text selection, and button ordering across iOS, Android, Windows, macOS, Linux, and Web

Validates output to eliminate legacy button classes and enforce single-source-of-truth color derivation from ColorScheme

Goal

Updates and manages Flutter application styling by migrating legacy Material 2 implementations to Material 3, normalizing component themes, updating deprecated button classes, and adapting UI idioms for cross-platform consistency. Assumes a Flutter environment using Dart.

Instructions

Analyze Current Theme State
Review the existing Flutter codebase to identify legacy Material 2 components, deprecated button classes (FlatButton, RaisedButton, OutlineButton), and outdated theme properties (e.g., accentColor, color in AppBarTheme).
STOP AND ASK THE USER: "What is the primary seed color for the new Material 3 ColorScheme, and which target platforms (iOS, Android, Windows, macOS, Linux, Web) should be prioritized for platform idioms?"

Decision Logic: Component Migration
When encountering legacy widgets, use the following decision tree to determine the replacement:

IF BottomNavigationBar -> REPLACE WITH NavigationBar (uses NavigationDestination).

IF Drawer -> REPLACE WITH NavigationDrawer (uses NavigationDrawerDestination).

IF ToggleButtons -> REPLACE WITH SegmentedButton (uses ButtonSegment and Set for selection).

IF FlatButton -> REPLACE WITH TextButton.

IF RaisedButton -> REPLACE WITH ElevatedButton (or FilledButton for no elevation).

IF OutlineButton -> REPLACE WITH OutlinedButton.

Implement App-Wide Material 3 Theme
Define the global ThemeData using ColorScheme.fromSeed. Ensure useMaterial3 is implicitly or explicitly true. Remove all references to deprecated accent properties (accentColor, accentColorBrightness, accentTextTheme, accentIconTheme).