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.

Demo

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:

Color Scheme Tab

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:

Text Theme Tab

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:

Material Widgets Tab

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:

Cupertino Widgets Tab

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:

Custom Tabs Example

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.

Libraries

theme_inspector
An interactive inspector for visualizing and debugging a Flutter app's theme.