flutter-widget-patterns

Guide Flutter widget patterns for layout, theming, navigation, and common errors.

5|Updated Oct 14, 2025
One-click install
npx skills add https://github.com/reloveution/dart-flutter-rules --skill flutter-widget-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flutter-widget-patterns
Source: https://github.com/reloveution/dart-flutter-rules/tree/main/skills/flutter-widget-patterns
Command: npx skills add https://github.com/reloveution/dart-flutter-rules --skill flutter-widget-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides best practices and solutions for common challenges in Flutter UI development, ensuring efficient, maintainable, and performant widget construction and layout management.

Core Features & Use Cases

  • Widget Composition: Guidance on creating reusable and maintainable UI components.
  • Layout Optimization: Solutions for common layout errors like RenderFlex overflow and viewport issues.
  • Navigation: Best practices for using go_router and managing navigation overlays.
  • Theming: Strategies for consistent theming, including custom ThemeExtension and WidgetStateProperty.
  • Performance & Accessibility: Tips for optimizing UI performance and ensuring accessibility standards.

Quick Start

Use the flutter-widget-patterns skill to refactor a complex build method into smaller, reusable widgets.

Frequently Asked Questions about flutter-widget-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix RenderFlex overflow errors in Flutter?

To fix RenderFlex overflow in Flutter, you need to properly constrain your widgets using Flexible or Expanded components. This Skill provides targeted layout solutions to resolve common viewport sizing errors and ensure proper UI rendering.

What is the best way to structure Flutter widget composition for maintainability?

The best way to structure Flutter widget composition is by refactoring complex build methods into smaller, reusable UI components. This Skill provides specific guidance on creating maintainable widget patterns to streamline your UI construction process.

How do I implement custom theming with ThemeExtension in Flutter?

You implement custom theming in Flutter by utilizing ThemeExtension and WidgetStateProperty to define consistent styling strategies. This Skill outlines how to configure ThemeData effectively for your application's specific visual requirements.

Why does my Flutter app throw a vertical viewport unbounded error?

A vertical viewport unbounded error in Flutter occurs when a layout lacks bounded height constraints. This Skill addresses these specific viewport issues by providing layout optimization solutions to properly restrict widget dimensions.

Can I use go_router for navigation overlays in Flutter?

Yes, you can use go_router for navigation overlays in Flutter. This Skill provides specific best practices for managing navigation overlays and integrating go_router effectively within your application's routing architecture.

How do I optimize Flutter UI performance with ListView.builder?

You optimize Flutter UI performance with ListView.builder by lazily constructing list items to minimize memory overhead. This Skill offers specific performance optimization tips to ensure your scrolling widgets operate efficiently.