skills.vishalvoidskills/vishalvoid
Technical & DevelopmentAdvanced

flutter-theming-apps

Customize Flutter app appearance through the theming system

Developer Setup

Setup & Installation

bash
npx skills add https://github.com/flutter/skills --skill flutter-theming-apps
Or paste this URL into your assistant to install:
https://github.com/flutter/skills/tree/address-feedback/skills/flutter-theming-appsView on GitHub

Overview

What This Skill Does

Customize Flutter app appearance through the theming system

Application

When to use this Skill

Documentation

Show Skills.md file

Implementing Flutter Theming and Adaptive Design

Contents

Core Theming Concepts

Flutter applies styling in a strict hierarchy: styles applied to the specific widget -> themes that override the immediate parent theme -> the main app theme.

  • Define app-wide themes using the theme property of MaterialApp with a ThemeData instance.
  • Override themes for specific widget subtrees by wrapping them in a Theme widget and using Theme.of(context).copyWith(...).
  • Do not use deprecated ThemeData properties:
    • Replace accentColor with colorScheme.secondary.
    • Replace accentTextTheme with textTheme (using colorScheme.onSecondary for contrast).
    • Replace AppBarTheme.color with AppBarTheme.backgroundColor.

Material 3 Guidelines

Material 3 is the default theme as of Flutter 3.16.

  • Colors: Generate color schemes using ColorScheme.fromSeed(seedColor: Colors.blue). This ensures accessible contrast ratios.
Lines 1 - 25 of 152

Recommendations

Explore other random skills

TechnicalIntermediate

provider-resources

Implement Terraform Provider resources and data sources using the Plugin Framework

TechnicalIntermediate

provider-test-patterns

Acceptance test patterns for Terraform providers using terraform-plugin-testing

TechnicalIntermediate

terraform-style-guide

Generate Terraform HCL code following HashiCorp's official style conventions

All skillsMy patterns