flutterUiSpecialist
The Flutter UI Specialist is a tool designed to help developers create visually stunning and high-quality user interfaces for Flutter applications. It focuses on crafting sophisticated visual effects beyond standard Material Design, such as liquid glass, candy gradients, and jelly animations. This agent is ideal for developers who want to elevate the aesthetic appeal of their apps and create a more engaging user experience. It leverages advanced Flutter techniques and packages to achieve these effects efficiently. The agent provides ready-to-use solutions for common UI design challenges, saving developers time and effort. It's particularly useful for projects where visual polish and a unique design are critical.
This agent solves the problem of creating visually rich and complex Flutter UIs that go beyond the default Material Design aesthetic. Developers often struggle to implement advanced visual effects manually, which can be time-consuming and require specialized skills; this agent provides a shortcut to achieve a professional and eye-catching look.
CAPABILITIES & CONSTRAINTS
README
# Flutter UI Specialist > A Claude Code sub-agent that crafts **Apple-quality** Flutter UIs — liquid glass, > candy gradients, jelly animations, and Impeller-native effects. Not a basic Material 3 > agent. A visual craftsman. [](LICENSE) [](https://flutter.dev) [](https://docs.flutter.dev/perf/impeller) --- ## Why this exists Flutter's default tooling produces generic Material 3 screens. This agent knows the **craft layer** — the techniques that separate "it works" from "it's beautiful": liquid glass blur, multi-layer candy tile shadows, spring physics animations, grain noise textures, gyroscope tilt, Rive state machines, and fragment shaders. --- ## What it delivers | Visual effect | Technique | |--------------|----------| | 🍬 Candy / glossy buttons | 3-layer gradient fill + gloss highlight + 3× BoxShadow | | 🌊 Liquid glass cards | `BackdropFilter` + `ClipRRect` + Fresnel highlight overlay | | 🫀 Jelly tile bounce | `AnimatedScale` + `Curves.elasticOut` (250ms) | | ✨ Gradient connection line | `Paint()..shader = gradient.createShader(rect)` via CustomPainter | | 🎨 Animated gradient background | `AnimationController.repeat(reverse: true)` + `Color.lerp` | | 📝 Gradient text | `ShaderMask` + `LinearGradient.createShader` | | 🎊 Confetti celebration | `confetti` package + `HapticFeedback.heavyImpact()` | | 🪨 Grain texture | `mesh_gradient` `noiseIntensity: 0.20` | | 📐 Staggered entrance | `flutter_animate` with delay chains | | 📱 Haptic pairing | lightImpact/mediumImpact/heavyImpact mapped to gesture weight | --- ## Installation ### Project-level ```bash mkdir -p your-project/.claude/agents cp agents/flutter-ui-specialist.md your-project/.claude/agents/ ``` ### Global (all Claude Code sessions) ```bash mkdir -p ~/.claude/agents cp agents/flutter-ui-specialist.md ~/.claude/agents/ ``` --- ## Usage examples ``` Redesign the home screen with a candy-colored UI: - Animated lavender gradient background - Glossy game mode cards with gradient icons and soft shadows - Staggered entrance animations with flutter_animate ``` ``` Make the letter tiles in my word game look like colorful candy pills. Each tile should have a different gradient, spring-bounce on selection, and a 3-layer shadow system. ``` ``` Add a confetti explosion + animated star reveal to the level complete screen. ``` --- ## Packages used ```yaml flutter_animate: ^4.5.2 # Staggered animations, spring effects confetti: ^0.8.0 # Celebration bursts mesh_gradient: ^1.0.4 # Grain + mesh backgrounds google_fonts: ^6.2.1 # Variable fonts lottie: ^3.3.1 # Rive/Lottie animations ``` --- ## Anti-patterns prevented | ❌ Causes jank | ✅ Correct | |--------------|-----------| | `Opacity` widget (creates layer) | `FadeTransition` or `AnimatedOpacity` | | `AnimatedContainer` for bounce | `AnimatedScale` + `Curves.elasticOut` | | Single `BoxShadow` | 3× layered shadows (key + ambient + bottom edge) | | `BackdropFilter` without `ClipRRect` | Always clip before filter | | Flat icon containers | Gradient `BoxDecoration` + white icon | --- ## Compatibility | Flutter | Rendering | iOS | Android | |---------|----------|-----|---------| | 3.27+ | Impeller (default) | 14+ | API 21+ | --- ## License MIT — [EngageEngine](https://engageengine.ch)
PUBLIC HISTORY
IDENTITY
Identity inferred from code signals. No PROVENANCE.yml found.
Is this yours? Claim it →METADATA
README BADGE
Add to your README:
