skills.rest
wildbitca
wildbitcaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

flutter-widgets

Codify Flutter widget design patterns for building, refactoring, and reviewing UI.

1|Updated Mar 19, 2026
Search Tags:#theming#ui#architecture#maintainability#flutter#widgets#const
One-click install
npx skills add https://github.com/wildbitca/ai-resources --skill flutter-widgets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-widgets
Source: https://github.com/wildbitca/ai-resources/tree/main/skills/flutter-widgets
Command: npx skills add https://github.com/wildbitca/ai-resources --skill flutter-widgets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Principles for maintainable Flutter widgets and UI components, enabling teams to build, refactor, and review UI with consistency and quality.

Core Features & Use Cases

  • StatelessWidget by default; StatefulWidget only for local state/controllers.
  • Composition: extract UI into small, atomic const widgets.
  • Theming: Theme.of(context). No hardcoded colors.
  • Layout: Use Flex + Gap/SizedBox for consistent spacing.
  • Widget Keys: All interactive elements should use keys from widget_keys.dart.
  • File Size: If a UI file exceeds ~80 lines, extract sub-widgets into private classes.
  • Specialized: SelectionArea, InteractiveViewer, ListWheelScrollView; avoid IntrinsicWidth/Height unless strictly required.
  • Large Lists: Always use ListView.builder.

Quick Start

Refactor a Flutter UI page into small, const widgets and apply theme-based styling for consistency.

Frequently Asked Questions about flutter-widgets

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

FAQPage Schema
How do I build maintainable Flutter UI components that scale across projects?▼

Build maintainable Flutter UI by defaulting to StatelessWidget, extracting subwidgets into small atomic const components, and driving styling through Theme.of(context) to ensure reusability and consistency.

What is the best way to refactor a large Flutter widget file?▼

Refactor large Flutter widget files by extracting subwidgets into private const classes once the file exceeds approximately 80 lines, ensuring small atomic components and improved maintainability.

Why should I use Theme.of(context) instead of hardcoded colors in Flutter widgets?▼

Use Theme.of(context) instead of hardcoded colors in Flutter widgets to achieve theme-driven styling, enabling consistent visual updates and maintainability across your application.

When do I need to use StatefulWidget instead of StatelessWidget in Flutter?▼

Use StatefulWidget instead of StatelessWidget in Flutter only when the widget needs to manage local state or controllers; otherwise, default to StatelessWidget for maintainability and performance.

Does building large lists in Flutter require ListView.builder?▼

Building large lists in Flutter requires ListView.builder for performance optimization, and you should avoid IntrinsicWidth or IntrinsicHeight unless strictly required to maintain rendering efficiency.

Related Skills

Explore More Software Engineering Skills→
ganpareganpare

flutter-ui-design

Provide architecture guidelines and component splitting rules for Flutter UI development.

Community
Intermediate
mitchdennymitchdenny
173

widget-creator

Generate Hex1b widget scaffolds with nodes, theming, extensions, and tests.

Community
Advanced
guichefferguicheffer
3

styled-components-patterns

Implement styled-components v5.3.5 patterns with theme integration and TypeScript prop typing.

Community
Intermediate
dtabordadtaborda

typescript

Enforce strict TypeScript patterns with const types, flat interfaces, and type guards.

Community
Advanced