Contents
1. Flutter 3.19 と Dart 3.5 の概要
Flutter 3.19 は UI フレームワークのパフォーマンス改善と、Dart 言語の型システム強化が中心となります。特に 「レコード」 と 「パターンマッチ」 が安定版として提供され、コードの可読性と安全性が大幅に向上しました。また、Skia エンジンの内部最適化により、一般的な UI 描画シナリオで 5 % 前後の FPS 向上が報告されています(公式ベンチマーク参照: https://flutter.dev/docs/perf)。
1.1 新しい言語機能
Dart 3.5 で本格的に使用できる主な構文は次の通りです。どれも 型安全 を保ちつつ記述量を削減することが目的です。
| 機能 | 説明 |
|---|---|
| レコード (Record) | 複数の値をタプル感覚で返すことができ、(int, String) のように型注釈も可能。 |
| パターンマッチ (Pattern Matching) | switch 文や if 文で構造化データを直接分解し、冗長なキャストを書かずに済む。 |
| 強化された Enum | メソッドやプロパティの追加が可能になり、ビジネスロジックと密結合した列挙型を実装できる。 |
公式リファレンス: https://dart.dev/guides/language/records
1.1.1 レコードの基本例
レコードは var (id, name) = getUser(); のように左辺で同時に分解できます。
|
1 2 3 4 5 6 7 |
(int, String) getUser() => (42, 'Alice'); void main() { var (id, name) = getUser(); print('ID: $id, 名前: $name'); } |
この構文は従来の Map やカスタムクラスを使うよりも軽量で、テストコードでも可読性が高まります。
2. プロジェクトへのアップグレード手順
Flutter 3.19 と Dart 3.5 に移行する際は、段階的に変更を加えること が失敗リスク低減の鍵です。以下では推奨フローと必須チェック項目を示します。
2.1 SDK バージョンの統一
まずは開発マシン全体で同一バージョンを使用できるように設定します。
|
1 2 3 4 5 6 |
# Flutter の最新版へ更新(3.19 系がインストールされます) flutter upgrade --force # 現在のバージョン確認 flutter --version |
pubspec.yaml では次のように SDK 範囲を明示してください。
|
1 2 3 4 |
environment: sdk: ">=3.5.0 <4.0.0" flutter: ">=3.19.0" |
2.2 analysis_options.yml の整備
Dart 3.5 の新機能はデフォルトで有効ですが、実験的な最適化フラグ(例: enhanced-enums)を利用したい場合は次のように設定します。
|
1 2 3 4 5 |
# analysis_options.yml analyzer: enable-experiment: - enhanced-enums # Enum にメソッドやプロパティを付与できる実験フラグ |
このファイルはリポジトリのルートに置き、CI パイプラインでも同様に読み込ませておくと、全開発者が統一された lint ルールでコードを書けます。
2.3 テストベースラインの取得
アップグレード前に ユニットテスト・ウィジェットテスト・インテグレーションテスト をすべて実行し、成功率とパフォーマンス指標を記録します。
|
1 2 3 |
flutter test --coverage flutter drive --profile -t test_driver/app.dart |
結果は CI のアーティファクトとして保存し、アップデート後の比較に利用します。
2.4 レコード・パターンマッチへの段階的リファクタリング
既存コードベースで「戻り値が複数ある」箇所を対象に、以下の手順で移行します。
- 検索:
return Tuple...やMap<String, dynamic>など多値返却パターンを抽出。 - 置換:レコード型へ変更し、呼び出し側で分解代入 (
var (a, b) = …) を導入。 - テスト更新:期待値の型が変わるため、テストコードも同様に修正。
この作業はモジュール単位(例: domain/ パッケージ)で行うと、CI の影響範囲を限定でき安全です。
3. パフォーマンス最適化の実践ポイント
Flutter 3.19 は Skia エンジンの内部改良に加え、Dart AOT コンパイラの最適化が進んでいます。ここでは公式ベンチマークと実務で有効なテクニックを紹介します。
3.1 描画フレームレートの測定
DevTools の Performance タブで Rasterizer セクションを確認し、FPS が 60 fps に近いかどうかを評価します。特にリストスクロールやアニメーションが多い画面で、前バージョンと比較して平均 4–6 fps の向上が見られます(公式データ: https://flutter.dev/perf)。
3.2 ビルドサイズと起動時間の削減
| 手法 | 効果 |
|---|---|
--no-pub オプションで依存関係更新を分離 |
CI のキャッシュ再利用率が向上し、ビルド時間が約 10 % 短縮 |
dart compile aot -O2 |
AOT バイナリサイズが 3–4 % 減少し、起動遅延が 20‑30 ms 改善 |
未使用コードの除去 (tree-shake-icons) |
アイコンフォントが削減され、デスクトップアプリで最大 5 MB の軽量化 |
3.3 プロファイルモードでの実測例
|
1 2 |
flutter run --profile -d chrome |
- Layout 時間:前バージョン(3.13)平均 180 ms → 3.19 では約 150 ms
- Rasterizer 時間:平均 12 ms → 約 10 ms
数値はデバイスやアプリ規模に依存しますが、目安として参考にしてください。
4. マルチウィンドウサポートの活用方法
Flutter 3.19 では Desktop(Windows/macOS/Linux) 向けにマルチウィンドウ API が正式に提供されました。window_manager パッケージは公式サンプルで推奨されており、以下の手順で簡単に実装できます。
4.1 必要な依存関係と設定
|
1 2 3 4 |
# pubspec.yaml の追加部分 dependencies: window_manager: ^0.3.2 # Flutter 官方パッケージ |
flutter run 時にマルチウィンドウを有効化するフラグは不要ですが、IDE 側で デバッグオプション を設定すると便利です。
-
VS Code (
launch.json)
json
{
"configurations": [
{
"name": "Flutter (Multi‑Window)",
"request": "launch",
"type": "dart",
"args": ["--enable-multi-window"]
}
]
} -
Android Studio:Run/Debug 設定の「Additional run args」に
--enable-multi-windowを入力。
4.2 基本コード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import 'package:flutter/material.dart'; import 'package:window_manager/window_manager.dart'; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await windowManager.ensureInitialized(); // メインウィンドウのサイズ・位置設定(任意) await windowManager.setSize(const Size(800, 600)); await windowManager.center(); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'マルチウィンドウサンプル', home: Scaffold( appBar: AppBar(title: const Text('メインウィンドウ')), body: Center( child: ElevatedButton( onPressed: _openSubWindow, child: const Text('サブウィンドウを開く'), ), ), ), ); } Future<void> _openSubWindow() async { await windowManager.create( title: 'サブウィンドウ', size: const Size(400, 300), position: const Offset(100, 100), ); } } |
このコードは デスクトップ のみ動作します。モバイルで呼び出すと例外が投げられるため、プラットフォームチェック (kIsWeb, defaultTargetPlatform) を併用してください。
4.3 テスト戦略
マルチウィンドウは UI の状態遷移が複雑になるため、integration_test パッケージで次の項目を検証します。
- サブウィンドウが生成されるか
- フォーカス切替が期待通りに動作するか
- ウィンドウ閉鎖時にリソースリークが起きていないか
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import 'package:integration_test/integration_test.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:my_app/main.dart' as app; void main() { IntegrationTestWidgetsFlutterBinding.ensureInitialized(); testWidgets('サブウィンドウが開くことを確認', (tester) async { app.main(); await tester.pumpAndSettle(); final button = find.text('サブウィンドウを開く'); await tester.tap(button); await tester.pumpAndSettle(const Duration(seconds: 1)); // ウィンドウが2つ存在すれば成功(platform-specific API が必要) }); } |
5. コミュニティパッケージとモジュール化のベストプラクティス
Flutter エコシステムは pub.dev の公式パッケージで成り立っています。3.19 系からは「モジュラーアーキテクチャ」向けに、flutter_modular や riverpod が改良され、依存関係の自動解決がより安定しました。
5.1 推奨パッケージ例
| パッケージ | 用途 | バージョン(2024‑12‑時点) |
|---|---|---|
| riverpod | 状態管理・DI | ^2.4.0 |
| flutter_modular | モジュール分割と遅延ロード | ^6.0.0 |
| window_manager | デスクトップウィンドウ制御 | ^0.3.2 |
| go_router | 宣言的ルーティング(Web/モバイル共通) | ^14.0.0 |
公式ドキュメントとパッケージページのリンクはすべて pub.dev に集約されているため、信頼性が高いです。
5.2 モジュール化導入フロー
- 機能単位でディレクトリを分割(例:
features/auth/,features/home/) - 各モジュールに
pubspec.yamlを作成し、path:依存でローカル参照 flutter_modularのModularRouteを利用して遅延ロード設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// lib/app_module.dart class AppModule extends Module { @override List<Bind> get binds => [ Bind.singleton((i) => AuthRepository()), ]; @override List<ModularRoute> get routes => [ ModuleRoute('/auth', module: AuthModule()), ChildRoute('/', child: (_, __) => const HomePage()), ]; } |
この構成にすると、ビルドサイズの削減 と チーム間の所有権分離 が自然に実現できます。
6. 移行チェックリスト(まとめ)
| 項目 | 実施内容 |
|---|---|
| SDK バージョン統一 | flutter --version で 3.19.x、dart --version で 3.5.x を確認 |
| pubspec.yaml 更新 | SDK 範囲と依存パッケージを最新に設定 |
| analysis_options.yml 整備 | 必要な実験フラグや lint ルールを追加 |
| テストベースライン取得 | すべてのテストを CI で実行し結果保存 |
| レコード・パターンマッチ導入 | 多値返却ロジックを段階的にリファクタリング |
| パフォーマンス測定 | DevTools の Performance タブで FPS と Layout 時間を比較 |
| マルチウィンドウ実装 | window_manager を組み込み、integration_test で検証 |
| モジュール化・パッケージ管理 | flutter_modular + riverpod で機能単位に分割 |
| CI/CD の更新 | flutter pub get, dart analyze, flutter test を全ジョブに組み込む |
上記を順守すれば、安全かつスムーズに Flutter 3.19 と Dart 3.5 の恩恵を受けることができます。不明点は公式フォーラム(https://flutter.dev/community)や Stack Overflow の #flutter タグで質問すると、コミュニティから迅速なフィードバックが得られます。
本記事の情報は 2024 年 12 月時点の公式リソースを基に作成しています。今後のバージョンアップに伴う変更は、随時 Flutter のリリースノートをご確認ください。