Blink Flutter UI Development Skill

What problem does it solve?

This Skill streamlines Flutter UI development for the Blink app, ensuring consistency with Material Design 3 and the custom AppTheme. It helps developers quickly create new widgets, style components, and implement UI interactions without needing to remember every design constant or pattern, reducing development time and design inconsistencies.

Core Features & Use Cases

• Theme System Guidance: Access and apply AppTheme constants for colors, spacing, and typography, ensuring a cohesive look.
• Widget & Screen Patterns: Follow established templates for cards, message bubbles, and full screen structures, including loading and empty states.
• State Management & Performance: Get best practices for local and shared state management (Provider) and performance optimization (e.g., const constructors, ListView.builder).
• Use Case: When creating a new chat message bubble, use this skill to automatically generate the correct Container decoration with the appropriate gradient, border radius, and text styling based on whether it's a user or assistant message.

Quick Start

I need to create a new Flutter widget for a chat list item. Provide the basic StatelessWidget template and suggest how to apply AppTheme constants for padding, background color, and border radius.