New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Flutter SVG Icon Colorfilter Visibility

by divinevideo in divinevideo/divine-mobile

Fix invisible or poorly visible SVG icons in Flutter when using fluttersvg package.

MPL-2.0Auto-check passedMobile

Install Flutter SVG Icon Colorfilter Visibility

skills CLI
$ npx skills add divinevideo/divine-mobile --skill flutter-svg-icon-colorfilter-visibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install divinevideo/divine-mobile flutter-svg-icon-colorfilter-visibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/divinevideo/divine-mobile.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/flutter-svg-icon-colorfilter-visibility .claude/skills/flutter-svg-icon-colorfilter-visibility && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
flutter-svg-icon-colorfilter-visibility
GitHub stars
266
Token cost
~979 tokens
SKILL.md length
281 words
Files
1
Skills in repo
103
Repo updated
First seen
Licence
MPL-2.0

At a glance

Fix invisible or poorly visible SVG icons in Flutter when using fluttersvg package.

  • Works in 3 steps: ColorFilter.mode with BlendMode.srcIn… → Don't rely on Opacity for color changes… → SVG fill attribute is overridden - Even…
  • SVG icons appear invisible despite correct colors in the SVG file
  • SKILL.md covers Problem, Context / Trigger Conditions, Solution and Verification, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Flutter SVG Icon Colorfilter Visibility is an agent skill from divinevideo/divine-mobile. Fix invisible or poorly visible SVG icons in Flutter when using fluttersvg package. Use when: (1) SVG icons appear invisible despite correct colors in the SVG file, (2) Using Opacity widget to change icon visibility/state but icons don't render properly, (3) Tab bar or navigation icons disappear or have wrong colors, (4) Icons with fill="white" don't show on dark backgrounds. The fix is to use ColorFilter.mode() instead of Opacity widget for SVG icon state styling.

Its SKILL.md is about 980 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Icons and illustration and Cross-platform mobile apps. It works with Flutter. The licence is MPL-2.0.

When your agent uses it

  • SVG icons appear invisible despite correct colors in the SVG file
  • Using Opacity widget to change icon visibility/state but icons dont render properly
  • Navigation icons disappear
  • Have wrong colors

Example prompts

  • “/flutter-svg-icon-colorfilter-visibility”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. ColorFilter.mode with BlendMode.srcIn replaces the SVG's fill color with the
  2. Don't rely on Opacity for color changes - Opacity affects transparency but
  3. SVG fill attribute is overridden - Even if your SVG has fill="white", the

What it can do on your machine

Read from SKILL.md and the folder at commit c3d6f7e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • api.flutter.dev
    • pub.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Flutter SVG Icon Colorfilter Visibility loads about 979 tokens when it runs. Until then it costs about 128 tokens; SKILL.md has 281 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~128
