create-widget

Create Flutter widgets following iOS Design System and Apple HIG conventions.

19|2|Updated Apr 29, 2023

Search Tags:#coding standards #ui components #widget development #flutter #ios design #apple hig

Ready to run

npx skills add https://github.com/sampaio-tech/iOS-design-system --skill create-widget

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-widget
Source: https://github.com/sampaio-tech/iOS-design-system/tree/main/.claude/skills/create-widget
Command: npx skills add https://github.com/sampaio-tech/iOS-design-system --skill create-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and templates for creating new Flutter widgets that adhere to the iOS Design System's patterns, conventions, and Apple's Human Interface Guidelines.

Core Features & Use Cases

Widget Creation Standards: Learn file naming, class naming, and template usage for both StatelessWidget and HookWidget.
Theme Integration: Understand how to correctly access and utilize the IosTheme for consistent styling across light and dark modes.
Apple HIG Compliance: Get guidance on spacing, touch targets, typography, and border radius standards.
Use Case: A developer needs to create a new custom button widget that matches the look and feel of native iOS apps. This Skill provides the exact structure, theme integration, and HIG considerations needed.

Quick Start

Follow the widget template provided in the documentation to create a new MyCustomWidget.dart file.

Frequently Asked Questions about create-widget

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

FAQPage Schema

How do I create Flutter widgets that follow Apple HIG and iOS design conventions?▼

To create Flutter widgets adhering to Apple HIG, use established templates for StatelessWidget or HookWidget, integrate IosTheme for light and dark modes, and apply specific spacing, typography, and touch target standards.

What is the best way to structure a custom iOS button in Flutter?▼

The best way to structure a custom iOS button in Flutter is by following file and class naming conventions, utilizing factory constructors, and applying IosTheme to ensure native look and feel across light and dark modes.

How do I integrate IosTheme into a new Flutter widget?▼

You integrate IosTheme into a Flutter widget by accessing theme properties within your StatelessWidget or HookWidget template, ensuring consistent styling for typography, spacing, and border radius across light and dark modes.

When should I use HookWidget instead of StatelessWidget for iOS widget development?▼

You use HookWidget instead of StatelessWidget when your iOS widget requires state management or reactive logic, while still maintaining strict Apple HIG compliance for touch targets, spacing, and typography.

Does this iOS widget creation guide support sealed classes and factory constructors?▼

Yes, the iOS widget creation guide supports sealed classes and factory constructors, providing specific examples and templates to implement these patterns alongside IosTheme integration and Apple HIG compliance.

What testing checklist should I follow for Flutter widgets adhering to the iOS Design System?▼

The testing checklist for iOS Design System widgets includes verifying Apple HIG compliance for spacing, touch targets, typography, validating IosTheme integration across light and dark modes, and confirming proper file and class naming conventions.