skills.rest
sampaio-tech
sampaio-techOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/sampaio-tech/iOS-design-system --skill create-widget
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
raphaelchristiraphaelchristi
43

harness:setup

Configure Harness Evolver, LangSmith, and baseline evaluations for Python projects.

Community
Advanced
gsmlg-appgsmlg-app
2

project-widget

Generate Flutter widget packages with Mason templates and barrel exports.

Official
Intermediate
JesusFigueroa25JesusFigueroa25

mobile-app-builder

Optimize Flutter screens, navigation, state management, and SQLite caching for the SeaBot app.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

flutter-material

Enable Flutter Material 3 UI with ThemeData and dynamic color themes.

Community
Intermediate