material-theming

Centralizes Flutter colors, typography, component styles, and spacing in Material 3 ThemeData.

162|23|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin --skill material-theming-verygoodopensource
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: material-theming
Source: https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/material-theming
Command: npx skills add https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin --skill material-theming-verygoodopensource

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Flutter widgets often accumulate hardcoded colors, inline TextStyle values, arbitrary padding numbers, and brightness conditionals that scatter styling decisions across the codebase and break dark mode. This Skill enforces ThemeData as the single source of truth so all visual styling lives in one place. ## Core Features & Use Cases - Color System: Defines an AppColors constants class, configures Material 3 ColorScheme with light and dark variants, and routes all widget color reads through Theme.of(context).colorScheme. - Typography and Component Themes: Centralizes text styles in AppTextStyle mapped to TextTheme slots, and moves repeated widget styling into FilledButtonThemeData, InputDecorationTheme, and AppBarTheme instead of wrappers or shared constants. - Spacing and Dark Mode: Establishes an AppSpacing scale built from a base unit and removes brightness conditionals from build methods by declaring light and dark ColorScheme instances. - Use Case: When reviewing a widget with a hardcoded Color, an inline TextStyle(fontSize: 18), and a Theme.of(context).brightness ternary, this Skill rewrites it to read colorScheme and textTheme from the theme and moves both brightness values into AppTheme.light and AppTheme.dark. ## Quick Start Ask the assistant to review this widget and move all of its hardcoded colors, text styles, and spacing into the app theme.

Frequently Asked Questions about material-theming

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

FAQPage Schema
How do I set up light and dark themes in Flutter with Material 3?

Create an AppTheme class with light and dark getters, each returning a ThemeData with its own ColorScheme brightness and color values. Pass both to MaterialApp via the theme and darkTheme parameters, and never check Brightness inside widget build methods.

How do I replace hardcoded colors in Flutter widgets?

Move the color into an AppColors constants class, map it to a ColorScheme role in ThemeData, and read it in the widget via Theme.of(context).colorScheme. Hardcoded Color values like Colors.blue should never appear in widget code.

Should I use a wrapper widget or InputDecorationTheme for repeated TextField styling?

Use InputDecorationTheme in ThemeData. Wrapper widgets and shared decoration constants still require every call site to opt in and are bypassed by a plain TextFormField, while the component theme applies defaults automatically.

How do I create a consistent spacing system in Flutter?

Define an AppSpacing class with a base spaceUnit constant and named steps like sm, md, and lg expressed as multiples of that unit. Use EdgeInsets.only or EdgeInsets.symmetric with these constants instead of arbitrary pixel literals.

Why is checking Theme brightness inside a build method a problem?

A brightness conditional duplicates a decision that belongs to ThemeData and makes both color values unreachable from the theme. Declare the light and dark values as the same ColorScheme role in two themes and read the role unconditionally.