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 ).

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

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.

// 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.

// 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 .