Theme Inspector #

A Flutter package that provides an interactive inspector for visualizing and debugging your app's themes, including Material and Cupertino widgets, color schemes, and text styles.

Requirements #

Version 2.x requires package:material_ui and package:cupertino_ui. As of Flutter 3.44 the Material and Cupertino libraries inside the SDK are frozen, and they are being replaced by these standalone packages. The inspector reads your theme from them, so your app must use them too.

If your app still imports package:flutter/material.dart, you have two options:

• Migrate your app (recommended — the SDK libraries are deprecated in the November 2026 stable release):

  dart fix --apply --code=migrate_design_widgets
  

• Stay on theme_inspector: ^1.1.0, which reads the theme from package:flutter/material.dart.

Opening the inspector from an app that has not migrated shows an explanatory screen rather than another app's theme. Requires Flutter 3.44 / Dart 3.12 or newer.

Features #

✨ Visual Theme Inspection - View all Material and Cupertino widgets with your current theme applied
🎨 Color Scheme Explorer - Browse and copy color codes from your ColorScheme
📝 Text Theme Preview - See all text styles with size and weight information
🔧 Fully Customizable - Add custom colors, text styles, widgets, and entire tabs
📋 Copy to Clipboard - Easily copy color codes and text style information
🎛️ Toggle Tabs - Enable or disable built-in tabs as needed

Quick Start #

Import the package and open the inspector:

import 'package:material_ui/material_ui.dart';
import 'package:theme_inspector/theme_inspector.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Theme Inspector Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () => ThemeInspector.open(context),
            child: const Text('Open Theme Inspector'),
          ),
        ),
      ),
    );
  }
}

Usage #

Basic Usage #

Simply call ThemeInspector.open(context) to display the inspector with all default tabs:

ElevatedButton(
  onPressed: () => ThemeInspector.open(context),
  child: const Text('Open Theme Inspector'),
)

This will open a page with four default tabs:

• Color Scheme - All ColorScheme colors with copy-to-clipboard functionality
• Material - Material widgets (buttons, text fields, cards, etc.)
• Cupertino - iOS-style Cupertino widgets
• Text Theme - All TextTheme styles with size information

Adding Custom Colors #

Display your custom color palette alongside the default ColorScheme:

import 'package:theme_inspector/theme_inspector.dart';

ThemeInspector.open(
  context,
  additionalColors: [
    ColorSection(
      title: "My custom colors",
      colors: [
        ColorInfo(
          name: 'Custom Color 1',
          color: const Color(0xFF0057B7),
          textColor: Colors.white,
        ),
        ColorInfo(
          name: 'Custom Color 2',
          color: const Color(0xFFFFDD00),
          textColor: Colors.black,
        ),
      ],
    ),
  ],
);

Adding Custom Text Styles #

Show your custom typography alongside the default TextTheme:

ThemeInspector.open(
  context,
  additionalTextStyles: [
    TextStyleInfo(
      'My Custom Style 1',
      const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Color(0xFF0057B7),
      ),
    ),
    TextStyleInfo(
      'My Custom Style 2',
      const TextStyle(
        fontSize: 16,
        fontStyle: FontStyle.italic,
        color: Color(0xFF9D2235),
      ),
    ),
  ],
);

Adding Custom Widgets to Material Tab #

Display your custom Material widgets to see how they look with the current theme:

final gradientButton = Container(
  height: 44.0,
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Color(0xFF0057B7), Color(0xFFFFDD00)],
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
    ),
    child: const Text(
      'My Custom Button',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

ThemeInspector.open(
  context,
  additionalMaterialWidgets: [
    SectionWrapper(
      title: 'My Custom Widget for Material Tab',
      child: gradientButton,
    ),
  ],
);

Adding Custom Widgets to Cupertino Tab #

Display your custom Cupertino widgets:

ThemeInspector.open(
  context,
  additionalCupertinoWidgets: [
    SectionWrapper(
      title: 'My Custom Widget for Cupertino Tab',
      child: gradientButton,
    ),
  ],
);

Creating Custom Tabs #

Add completely custom tabs with your own content:

ThemeInspector.open(
  context,
  customTabs: [
    InspectorTab(
      title: 'My Custom Tab',
      icon: Icons.catching_pokemon,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          'This is a custom tab added to the Theme Inspector. You can add any content here.',
          style: Theme.of(context).textTheme.bodyLarge,
        ),
      ),
    ),
  ],
);

Disabling Default Tabs #

You can disable any of the built-in tabs:

ThemeInspector.open(
  context,
  materialEnabled: false,      // Disable Material tab
  cupertinoEnabled: false,     // Disable Cupertino tab
  colorSchemeEnabled: true,    // Keep Color Scheme tab
  textThemeEnabled: true,      // Keep Text Theme tab
);

API Reference #

ColorSection #

Represents a group of related colors.

ColorSection({
  required String title,
  required List<ColorInfo> colors,
})

ColorInfo #

Represents information about a single color.

ColorInfo({
  required String name,
  required Color color,
  Color? textColor,  // Optional contrast color for text display
})

TextStyleInfo #

Represents information about a text style.

TextStyleInfo(
  String name,
  TextStyle? style,
)

SectionWrapper #

A wrapper widget for consistent section formatting.

SectionWrapper({
  required String title,
  required Widget child,
})

InspectorTab #

Represents a custom tab in the inspector.

InspectorTab({
  required String title,
  required IconData icon,
  required Widget child,
})

Agent Skill #

The package ships an agent skill at skills/theme_inspector/SKILL.md for use with coding agents that support skills, such as Claude Code. It teaches the agent when to reach for the inspector — building a new app, changing themes, fonts or colors, or adding a custom widget — and how to extend it with your own colors, text styles, widgets and tabs.

To use it, copy the skill into your project's skills directory:

cp -r path/to/theme_inspector/skills/theme_inspector .claude/skills/

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.