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

layout-widgets

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

19|2|Updated Apr 29, 2023
Search Tags:#ui#layout#design system#navigation#ios#flutter#widgets
One-click install
npx skills add https://github.com/sampaio-tech/iOS-design-system --skill layout-widgets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout-widgets
Source: https://github.com/sampaio-tech/iOS-design-system/tree/main/.claude/skills/layout-widgets
Command: npx skills add https://github.com/sampaio-tech/iOS-design-system --skill layout-widgets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides essential layout and navigation widgets that adhere to Apple's Human Interface Guidelines, simplifying the creation of consistent and native-feeling iOS interfaces in Flutter.

Core Features & Use Cases

  • Screen Structure: ScaffoldWidget provides the main app screen layout with integrated navigation and toolbars.
  • Navigation: CupertinoNavigatorBarWidget offers a standard iOS navigation bar with blur effects and automatic back button handling.
  • Content Grouping: GroupedTableWidget and RowWidget are used to create settings-style lists and data displays with proper spacing and visual hierarchy.
  • Toolbars: ToolBarWidget adds persistent action buttons at the bottom of the screen.
  • Use Case: Quickly assemble a settings screen by using ScaffoldWidget with a CupertinoNavigatorBarWidget and multiple GroupedTableWidget instances, each containing configurable RowWidget elements.

Quick Start

Use the layout-widgets skill to create a settings screen with a navigation bar and grouped tables.

Frequently Asked Questions about layout-widgets

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

FAQPage Schema
How do I build iOS-native layouts in Flutter that follow Apple's Human Interface Guidelines?▼

You can build iOS-native layouts in Flutter using foundational widgets like ScaffoldWidget and CupertinoNavigatorBarWidget that adhere to Apple's Human Interface Guidelines. These pre-built components provide standard screen scaffolding and navigation structures.

What is the best way to create a settings-style grouped list in a Flutter iOS app?▼

The best way to create a settings-style grouped list is by using GroupedTableWidget and RowWidget. These widgets provide proper spacing and visual hierarchy for data displays, ensuring a native iOS feel.

Can I add a standard iOS navigation bar with blur effects to my Flutter application?▼

Yes, you can add a standard iOS navigation bar with blur effects using CupertinoNavigatorBarWidget. It handles automatic back button integration and provides the standard iOS navigation structure.

Does Flutter provide built-in widgets for bottom toolbars in iOS-style applications?▼

Flutter supports bottom toolbars in iOS-style applications through ToolBarWidget. This widget adds persistent action buttons at the bottom of the screen, integrating seamlessly with the ScaffoldWidget.

How do I quickly assemble a complete iOS settings screen using Flutter layout widgets?▼

To quickly assemble an iOS settings screen, use ScaffoldWidget as the base, add a CupertinoNavigatorBarWidget for navigation, and populate it with multiple GroupedTableWidget instances containing configurable RowWidget elements.

Related Skills

Explore More Software Engineering Skills→
masssi164masssi164

flutter-adding-home-screen-widgets

Bridge Flutter data to native iOS and Android home screen widgets.

Community
Intermediate
seantempestaseantempesta
1

ui-live-tiles

Render persistent interactive UI tiles with hiccup components and data aggregation.

Community
Advanced
openwebfopenwebf
2.5k

webf-native-ui

Integrates WebF's Cupertino UI components into JavaScript projects.

Official
Advanced
rock-hurock-hu

android-accessibility

Audit and fix Android accessibility issues in Jetpack Compose apps.

Community
Basic