AI导哈

移动开发

flutter-improving-accessibility

flutter/agent-plugins

Configures a Flutter app to support assistive technologies like Screen Readers. Use when ensuring an application is usable for people with disabilities.

  • 8359 次安装
  • 3100 星标
  • 收录于

安装命令

npx skills add https://github.com/flutter/agent-plugins --skill flutter-improving-accessibility

SKILL.md

Implementing Flutter Accessibility

Contents

UI Design and Styling

Design layouts to accommodate dynamic scaling and high visibility. Flutter automatically calculates font sizes based on OS-level accessibility settings.

  • Font Scaling: Ensure layouts provide sufficient room to render all contents when font sizes are increased to their maximum OS settings. Avoid hardcoding fixed heights on text containers.
  • Color Contrast: Maintain a contrast ratio of at least 4.5:1 for small text and 3.0:1 for large text (18pt+ regular or 14pt+ bold) to meet W3C standards.
  • Tap Targets: Enforce a minimum tap target size of 48x48 logical pixels to accommodate users with limited dexterity.

Accessibility Widgets

Utilize Flutter's catalog of accessibility widgets to manipulate the semantics tree exposed to assistive technologies (like TalkBack or VoiceOver).

Implementing Flutter Accessibility

Contents

UI Design and Styling

Design layouts to accommodate dynamic scaling and high visibility. Flutter automatically calculates font sizes based on OS-level accessibility settings.

  • Font Scaling: Ensure layouts provide sufficient room to render all contents when font sizes are increased to their maximum OS settings. Avoid hardcoding fixed heights on text containers.
  • Color Contrast: Maintain a contrast ratio of at least 4.5:1 for small text and 3.0:1 for large text (18pt+ regular or 14pt+ bold) to meet W3C standards.
  • Tap Targets: Enforce a minimum tap target size of 48x48 logical pixels to accommodate users with limited dexterity.

Accessibility Widgets

Utilize Flutter's catalog of accessibility widgets to manipulate the semantics tree exposed to assistive technologies (like TalkBack or VoiceOver).

相关 Skills

flutter-apply-architecture-best-practicesflutter/agent-pluginsArchitects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.移动开发4.4万flutter-build-responsive-layoutflutter/agent-pluginsUse `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.移动开发4.3万flutter-fix-layout-issuesflutter/agent-pluginsFixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.移动开发4.1万flutter-add-widget-testflutter/agent-pluginsImplement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.测试与安全4万flutter-add-integration-testflutter/agent-pluginsConfigures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.测试与安全3.9万flutter-setup-declarative-routingflutter/agent-pluginsConfigure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser history support.移动开发3.8万