flutter-development
Assists with Flutter widget composition, state management, and navigation for native-performance mobile apps.
Install
mkdir -p .claude/skills/flutter-development && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/242" && unzip -o skill.zip -d .claude/skills/flutter-development && rm skill.zipInstalls to .claude/skills/flutter-development
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.Key capabilities
- →Implements navigation via GoRouter
- →Configures Provider-based state management
- →Constructs layouts using Flutter widget hierarchy
- →Integrates REST APIs using http package
- →Executes lifecycle resource disposal
How it works
It applies standardized boilerplate patterns and structural references to generate production-grade UI components and state logic.
Inputs & outputs
When to use flutter-development
- →Implementing navigation in mobile apps
- →Setting up state management
- →Building custom widget components
- →Integrating REST APIs
- →Optimizing UI across platforms
About this skill
Flutter Development
Table of Contents
Overview
Create high-performance, visually stunning mobile applications using Flutter with Dart language. Master widget composition, state management patterns, navigation, and API integration.
When to Use
- Building iOS and Android apps with native performance
- Designing custom UIs with Flutter's widget system
- Implementing complex animations and visual effects
- Rapid app development with hot reload
- Creating consistent UX across platforms
Quick Start
Minimal working example:
// pubspec.yaml
name: my_flutter_app
version: 1.0.0
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
http: ^1.1.0
go_router: ^12.0.0
// main.dart with GoRouter navigation
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Project Structure & Navigation | Project Structure & Navigation |
| State Management with Provider | State Management with Provider |
| Screens with Provider Integration | Screens with Provider Integration |
Best Practices
✅ DO
- Use widgets for every UI element
- Implement proper state management
- Use const constructors where possible
- Dispose resources in state lifecycle
- Test on multiple device sizes
- Use meaningful widget names
- Implement error handling
- Use responsive design patterns
- Test on both iOS and Android
- Document custom widgets
❌ DON'T
- Build entire screens in build() method
- Use setState for complex state logic
- Make network calls in build()
- Ignore platform differences
- Create overly nested widget trees
- Hardcode strings
- Ignore performance warnings
- Skip testing
- Forget to handle edge cases
- Deploy without thorough testing
When not to use it
- →When building non-mobile/desktop UI projects
- →When state management requirements are strictly limited to simple local variables
Prerequisites
Limitations
- →Requires manual integration of generated code into existing pubspec.yaml
- →Testing requires hardware or emulator environments
How it compares
It provides architecture-specific code patterns instead of basic widget examples.
Compared to similar skills
flutter-development side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| flutter-development (this skill) | 1,555 | 5mo | No flags | Intermediate |
| flutter-expert | 73 | 4mo | No flags | Advanced |
| flutter | 13 | 4mo | No flags | Intermediate |
| mobile-developer | 5 | 4mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by aj-geddes
View all by aj-geddes →You might also like
flutter-expert
sickn33
Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
flutter
alinaqi
Flutter development with Riverpod state management, Freezed, go_router, and mocktail testing
mobile-developer
sickn33
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
stac-quickstart
StacDev
Help initialize and validate a Stac-enabled Flutter project and ship a first server-driven screen. Use when users ask to set up Stac CLI, run stac init/build/deploy, verify project prerequisites, or troubleshoot first-run setup and missing configuration files.
webf-native-plugins
openwebf
Install WebF native plugins to access platform capabilities like sharing, payment, camera, geolocation, and more. Use when building features that require native device APIs beyond standard web APIs.
mobile_engineer
Sorravit
Act as a Senior Mobile Engineer. Use when user asks about React Native, Flutter, iOS, Android development, or mobile architecture.