🎯

moai-lang-flutter

🎯Skill

from modu-ai/moai-rank

VibeIndex|
What it does

Enables advanced Flutter/Dart development with modern cross-platform patterns, Riverpod state management, and comprehensive mobile/desktop app capabilities.

πŸ“¦

Part of

modu-ai/moai-rank(43 items)

moai-lang-flutter

Installation

Install ScriptRun install script
curl -LsSf https://modu-ai.github.io/moai-adk/install.sh | sh
Install ScriptRun install script
curl -LsSf https://astral.sh/uv/install.sh | sh
git cloneClone repository
git clone https://github.com/your-org/moai-rank.git
BunRun with Bun
bun install
BunRun with Bun
bun run db:generate

+ 4 more commands

πŸ“– Extracted from docs: modu-ai/moai-rank
7Installs
-
AddedFeb 4, 2026

Skill Details

SKILL.md

>

Quick Reference (30 seconds)

Flutter/Dart Development Expert - Dart 3.5+, Flutter 3.24+ with modern patterns.

Auto-Triggers: Flutter projects (.dart files, pubspec.yaml), cross-platform apps, widget development

Core Capabilities:

  • Dart 3.5: Patterns, records, sealed classes, extension types
  • Flutter 3.24: Widget tree, Material 3, adaptive layouts
  • Riverpod: State management with code generation
  • go_router: Declarative navigation and deep linking
  • Platform Channels: Native iOS/Android integration
  • Testing: flutter_test, widget_test, integration_test

Implementation Guide (5 minutes)

Dart 3.5 Language Features

Pattern Matching with Sealed Classes: Define a sealed class Result with generic type parameter T. Create subclasses Success containing data field and Failure containing error string. Use switch expressions with pattern matching on the sealed type. Patterns use colon syntax to extract named fields. Add guard clauses with when keyword for conditional matching based on field values.

Records and Destructuring: Define type aliases for records using parentheses with named fields. Create functions returning multiple values as record tuples with positional elements. Use destructuring syntax with parentheses on the left side of assignment. In for loops, destructure named record fields directly using colon syntax.

Extension Types: Define extension types with the type keyword, wrapping a base type in parentheses. Add factory constructors for validation logic. Define getters for computed properties on the underlying value.

Riverpod State Management

Provider Definitions: Import riverpod_annotation and add part directive for generated file. Use @riverpod annotation on functions to create simple providers. Return repository instances reading other providers with ref.read. Create async providers by returning Future types. For stateful providers, create classes extending the generated underscore class, override build method for initial state, and add methods that modify state using AsyncValue.guard.

Widget Integration: Create ConsumerWidget subclasses. In build method, receive WidgetRef as second parameter. Use ref.watch to observe provider values. Handle AsyncValue with when method providing data, loading, and error callbacks. Use ref.invalidate to refresh data. Use ref.listen in StatefulWidget for side effects like showing snackbars.

StatefulWidget with Riverpod: Extend ConsumerStatefulWidget and ConsumerState. Initialize TextEditingController in initState and dispose in dispose. Use ref.listen in build for side effects. Check isLoading state to disable buttons during async operations. Access notifier methods with ref.read and the notifier getter.

go_router Navigation

Router Configuration: Create GoRouter instance with initialLocation. Define routes array with GoRoute objects containing path, name, and builder. Nest child routes in routes array. Use ShellRoute for persistent navigation shells. Create pageBuilder using NoTransitionPage for tab navigation. Implement redirect callback checking authentication state and returning redirect path or null to allow navigation. Define errorBuilder for error handling.

Navigation methods: Use context.go for declarative navigation with path. Use context.canPop to check before context.pop.

Platform Channels

Dart Implementation: Define class with MethodChannel and EventChannel constants using channel name strings. Create async methods that invoke methods on the channel with invokeMethod, catching PlatformException. For streaming data, call receiveBroadcastStream on EventChannel and map events to typed objects. Set up method call handler with setMethodCallHandler to receive calls from native code.

Widget Patterns

Adaptive Layouts: Create StatelessWidget with required parameters for child, destinations, selectedIndex, and onDestinationSelected callback. In build, get width using MediaQuery.sizeOf. Use conditional returns based on width breakpoints. Under 600 pixels, return Scaffold with NavigationBar in bottomNavigationBar. Under 840 pixels, return Scaffold with Row containing NavigationRail and expanded child. Above 840 pixels, return Scaffold with Row containing NavigationDrawer and expanded child.

Testing

Widget Test Example: In test main function, create ProviderContainer with overrides for mock providers. Use tester.pumpWidget with UncontrolledProviderScope wrapping MaterialApp with the widget under test. Assert initial loading state with find.byType. Call tester.pumpAndSettle to wait for async operations. Assert final state with find.text.

For comprehensive testing patterns, see [examples.md](examples.md).

Advanced Patterns

For comprehensive coverage including:

  • Clean Architecture with Riverpod
  • Isolates for compute-heavy operations
  • Custom render objects and painting
  • FFI and platform-specific plugins
  • Performance optimization and profiling

See: [reference.md](reference.md) and [examples.md](examples.md)

Context7 Library Mappings

Flutter/Dart Core:

  • /flutter/flutter - Flutter framework
  • /dart-lang/sdk - Dart SDK

State Management:

  • /rrousselGit/riverpod - Riverpod state management
  • /felangel/bloc - BLoC pattern

Navigation and Storage:

  • /flutter/packages - go_router and official packages
  • /cfug/dio - HTTP client
  • /isar/isar - NoSQL database

Works Well With

  • moai-lang-swift - iOS native integration for platform channels
  • moai-lang-kotlin - Android native integration for platform channels
  • moai-domain-backend - API integration and backend communication
  • moai-quality-security - Mobile security best practices
  • moai-essentials-debug - Flutter debugging and DevTools

More from this repository10

🎯
moai-lang-csharp🎯Skill

Enables comprehensive C# 12 and .NET 8 development with advanced support for ASP.NET Core, Entity Framework, and modern enterprise solutions.

🎯
moai-domain-frontend🎯Skill

Develops modern web UIs with React 19, Next.js 16, Vue 3.5, implementing advanced component architectures and performance optimizations.

🎯
moai-lang-javascript🎯Skill

Develops modern JavaScript projects with comprehensive support for Node.js, Bun, Deno, testing, linting, and backend frameworks across ES2024+ ecosystem.

🎯
moai-tool-ast-grep🎯Skill

Performs AST-based structural code search, security scanning, and refactoring across 40+ programming languages using syntax-aware pattern matching and transformations.

🎯
moai-workflow-testing🎯Skill

Orchestrates comprehensive software testing workflows with DDD testing, performance profiling, code review, and quality assurance across multiple development stages.

🎯
moai-domain-backend🎯Skill

Designs and implements robust backend architectures with comprehensive API development, microservices, authentication, and modern server-side patterns across multiple frameworks.

🎯
moai-lang-typescript🎯Skill

Enables advanced TypeScript development with React 19, Next.js 16, type-safe APIs using tRPC, Zod validation, and modern TypeScript patterns.

🎯
moai-foundation-quality🎯Skill

Enforces enterprise-grade code quality standards through TRUST 5 validation, proactive analysis, and automated best practices across multiple programming languages.

🎯
moai-platform-firestore🎯Skill

Enables seamless Firebase Firestore integration, providing real-time sync, offline caching, security rules, and mobile-first NoSQL database management.

🎯
moai-library-shadcn🎯Skill

Provides expert shadcn/ui component library guidance for React applications with AI-powered design system architecture and Tailwind CSS integration.