flutter-theming

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

dart

MaterialApp(
  title: 'App Name',
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.deepPurple,
      brightness: Brightness.light,
    ),
    // Use colorScheme.secondary instead of accentColor
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.deepPurple,
      brightness: Brightness.dark,
    ),
  ),
  home: const MyHomePage(),
);

Normalize Component Themes Update all component theme definitions in

ThemeData

to use their

*ThemeData

equivalents. Do not use the base theme classes for configuration.

```
cardTheme
```
->
```
CardThemeData
```
```
dialogTheme
```
->
```
DialogThemeData
```
```
tabBarTheme
```
->
```
TabBarThemeData
```

appBarTheme

AppBarThemeData

(Replace

color

with

backgroundColor

)

```
bottomAppBarTheme
```
->
```
BottomAppBarThemeData
```

inputDecorationTheme

InputDecorationThemeData

dart

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  appBarTheme: const AppBarThemeData(
    backgroundColor: Colors.blue, // Do not use 'color'
    elevation: 4.0,
  ),
  cardTheme: const CardThemeData(
    elevation: 2.0,
  ),
);

Migrate Buttons and Button Styles Replace legacy buttons. Use the

styleFrom()

static method for simple overrides, or

ButtonStyle

with

MaterialStateProperty

for state-dependent styling.

dart

// Simple override using styleFrom
TextButton(
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    disabledForegroundColor: Colors.red,
  ),
  onPressed: () {},
  child: const Text('TextButton'),
)

// State-dependent override using MaterialStateProperty
OutlinedButton(
  style: ButtonStyle(
    side: MaterialStateProperty.resolveWith<BorderSide>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return const BorderSide(color: Colors.blue, width: 2);
        }
        return const BorderSide(color: Colors.grey, width: 1);
      }
    ),
  ),
  onPressed: () {},
  child: const Text('OutlinedButton'),
)

Decision Logic: Platform Idioms Apply platform-specific adaptations based on the host OS to reduce cognitive load and build user trust.

Scrollbars: IF desktop platform -> Set
```
thumbVisibility: true
```
(or
```
alwaysShown
```
). IF mobile -> Use default auto-hiding behavior.
Text Selection: IF text is informational and non-interactive -> Wrap in
```
SelectableText
```
to allow mouse selection on Web/Desktop.
Button Ordering: IF Windows -> Place confirmation button on the LEFT. IF macOS/Linux/Android/iOS -> Place confirmation button on the RIGHT.

dart

// Platform-aware button ordering
TextDirection btnDirection = Platform.isWindows 
    ? TextDirection.rtl 
    : TextDirection.ltr;

Row(
  children: [
    const Spacer(),
    Row(
      textDirection: btnDirection,
      children: [
        TextButton(
          onPressed: () => Navigator.pop(context, false),
          child: const Text('Cancel'),
        ),
        ElevatedButton(
          onPressed: () => Navigator.pop(context, true),
          child: const Text('OK'),
        ),
      ],
    ),
  ],
)

Validate-and-Fix Scan the generated code to verify that no
```
FlatButton
```
,
```
RaisedButton
```
,
```
OutlineButton
```
, or
```
ButtonTheme
```
classes remain. Verify that
```
AppBarTheme
```
does not use the
```
color
```
property. Fix any instances found.

Constraints

Single Source of Truth: All colors must be derived from the
```
ColorScheme
```
(e.g.,
```
Theme.of(context).colorScheme.primary
```
). Do not hardcode hex colors unless explicitly requested.
No Legacy Buttons: Never output
```
FlatButton
```
,
```
RaisedButton
```
, or
```
OutlineButton
```
.

No Accent Properties: Never use

accentColor

accentColorBrightness

accentTextTheme

, or

accentIconTheme

. Use

colorScheme.secondary

and

colorScheme.onSecondary

instead.

Component Theme Suffixes: Always append
```
Data
```
to component themes when configuring
```
ThemeData
```
(e.g.,
```
CardThemeData
```
, not
```
CardTheme
```
).
AppBar Background: Never use the
```
color
```
property in
```
AppBarTheme
```
or
```
AppBarThemeData
```
; strictly use
```
backgroundColor
```
.

flutter-theming

NPX Install

Tags

SKILL.md Content

Goal

Instructions

Constraints