flutter

このスキルを使用する場面

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Flutter を使用して、クロスプラットフォームのモバイル、Web、デスクトップアプリケーションを構築する
• Flutter ウィジェット（StatelessWidget、StatefulWidget）を作成して組み合わせる
• 状態管理（setState、Provider、Riverpod、Bloc）を実装する
• Flutter アプリのナビゲーションとルーティングを設定する
• テーマ、アセット、プラットフォーム固有の設定を構成する
• プラットフォームチャネルを使用してネイティブ連携を行う
• Flutter アプリのパフォーマンスを最適化する（const ウィジェット、キー、ビルドメソッド）
• Flutter アプリのデバッグとホットリロードを行う

このスキルの使い方

ワークフロー

1. 依頼の分野を特定します（ウィジェットの作成、状態管理、ナビゲーション、プラットフォーム連携など）
2. 公式ガイドラインに従って Flutter/Dart のベストプラクティスを適用します
3. Flutter ウィジェットの規約に従って Dart コードを生成します
4. ウィジェットツリーが正しく、状態管理のスコープが適切であることを 確認します

1. プロジェクトのセットアップ

# Create a new Flutter project
flutter create my_app --org com.example --platforms android,ios

# Run the app with hot reload
flutter run

2. StatelessWidget の例

import 'package:flutter/material.dart';

class UserCard extends StatelessWidget {
  final String name;
  final String email;

  const UserCard({super.key, required this.name, required this.email});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: const Icon(Icons.person),
        title: Text(name),
        subtitle: Text(email),
      ),
    );
  }
}

3. 状態管理を使用した StatefulWidget

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() => _count++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Count: $_count', style: Theme.of(context).textTheme.headlineMedium)),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. ナビゲーション

// Named routes
MaterialApp(
  routes: {
    '/': (context) => const HomePage(),
    '/details': (context) => const DetailsPage(),
  },
);

// Programmatic navigation
Navigator.pushNamed(context, '/details');

ベストプラクティス

• 再ビルドを最適化するため、可能な限り const コンストラクターを使用します
• 大きなウィジェットは、小さく再利用可能なコンポーネントに分割します
• リスト項目には Key を使用し、正しく照合されるようにします
• 一貫した状態管理の方法を選択します（ほとんどのアプリでは Provider/Riverpod）
• Android と iOS の両方でテストし、プラットフォームの違いを明示的に処理します
• Flutter のパフォーマンスに関するベストプラクティスに従います（build() 内でコストの高い処理を避けます）

リソース

• 公式ドキュメント：https://docs.flutter.dev/
• ウィジェットカタログ：https://docs.flutter.dev/ui/widgets
• Pub.dev パッケージ：https://pub.dev/

キーワード

flutter、Dart、クロスプラットフォーム、Widget、StatelessWidget、StatefulWidget、Provider、Riverpod、ナビゲーション、ホットリロード、モバイル開発、Material Design、Cupertino