sheet-modals

Create iOS-style modal and bottom sheets in Flutter with search and customization.

19|2|Updated Apr 29, 2023
One-click install
npx skills add https://github.com/sampaio-tech/iOS-design-system --skill sheet-modals
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sheet-modals
Source: https://github.com/sampaio-tech/iOS-design-system/tree/main/.claude/skills/sheet-modals
Command: npx skills add https://github.com/sampaio-tech/iOS-design-system --skill sheet-modals

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of pre-built, customizable iOS-style modal sheets and bottom sheets, significantly reducing the development time required to implement common UI patterns in Flutter applications.

Core Features & Use Cases

  • Versatile Sheet Types: Offers draggable bottom sheets, full-screen modals, action sheets, confirmation sheets, and Apple Pay variants.
  • Integrated Search: Includes modals with built-in search functionality for efficient user selection.
  • Customization: Allows for custom background colors, titles, leading/trailing widgets, and prompt messages.
  • Use Case: Quickly implement a "Share" action sheet, a "Select Contact" modal with search, or a confirmation dialog for a critical user action, all while maintaining a native iOS look and feel.

Quick Start

Use the sheet-modals skill to display a draggable bottom sheet with a title and a list of selectable options.

Frequently Asked Questions about sheet-modals

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

FAQPage Schema
How do I create iOS-style modal sheets in Flutter?

To create iOS-style modal sheets in Flutter, use this collection of reusable widgets to build draggable bottom sheets, action sheets, and confirmation dialogs. It supports native UI patterns like draggable dismissal and Apple Pay-like interfaces.

Can I add a search bar inside a Flutter bottom sheet?

Yes, you can add search functionality inside a Flutter bottom sheet using the integrated search modals. This allows users to efficiently search and select items from a list within a native iOS-style sheet interface.

What is the best way to implement an Apple Pay-like interface in Flutter?

The best way to implement an Apple Pay-like interface in Flutter is using pre-built sheet variants. These customizable widgets provide the specific interactive UI patterns needed for payment confirmation and selection while maintaining a native look.

How do I customize titles and background elements in Flutter dialogs?

You can customize titles and background elements in Flutter dialogs by configuring the widget parameters. The collection allows custom background colors, prompt messages, and leading or trailing widgets to ensure seamless integration with your app's UI.

Does this Flutter modal collection support draggable dismissal?

Yes, this Flutter modal collection supports draggable dismissal for bottom sheets. This allows users to naturally swipe down to close the sheet, providing a native iOS user experience without requiring extra custom logic.

When should I use an action sheet instead of a confirmation dialog?

Use an action sheet for presenting multiple distinct choices like a Share menu, and use a confirmation dialog for critical user actions requiring explicit approval. Both are available as pre-built iOS-style widgets in the collection.