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

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

Related Skills

Explore More Software Engineering Skills→
openwebfopenwebf
2.5k

webf-native-ui

Integrates WebF's Cupertino UI components into JavaScript projects.

Official
Advanced
jerelvelardejerelvelarde
6

flutter-platform-patterns

Guides Flutter platform-adaptive UI patterns and native integration via platform channels.

Community
Advanced
sampaio-techsampaio-tech
19

layout-widgets

Provide Flutter widgets for iOS-native layouts and navigation structures.

Official
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

flutter-material

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

Community
Intermediate