button-system

Generate iOS-style Flutter buttons with customizable sizes, colors, icons, and typography.

19|2|Updated Apr 29, 2023

Search Tags:#ui components #flutter #widgets #button #cupertino #ios design

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of consistent, iOS-themed buttons within Flutter applications, ensuring adherence to Apple's Human Interface Guidelines.

Core Features & Use Cases

Two-Layer Button System: Offers both a low-level CupertinoButtonWidget for gesture handling and animations, and a high-level ButtonWidget for easy, themed button creation.
Customizable Appearance: Supports various sizes, colors, icons, and text styles to match diverse UI needs.
Use Case: Quickly implement primary call-to-action buttons, secondary actions with icons, or compact toolbar buttons that look and feel native to iOS.

Quick Start

Use the button-system skill to create a large, blue, primary action button with the label 'Continue' and a checkmark icon.

Frequently Asked Questions about button-system

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

FAQPage Schema

How do I create iOS-style buttons in Flutter that follow Apple HIG?▼

You can create iOS-style buttons in Flutter that follow Apple HIG by using a two-layer system providing a low-level widget for gesture handling and a high-level widget for themed UI development with customizable sizes and colors.

Can I add loading states and gestures to Cupertino buttons in Flutter?▼

Yes, you can add loading states and gestures to Cupertino buttons by using the low-level CupertinoButtonWidget, which manages base interactive gestures and loading animations within your Flutter application.

Does this button system support custom sizes, colors, and icons for iOS design?▼

Yes, the button system supports custom sizes, colors, icons, and typography for iOS design, enabling you to match diverse UI needs and build primary call-to-action or compact toolbar widgets.

What is the best way to build consistent Cupertino UI components in Flutter?▼

The best way to build consistent Cupertino UI components in Flutter is using a high-level themed button widget that simplifies creation while ensuring adherence to Apple's Human Interface Guidelines.

Do I need low-level widgets for primary call-to-action buttons in Flutter iOS design?▼

No, you do not need low-level widgets for primary call-to-action buttons in Flutter iOS design; the high-level ButtonWidget provides easy themed creation with customizable text styles and icons.