ホーム/移动开发/flutter-development
F

flutter-development

by @aj-geddesv
4.8(11)

Flutterフレームワークを使用して美しいクロスプラットフォームモバイルアプリケーションを構築し、効率的な開発と一貫した体験を実現します。

FlutterDart LanguageMobile UI/UXCross-Platform DevelopmentState Management (Flutter)GitHub
インストール方法
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development
compare_arrows

Before / After 効果比較

1
使用前

従来のネイティブアプリ開発はコストが高く、複数プラットフォームへの適応が困難で、開発期間が長いです。UIインターフェースの統一が難しく、ユーザー体験が断片化し、メンテナンスコストも高くなります。

使用後

FlutterとDartを活用することで、単一のコードベースでマルチプラットフォームアプリを構築し、美しく一貫したUIを実現します。開発効率が大幅に向上し、コストを削減し、優れたユーザー体験を提供します。

description SKILL.md


name: flutter-development description: > Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

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

forumユーザーレビュー (0)

レビューを書く

効果
使いやすさ
ドキュメント
互換性

レビューなし

統計データ

インストール数316
評価4.8 / 5.0
バージョン
更新日2026年3月16日
比較事例1 件

ユーザー評価

4.8(11)
5
0%
4
0%
3
0%
2
0%
1
0%

この Skill を評価

0.0

対応プラットフォーム

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

タイムライン

作成2026年3月16日
最終更新2026年3月16日