When it runs · the whole SKILL.md, loaded when a task matches
~979

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from divinevideo/divine-mobile at commit c3d6f7e, republished under its MPL-2.0 licence (© divinevideo). 281 words, ~979 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-svg-icon-colorfilter-visibility/SKILL.md (or your agent's skills folder).
name
flutter-svg-icon-colorfilter-visibility
description
Fix invisible or poorly visible SVG icons in Flutter when using flutter_svg package. Use when: (1) SVG icons appear invisible despite correct colors in the SVG file, (2) Using Opacity widget to change icon visibility/state but icons don't render properly, (3) Tab bar or navigation icons disappear or have wrong colors, (4) Icons with fill="white" don't show on dark backgrounds. The fix is to use ColorFilter.mode() instead of Opacity widget for SVG icon state styling.
author
Claude Code
version
1.0.0
date
2026-01-30

Flutter SVG Icon ColorFilter vs Opacity

Problem

SVG icons rendered with flutter_svg appear invisible or have incorrect visibility when using the Opacity widget to indicate selected/unselected states. This commonly occurs in bottom navigation bars, tab bars, or any UI with icon state changes.

Context / Trigger Conditions

  • Using flutter_svg package with SvgPicture.asset()
  • SVG files have explicit fill colors (e.g., fill="white")
  • Icons wrapped in Opacity widget for selected/unselected states
  • Icons appear invisible or barely visible despite correct SVG content
  • Background color should provide sufficient contrast (e.g., white on dark green)

Solution

Replace Opacity widget with ColorFilter on the SvgPicture:

Before (problematic):

dart
Widget _buildTabButton(String iconPath, bool isSelected) {
  return Opacity(
    opacity: isSelected ? 1.0 : 0.5,
    child: SvgPicture.asset(iconPath, width: 32, height: 32),
  );
}

After (correct):

dart
Widget _buildTabButton(String iconPath, bool isSelected) {
  final iconColor = isSelected ? Colors.white : Colors.grey;

  return SvgPicture.asset(
    iconPath,
    width: 32,
    height: 32,
    colorFilter: ColorFilter.mode(iconColor, BlendMode.srcIn),
  );
}
Key Points

  1. ColorFilter.mode with BlendMode.srcIn replaces the SVG's fill color with the specified color wherever the SVG has opaque pixels

  2. Don't rely on Opacity for color changes - Opacity affects transparency but doesn't change the actual rendered color, which can cause visibility issues

  3. SVG fill attribute is overridden - Even if your SVG has fill="white", the ColorFilter will replace it with your specified color

Verification

After applying the fix:

  1. Selected icons should render in the selected color (e.g., white)
  2. Unselected icons should render in the unselected color (e.g., grey)
  3. Both states should be clearly visible against the background

Example

Bottom navigation with proper icon coloring:

dart
Widget _buildNavIcon(String assetPath, int tabIndex, int currentIndex) {
  final isSelected = tabIndex == currentIndex;
  final iconColor = isSelected ? Colors.white : const Color(0xFF8A9A94);

  return GestureDetector(
    onTap: () => _onTabTap(tabIndex),
    child: Container(
      width: 48,
      height: 48,
      padding: const EdgeInsets.all(8),
      child: SvgPicture.asset(
        assetPath,
        width: 32,
        height: 32,
        colorFilter: ColorFilter.mode(iconColor, BlendMode.srcIn),
      ),
    ),
  );
}

Notes

  • This applies to flutter_svg package specifically; other SVG rendering solutions may behave differently
  • If you need both color change AND opacity, apply ColorFilter first, then wrap in Opacity if truly needed
  • For icons that should maintain their original multi-color appearance, don't use ColorFilter - but then Opacity alone may work fine
  • BlendMode.srcIn specifically means "show source color where destination (SVG) is opaque"

References

© divinevideo, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/flutter-svg-icon-colorfilter-visibility of divinevideo/divine-mobile.

Open the folder on GitHubat commit c3d6f7e

Compare with similar skills

Flutter SVG Icon Colorfilter Visibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flutter SVG Icon Colorfilter Visibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter SVG Icon Colorfilter Visibility this skilldivinevideo/divine-mobile266—~979Automated safety check: PassMPL-2.0
Mobile App UI Designceorkm/mobile-app-ui-design409—~2kAutomated safety check: PassNone
Marionette Flutter Drive Appleancodepl/marionette_mcp482—~11kAutomated safety check: PassApache-2.0
Cue AnimationsMilad-Akarie/cue1191 repos~6.6kAutomated safety check: PassMIT
Tm Quick ActionFar-Se/tabame372—~4.3kAutomated safety check: PassMIT
AnimationsVeryGoodOpenSource/vgv-ai-flutter-plugin170—~3.5kAutomated safety check: PassMIT

Similar skills

  • Mobile App UI Design

    ceorkm/mobile-app-ui-design

    Design high-quality mobile app UI/UX screens, flows, and components.

    409 GitHub stars~2k tokensUpdated 3 mo ago
    MobileAuto-check passed

  • Marionette Flutter Drive App

    leancodepl/marionette_mcp

    Set up and drive a running Flutter app (debug or profile) with Marionette — an AI agent's hands and eyes for the app.

    482 GitHub stars~11k tokensUpdated 5 days ago
    MobileAuto-check passed

  • Cue Animations

    Milad-Akarie/cue

    Flutter animation using the Cue package. An agent skill from Milad-Akarie/cue.

    119 GitHub starsUsed in 1 repo~6.6k tokens
    MobileAuto-check passed

  • Tm Quick Action

    Far-Se/tabame

    Build or revise Tabame quick menu top-bar buttons in lib/widgets/itzy/quickmenu/button.dart.

    372 GitHub stars~4.3k tokensUpdated yesterday
    MobileAuto-check passed

  • Animations

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for Flutter animations using the built-in animation framework, covering implicit animations, explicit AnimationController animations, page transitions, and Material 3 motion tokens.

    170 GitHub stars~3.5k tokensUpdated 5 days ago
    MobileAuto-check passed

  • Flutter Riverpod State Management

    andrewyng/context-hub

    Guides Flutter state management with Riverpod: choosing provider types, wiring ConsumerWidgets, handling async state and lifecycle, and overriding providers in tests.

    14k GitHub stars~1.1k tokensUpdated 4 mo ago
    MobileAuto-check passed

More from divinevideo/divine-mobile

All 103 skills in this repo

  • Argocd Externalsecret Namespace Permission

    divinevideo/divine-mobile

    Fix ArgoCD ExternalSecret deployment failing with "namespace X is not permitted in project Y".

    266 GitHub stars~931 tokensUpdated today
    Auto-check passed

  • Art Direct

    divinevideo/divine-mobile

    Art direction for any content — reads text, PDF, Word, HTML, PPT, then proposes 2-3 creative directions with photography style, mood, and visual language.

    266 GitHub stars~4.8k tokensUpdated today
    Auto-check passed

  • Async Await Null Race Condition

    divinevideo/divine-mobile

    Fix "Null check operator used on a null value" errors when an object is set to null during an async await.

    266 GitHub stars~881 tokensUpdated today
    Auto-check passed

  • AWS V4 Signing Custom Headers Gcs

    divinevideo/divine-mobile

    Add custom metadata headers (x-amz-meta-) to AWS v4 signed requests for GCS S3-compatible API.

    266 GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Bash Herestring Newline Secrets

    divinevideo/divine-mobile

    Fix password/secret authentication failures caused by trailing newlines when creating Google Cloud secrets (or similar) with bash here-strings.

    266 GitHub stars~791 tokensUpdated today
    Auto-check passed

  • Blossom Content Addressed URL Filtering

    divinevideo/divine-mobile

    Fix silent video/media processing failures caused by URL extraction code that filters on file extensions (.mp4, .webm, .webp).

    266 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Flutter SVG Icon Colorfilter Visibility

What does Flutter SVG Icon Colorfilter Visibility do?

Fix invisible or poorly visible SVG icons in Flutter when using fluttersvg package. Flutter SVG Icon Colorfilter Visibility is an agent skill from divinevideo/divine-mobile. Fix invisible or poorly visible SVG icons in Flutter when using fluttersvg package.

When should I use Flutter SVG Icon Colorfilter Visibility?

Flutter SVG Icon Colorfilter Visibility fits situations like: SVG icons appear invisible despite correct colors in the SVG file; using Opacity widget to change icon visibility/state but icons dont render properly; navigation icons disappear; have wrong colors.

How do I install Flutter SVG Icon Colorfilter Visibility in Claude Code?

Run `npx skills add divinevideo/divine-mobile --skill flutter-svg-icon-colorfilter-visibility -a claude-code`. Or copy the skill folder (.agents/skills/flutter-svg-icon-colorfilter-visibility in divinevideo/divine-mobile) into .claude/skills/flutter-svg-icon-colorfilter-visibility in your project. Claude Code loads it when a task matches its description.

How do I install Flutter SVG Icon Colorfilter Visibility in Codex?

Run `npx skills add divinevideo/divine-mobile --skill flutter-svg-icon-colorfilter-visibility -a codex`. Or copy the skill folder (.agents/skills/flutter-svg-icon-colorfilter-visibility in divinevideo/divine-mobile) into .agents/skills/flutter-svg-icon-colorfilter-visibility in your project. Codex loads it when a task matches its description.

Can I use Flutter SVG Icon Colorfilter Visibility in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add divinevideo/divine-mobile --skill flutter-svg-icon-colorfilter-visibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter-svg-icon-colorfilter-visibility, .gemini/skills/flutter-svg-icon-colorfilter-visibility, .github/skills/flutter-svg-icon-colorfilter-visibility and .opencode/skills/flutter-svg-icon-colorfilter-visibility in your project.

What does Flutter SVG Icon Colorfilter Visibility need to run?

SKILL.md names no scripts, command-line tools or credentials: Flutter SVG Icon Colorfilter Visibility is instructions for the agent only.

Does Flutter SVG Icon Colorfilter Visibility access the network?

SKILL.md names 2 domains. As links in the text: api.flutter.dev and pub.dev. This is read from the text; nothing was executed.

Is Flutter SVG Icon Colorfilter Visibility safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flutter SVG Icon Colorfilter Visibility use?

Flutter SVG Icon Colorfilter Visibility is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter SVG Icon Colorfilter Visibility use?

About 979 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Flutter SVG Icon Colorfilter Visibility?

Skills that share tags, products or a category with Flutter SVG Icon Colorfilter Visibility: Mobile App UI Design (ceorkm/mobile-app-ui-design, 409 stars), Marionette Flutter Drive App (leancodepl/marionette_mcp, 482 stars), Cue Animations (Milad-Akarie/cue, 119 stars) and Tm Quick Action (Far-Se/tabame, 372 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter SVG Icon Colorfilter Visibility?

divinevideo (a GitHub organization) maintains it in divinevideo/divine-mobile, which has 266 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 10, 2026.

Source: divinevideo/divine-mobile on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.