Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv0.1.0-dev.8

umbra_cli

Umbra CLI allows Flutter developers to create their own shaders and compile them to strongly typed dart files.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
29
Likes
35
Pub points
120

Install package

flutter pub add umbra_cli

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Umbra CLI is a tool for Flutter developers to create custom shaders and automatically compile them into strongly typed Dart files. It streamlines the integration of advanced visual effects by abstracting shader code into usable Dart classes, enabling dynamic and performant graphics across multiple platforms. Designed for developers working with background effects, gradients, and real-time visualizations, it enhances workflow efficiency by reducing boilerplate and improving type safety. The tool supports Android, iOS, Web, macOS, Windows, and Linux, making it ideal for cross-platform projects requiring rich graphical content.

Use cases

  • Creating custom gradient effects
  • Implementing animated background visuals
  • Building interactive UI elements with shaders
  • Developing performance-optimized graphics
  • Integrating complex visual effects in cross-platform apps

Key features

  • Auto-generates typed Dart classes from shaders
  • Supports multiple target platforms
  • Reduces shader integration boilerplate
  • Enforces type safety in shader usage
  • Simplifies shader lifecycle management

Suitable for

  • Flutter developers building visually rich apps
  • Teams needing consistent shader workflows
  • Projects requiring high-performance graphics
  • Developers working with dynamic backgrounds or animations
  • Cross-platform app creators using custom shaders

Considerations

  • Requires familiarity with GLSL shader syntax
  • May increase build time with large shader sets
  • Limited to Flutter's rendering pipeline
  • Best suited for non-trivial visual effects
  • Needs proper setup in project build process

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Umbra

umbra coverage style: very good analysis License: MIT Powered by Mason

The visual editor for shaders in Flutter.

umbra /ˈʌmbrə/

noun:

  1. the fully shaded inner region of a shadow cast by an opaque object, especially the area on the earth or moon experiencing the total phase of an eclipse.
  2. LITERARY
    shadow or darkness.
    "an impenetrable umbra seemed to fill every inch of the museum"

Packages

Package Pub
umbra pub package
umbra_cli pub package
umbra_flutter pub package

Quick start

For a getting started with Umbra check out the getting started section in the docs.

# 🎯 Activate from https://pub.dev
dart pub global activate umbra_cli

# 🚀 Install umbra dependencies
umbra install-deps

# 🕶️ Create your first shader
umbra create hello_world

# 📦 Compile your first shader to a Dart file
umbra generate shaders/hello_world.glsl --output lib/shaders/

Documentation

For the documentation that describes how you should writing shaders that are compatible with Umbra tooling, see the Shader Specifications documentation.

Documentation about the CLI can be found here.

Articles

If you are looking for more general information about shaders in Flutter, here is a list of articles:

Categories

Background Effects, Gradients & Shaders

Dependencies

Dependency list 8 items

Source repository

Projects using this package

No data available yet.