FL

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.zip

Installs 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.
168 chars · catalog descriptionno explicit “when” trigger
Intermediate

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

You give it
Feature requirements and state persistence needs
You get back
Dart classes, widget tree structures, and state management logic

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:

GuideContents
Project Structure & NavigationProject Structure & Navigation
State Management with ProviderState Management with Provider
Screens with Provider IntegrationScreens 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

Flutter SDKdartproviderGoRouter

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.

SkillInstallsUpdatedSafetyDifficulty
flutter-development (this skill)1,5555moNo flagsIntermediate
flutter-expert734moNo flagsAdvanced
flutter134moNo flagsIntermediate
mobile-developer54moNo flagsAdvanced

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry