Flutter

概要

Flutter は、Dart 言語で書かれた単一のコードベースからクロスプラットフォームアプリを構築するための、Google のオープンソース UI ツールキットです。ネイティブウィジェットをラップするアプローチとは異なり、Flutter は独自のレンダリングエンジンですべてのピクセルを自前で描画するため、iOS、Android、Web、デスクトップのいずれでも UI の見た目と挙動がまったく同じになります。Material と Cupertino の充実したウィジェット群が標準で付属します。

強み

単一の Dart コードベースで iOS、Android、Web、デスクトップを一貫した結果でターゲットにできる。
独自のレンダリングエンジンにより、どこでもピクセル単位で同一の UI を実現できる。
ステートフルな Hot Reload により、イテレーションが非常に高速。
充実した洗練されたウィジェットライブラリと強力なツール群。
カスタムでブランド色の強い、アニメーション豊富なインターフェースに最適。

トレードオフ

ほぼ Flutter 専用で使われる言語である Dart を学ぶ必要がある。
エンジンがアプリに同梱されるため、アプリのバイナリサイズが大きくなる。
ウィジェットを自前で描画するため、プラットフォームネイティブな見た目や操作感の更新が遅れることがある。
深いプラットフォーム統合には、プラグイン経由で依然としてネイティブ（Swift/Kotlin）コードが必要になる。

使いどころ

多くのプラットフォームにわたって、単一のチームで高度に洗練され視覚的に一貫したアプリを出荷したいときに Flutter を選びましょう。特に、各 OS のネイティブウィジェットを正確に再現することよりも、カスタムデザインと滑らかなアニメーションが重要な場合に適しています。

バイブコーディングとの相性

Flutter は AI アシスタントとの相性が良好です。すべてが明確なツリー状に構成されるウィジェットであり、Hot Reload によって生成された UI を数秒で検証できるからです。ツリーを小さく焦点を絞ったウィジェットに分割すること、状態管理を明示的に保つこと（たとえば単一の状態クラスや定番のパッケージを使う）、パフォーマンスのために const コンストラクタを優先することをモデルに指示しましょう。フレームワークが自己完結しているため、生成されたコードが壊れやすいネイティブのセットアップに依存することはほとんどありません。

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) => Column(children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('Add'),
        ),
      ]);
}