flutter-mobile-patterns

Applies Flutter and Dart coding patterns for Riverpod, dio, GoRouter, and FCM in mobile apps.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/manhthien2005/PM_REVIEW --skill flutter-mobile-patterns-manhthien2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-mobile-patterns
Source: https://github.com/manhthien2005/PM_REVIEW/tree/main/tooling/.windsurf-template/shared/skills/flutter-mobile-patterns
Command: npx skills add https://github.com/manhthien2005/PM_REVIEW --skill flutter-mobile-patterns-manhthien2005

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter codebases often drift into inconsistent state management, duplicated HTTP clients, unsafe async handling, and inaccessible UI. This Skill enforces a single set of proven patterns for the VSmartwatch HealthGuard mobile app so every feature follows the same architecture. ## Core Features & Use Cases - Riverpod 2 State Management: Guidance for choosing Provider, StateProvider, StateNotifierProvider, FutureProvider, or StreamProvider, with a complete fall-alert countdown notifier example. - Centralized dio HTTP Layer: Singleton dio client with auth, token-refresh, and logging interceptors, accessed only through repository interfaces. - Navigation, FCM, and Elderly UX: GoRouter named routes, push-notification handling (foreground, background, deep links), and WCAG-compliant accessibility rules for elderly users. - Use Case: When adding a new emergency SOS screen, apply the repository pattern, mounted-check async safety, 48dp touch targets, and widget tests exactly as specified. ## Quick Start Apply the flutter-mobile-patterns skill to review or write the new fall alert screen in health_system/lib following Riverpod, dio, and elderly UX conventions.

Frequently Asked Questions about flutter-mobile-patterns

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

FAQPage Schema
How do I choose the right Riverpod provider type in Flutter?▼

Use Provider for computed immutable values, StateProvider for simple primitives, StateNotifierProvider or NotifierProvider for complex state with business logic, FutureProvider for one-shot async loads, and StreamProvider for live updates like telemetry or FCM events.

How to structure dio HTTP calls with a repository pattern in Flutter?▼

Create one dio singleton via a Riverpod Provider with auth, refresh, and logging interceptors, then inject it into repository classes. UI and notifiers must call repository interfaces, never dio directly, keeping the network layer testable and centralized.

Why does my Flutter app crash with setState called after dispose?▼

This happens when code touches BuildContext or state after an await while the widget was unmounted. Add if (!mounted) return after every await, and dispose Timers, StreamSubscriptions, and controllers in dispose before calling super.

Can I navigate from a Firebase Cloud Messaging background handler?▼

No, background handlers cannot navigate because there is no active widget tree. Store the deep link in shared preferences inside the background handler, then read it and route through GoRouter when the app resumes.

What accessibility requirements apply to Flutter apps for elderly users?▼

Use minimum 16sp body text, 48dp touch targets (56dp for emergency UI), 4.5:1 contrast ratio, and Semantics labels on all interactive elements. Place primary actions in the bottom 40 percent of the screen for thumb reachability.