Flutter — 主要な概念、アーキテクチャ、ウィジェット

Flutterとは

Flutterは、2015年にGoogleが発表したユーザーインターフェース作成のためのSDK（ソフトウェア開発キット）およびフレームワークです。Flutter 1.0の最初の安定版は2018年12月にリリースされました。React Nativeとは異なり、FlutterはJavaScriptとネイティブコードの間のブリッジを使用せず、プロセッサのネイティブ命令に直接コンパイルされます。

Flutterの主な特徴は、独自のレンダリングエンジンです。このフレームワークはUIKit（iOS）やAndroidのViewシステムに依存しません。代わりに、FlutterはSkia（2024年以前）または新しいImpellerエンジンを介して、すべてのピクセルを独立して描画します。これにより、すべてのプラットフォームで一貫した外観が保証され、異なるOSバージョン間での適応問題が解消されます。

Statista 2024によると、Flutterは人気度でクロスプラットフォームフレームワークの中で第1位です。約46%の開発者がモバイル開発にFlutterを使用しています。このフレームワークは、Google Pay、Alibaba、eBay、BMW、Tencentのプロジェクトで使用されています。

Flutterの歴史とバージョン

最初のFlutterのアルファ版は、2015年にDart Developer SummitでSkyという名前で発表されました。2018年にはiOSとAndroidのみをサポートするFlutter 1.0がリリースされました。Flutter 2.0（2021）はWebとDesktopのサポートを追加しました。Flutter 3.0（2022）はmacOSとLinuxの安定したサポートを導入しました。Flutter 3.16（2023）はImpellerを導入しました。MetalとVulkanに基づく新しいレンダリングエンジンです。

Flutter 3.22（2024）は、iOSでデフォルトでImpellerを採用し、Material Design 3のサポートを改善し、マクロ拡張を備えたDart 3.4、およびプラットフォームリソースへの直接アクセスのための組み込みNative Assetsサポートを含んでいます。Googleは、ImpellerがSkiaと比較してフレームのカクつきを90%削減すると報告しています。

Dart言語

Dartは、2011年にGoogleが作成し、Flutterで使用されるプログラミング言語です。Dartは、厳格な型付けとJITコンパイル（Hot Reload用）およびAOTコンパイル（プロダクションビルド用）の機能を組み合わせています。Dart 3.0（2023）は、パターンマッチング、sealed class、recordsを安定した機能として導入しました。

DartのNull safetyは、バージョン2.12から導入された必須機能です。コンパイラはビルド時にすべてのnull許容型をチェックし、実行時のNullPointerExceptionを排除します。データ型（int、String、bool）はデフォルトで非null許容であり、null許容値は?接尾辞を使用します（例：String? name）。

Flutterのアーキテクチャ

Flutterのアーキテクチャは3層構造の原則に基づいて構築されています。最下層はエンジン（C/C++）で、レンダリング、I/O、プラットフォームAPIへのアクセスを担当します。中間層はフレームワーク（Dart）で、ウィジェットシステム、ジェスチャ、アニメーション、ナビゲーションを実装します。最上層はアプリケーション（Dart）で、ウィジェットをツリーに組み立てます。

ウィジェットとウィジェットツリー

Flutterでは、すべてがウィジェットです。ウィジェットには2つのタイプがあります。StatelessWidget（不変、状態を保持しない）とStatefulWidget（可変、Stateを介して状態を管理する）です。ウィジェットツリーは階層構造であり、各子ウィジェットは親の内部にネストされています。Scaffold、AppBar、Container、Text、Column、Row — これらが基本的な構成要素です。

BuildContextは、ツリー内のウィジェットの位置を伝えるオブジェクトです。MediaQuery.of(context)は画面サイズを取得し、Theme.of(context)は現在のテーマを取得します。BuildContextは、ナビゲーション（Navigator.of(context)）、InheritedWidgetへのアクセス、Localizations.ofを介したロケール翻訳に使用されます。

Impellerエンジン

Impellerは、C++で記述され、Metal（iOS/macOS）とVulkan（Android）を使用するFlutterの最新レンダリングエンジンです。毎フレームをゼロから再描画していたSkiaとは異なり、Impellerはシェーダーを事前にコンパイルしてキャッシュに保存します。これにより、複雑なシーンの初回レンダリング時の遅延がなくなり、GPU負荷が軽減されます。

Google Flutterチームのテストによると、Impellerはシェーダーのコンパイル時間を200〜500ミリ秒（Skia）から1〜3ミリ秒に短縮します。iPhone 13 Proでは、Impellerのインパルスレンダリングはフレーム落ちなしで120FPSを達成します。Vulkan対応のAndroidでは、ミッドレンジデバイス（Xiaomi Redmi Note 12）でも安定した60FPSを提供します。

Flutterアプリケーションの例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutterアプリ')),
        body: const Center(
          child: Text('こんにちは、Flutter!'),
        ),
      ),
    );
  }
}