Flutter

Flutterとは

Flutter は、[[Dart]] で書いた1つのコードから iOS・Android・Web・デスクトップ向けのアプリをビルドする UI フレームワークです。他のクロスプラットフォーム手法との決定的な違いは、OS標準の部品を呼ばず、Flutter 自身が画面を描くことです。

方式画面の作り方代表
OS標準部品を呼ぶOSのボタン・リストをコードから操作するReact Native
WebViewを使うHTML/CSSをアプリ内のブラウザで表示するCordova系
自前で描画するキャンバスに直接ピクセルを描くFlutter

自前で描くため、どのOSでも同じ見た目になります。OS更新で標準部品の見た目が変わっても影響を受けません。裏返すと、OSらしさは自動では手に入らず、必要なら自分で寄せます(iOS風の部品群も用意されています)。

すべてがウィジェット

画面はウィジェットという部品の入れ子で組み立てます。ボタンやテキストだけでなく、余白・中央寄せ・スクロールといったレイアウトの指定もウィジェットです。

Center(
  child: Column(
    children: [
      Text('残り3件'),
      Padding(
        padding: EdgeInsets.all(8),
        child: ElevatedButton(onPressed: _reload, child: Text('更新')),
      ),
    ],
  ),
)

CSSのようにスタイルを外から当てるのではなく、包むウィジェットを足して見た目を変えるのがFlutterの書き味です。入れ子が深くなりやすいので、意味のある単位で自作ウィジェットへ切り出していきます。

状態と再構築

ウィジェットは状態が変わるたびに作り直される前提で設計されています。値を書き換えて再構築を要求すると、Flutter が前回との差分を計算して描画を更新します。

setState(() { _count++; });   // 状態を更新し、再構築を要求する

宣言的UIという点は [[React]] と同じ考え方です。規模が大きくなると setState だけでは画面をまたぐ値の共有が苦しくなり、[[状態管理]] の仕組み(Riverpod・Provider・Bloc など)を導入します。どれを選ぶかは早めに決めるほうがよく、後から入れ替えると画面のコードに広く手が入ります。

OS固有機能との橋渡し

カメラ・生体認証・課金など、Flutterだけでは届かない機能はプラットフォームチャネル経由でネイティブ側を呼びます。Android は [[Kotlin]]、iOS は [[Swift]] のコードが対応します。多くは公開パッケージが吸収してくれますが、新しいOS機能や独自SDKは自分で橋渡しを書くことになります。

初学者向けポイント

  • 画面サイズごとの出し分けは Flutter 側の仕組み(LayoutBuilder・MediaQuery)で書きますが、考え方は [[レスポンシブデザイン]] と共通です
  • ホットリロードで変更が即座に反映されます。ただし状態は保持されたままなので、初期化まわりを直したときはホットリスタートで確認します
  • Web向けビルドは同じコードで出せますが、文字列の選択やSEOはWebサイトとしては弱いです。コンテンツを検索させたいならWeb版は別に用意する判断もあります
  • パッケージの対応OSは個別に確認します。「Flutter対応」と書かれていてもデスクトップは未対応、ということがあります

関連技術とのつながり

  • [[Dart]] — Flutter の記述言語。実用上の用途はほぼ Flutter に集中している
  • [[状態管理]] — 画面をまたぐ値の共有。規模が大きくなると必須になる
  • [[Kotlin]] — Android 固有機能の橋渡しを担当する
  • [[Swift]] — iOS 固有機能の橋渡しを担当する
  • [[レスポンシブデザイン]] — 画面サイズごとの出し分けは考え方が共通
  • [[React]] — 状態が変われば再構築するという宣言的UIの発想が同じ
Q: Flutterが「どのOSでも同じ見た目」になる理由はどれ?
- [ ] OS標準の部品を統一した設定で呼んでいるから
- [x] OS標準の部品を使わず、Flutter自身が画面を描画しているから
- [ ] WebViewでHTMLを表示しているから
解説: 描画を自前で行うため、OSや版による部品の差の影響を受けません。代わりにOSらしさは自動では得られません。

Q: Flutterで余白や中央寄せを指定する方法はどれ?
- [ ] CSSファイルにスタイルを書く
- [x] `Padding` や `Center` などのウィジェットで包む
- [ ] 画面ごとに座標を数値で指定する
解説: レイアウトもウィジェットです。包むウィジェットを足して見た目を作るのがFlutterの書き味です。

Q: Flutterからカメラなどのネイティブ機能を使うとき、Android側で対応する言語はどれ?
- [x] Kotlin
- [ ] Swift
- [ ] Dart
解説: プラットフォームチャネル経由でネイティブ側を呼びます。AndroidはKotlin、iOSはSwiftが対応します。