mcpField
F
flutter-development

flutter-development

github.com/aj-geddesDevelopment373721 installsUpdated 34w ago
Repository

About flutter-development

A development guide for building mobile apps with Flutter and Dart, covering widget composition, state management, navigation, and API integration.

Key features

  1. 01Widget composition and UI design
  2. 02Provider state management
  3. 03Navigation and project structure
  4. 04Animations and visual effects
  5. 05Responsive cross-platform design

Use cases

  1. 01Building iOS and Android apps
  2. 02Creating custom mobile interfaces
  3. 03Implementing complex animations
  4. 04Rapid iteration with hot reload

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill flutter-development

After installing, type/flutter-developmentin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
project-structure-navigation.md
screens-with-provider-integration.md
state-management-with-provider.md
templates/
component-template.tsx

Details

From the project README

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

Comments

Markdown supported