skills.rest
Wishtohear
WishtohearCOMMUNITY
Explore all skills by this author →
GitHub

flutter-theming-apps

Configures Flutter app themes using Material 3 color schemes and component styling.

1|Updated Apr 30, 2026
Search Tags:#theming#flutter#dart#adaptive design#ui styling#material 3#themedata
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-theming-apps-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-theming-apps
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-theming-apps
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-theming-apps-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter developers often struggle with deprecated theme properties, inconsistent component styling, and platform-specific UI expectations when defining global app appearance. This Skill provides structured guidance for implementing modern Material 3 themes and adaptive design patterns. ## Core Features & Use Cases - Material 3 Migration: Replace deprecated properties like accentColor and AppBarTheme.color with modern ColorScheme.fromSeed and backgroundColor equivalents. - Component Theme Normalization: Apply the correct *ThemeData classes (CardThemeData, DialogThemeData, AppBarThemeData) when defining ThemeData. - Adaptive Platform Design: Implement platform-idiomatic behaviors such as scrollbar visibility, selectable text, and Windows versus macOS button ordering. - Use Case: When modernizing a legacy Flutter app, follow the migration workflow to remove useMaterial3 flags, regenerate color schemes from seed colors, and swap legacy buttons like RaisedButton for ElevatedButton. ## Quick Start Apply the flutter-theming-apps skill to migrate my Flutter app's ThemeData to Material 3 with a seed-based color scheme.

Frequently Asked Questions about flutter-theming-apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a Flutter app theme to Material 3?▼

Remove useMaterial3: false from ThemeData since Material 3 is the default since Flutter 3.16. Replace manual ColorScheme definitions with ColorScheme.fromSeed, swap deprecated accentColor for colorScheme.secondary, and update legacy buttons to TextButton, ElevatedButton, and OutlinedButton.

How to style Flutter buttons with state-dependent colors?▼

Use a ButtonStyle object with MaterialStateProperty.resolveWith to return different colors for hovered, focused, pressed, or disabled states. For simple overrides, use static helpers like TextButton.styleFrom with a foregroundColor parameter.

Why does Flutter warn about CardTheme versus CardThemeData?▼

Component themes in ThemeData have been normalized to use *ThemeData classes rather than *Theme widgets. When defining ThemeData, use CardThemeData, DialogThemeData, TabBarThemeData, and AppBarThemeData for the corresponding properties.

Does Flutter Material 3 change elevation and shadows?▼

Material 3 uses ColorScheme.surfaceTint to indicate elevation instead of drop shadows. To revert to Material 2 shadow behavior, set surfaceTint to Colors.transparent and define a shadowColor explicitly.

How do I handle dialog button order on Windows versus macOS?▼

Windows places confirmation buttons on the left while macOS and Linux place them on the right. Wrap the buttons in a Row and set textDirection to TextDirection.rtl on Windows and TextDirection.ltr on other platforms.

Related Skills

Explore More Software Engineering Skills→
Vivekmano27Vivekmano27

flutter-patterns

Organizes Flutter projects with clean architecture, Riverpod or BLoC state management, and responsive UI patterns.

Community
Intermediate
atemagueratemaguer

expo-deployment

Deploy Expo applications to iOS, Android, and web release targets.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

theming

Establish semantic token systems for light, dark, and high-contrast UI themes.

Official
Advanced
flutterflutter
2.8k

flutter-theming-apps

Customize Flutter app appearance using Material 3 theming and adaptive design.

Official
Intermediate