はじめに
Flutterは、Googleが提供するオープンソースのUIフレームワークで、単一のコードベースからiOSとAndroid向けの美しいネイティブアプリを作成できることで人気を博しています。2017年のリリース以来、Flutterは急速に成長し、モバイルアプリケーション開発の分野で強力な存在感を示しています。
この記事では、2024年のFlutterロードマップを詳しく解説し、Flutterの未来に対する展望と注目すべきポイントを紹介します。最新の動向を把握し、Flutter開発におけるトレンドを先取りしましょう。このロードマップは、FlutterコミュニティとGoogleの開発チームが今後の取り組みを共有し、開発者が計画を立てる際の参考になるよう設計されています。
目次
- はじめに
- Flutterロードマップの概要
- コアフレームワークとエンジンの改良
- モバイルプラットフォーム（Android & iOS）
- ウェブプラットフォーム
- デスクトッププラットフォーム
- エコシステムとツール
- プログラミング言語 Dart の進化
- まとめ
Flutterロードマップの概要
2024年のFlutterロードマップは、FlutterとDartの主要な貢献者が今年取り組む予定の重要なプロジェクトを示しています。Flutterチームは、ユーザーのフィードバックや市場の新たな機会に基づいて、常にフレームワークを進化させています。このロードマップは、高品質と高パフォーマンスを維持しながら、新機能の追加や既存機能の改善を目指しています。
Flutterのロードマップはオープンソースプロジェクトの特性上、コミュニティからの貢献とフィードバックに大きく依存しています。GitHubのイシューやユーザーアンケートを通じて収集されたフィードバックを基に、開発の優先順位を決定しています。ロードマップは必ずしもすべての作業が完了することを約束するものではなく、むしろ方向性を示すものであることを理解しておくことが重要です。
コアフレームワークとエンジンの改良
Impellerの強化
2024年には、iOSでのSkiaバックエンドを完全に削除し、Impellerへの移行を完了する予定です。Impellerは、Flutterの描画エンジンとして、より高速で効率的なパフォーマンスを提供します。これにより、アプリケーションのレンダリング速度が向上し、ユーザーエクスペリエンスが大幅に改善されます。Androidでは、VulkanとOpenGLESのサポートを進めると同時に、短期的にはSkiaへのオプトアウトオプションも提供します。これにより、開発者は柔軟に描画エンジンを選択できるようになります。
以下は、Impellerを利用して簡単な描画を行うDartのサンプルコードです。このコードは、キャンバスに円を描画する基本的な例です。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Impeller Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Impeller Demo'),
),
body: CustomPaint(
painter: MyPainter(),
child: Center(
child: Text(
'Impeller Rendering',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// 描画の開始
final paint = Paint()
..color = Colors.blue
..style = PaintingStyle.fill;
// 四角形を描画
canvas.drawRect(Rect.fromLTWH(50, 50, 200, 200), paint);
// 線のスタイルを変更
paint
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 4;
// 円を描画
canvas.drawCircle(Offset(200, 200), 100, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
Material 3の完全サポート
コアフレームワークにおいて、Material 3の完全サポートを目指して作業を進めます。Material 3は、Googleが提供する最新のデザインシステムであり、より一貫性のある美しいデザインを実現します。特に、Appleデバイスのデザイン期待に応えるために、アプリバーやタブバーの適応を検討します。これにより、iOSユーザーに対しても直感的で使いやすいUIを提供できます。
また、Flutterチームは、Material 3の導入に伴うデザインガイドラインの更新や、新しいウィジェットの追加を計画しています。これにより、開発者は最新のデザイントレンドに対応したアプリを容易に開発できるようになります。
モバイルプラットフォーム
複数ビューのサポート
2023年に開始された複数Flutterビューのサポートを2024年にはAndroidとiOSに拡張します。これにより、開発者は一つのアプリケーション内で複数のFlutterインスタンスを動作させることが可能となり、より高度なユーザーインターフェースを実現できます。また、プラットフォームビューのパフォーマンスとテストカバレッジの向上を目指します。これにより、アプリケーションの安定性と信頼性が向上し、ユーザーエクスペリエンスがさらに向上します。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Flutter Views Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Multiple Flutter Views Example'),
),
body: Column(
children: <Widget>[
// Flutterで描画されるビュー
Expanded(
child: FlutterView(),
),
// ネイティブビュー
Expanded(
child: NativeView(),
),
],
),
);
}
}
// Flutterのビューを定義するクラス
class FlutterView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.amber,
child: Center(
child: Text(
'Flutter View',
style: TextStyle(fontSize: 24),
),
),
);
}
}
// ネイティブビューを定義するクラス
class NativeView extends StatelessWidget {
@override
Widget build(BuildContext context) {
// プラットフォームビューのタイプを定義
const String viewType = '<platform-view-type>';
// プラットフォームビューの作成パラメータ
const Map<String, dynamic> creationParams = <String, dynamic>{};
return PlatformViewLink(
viewType: viewType,
surfaceFactory: (BuildContext context, PlatformViewController controller) {
return AndroidViewSurface(
controller: controller,
gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
hitTestBehavior: PlatformViewHitTestBehavior.opaque,
);
},
onCreatePlatformView: (PlatformViewCreationParams params) {
return PlatformViewsService.initSurfaceAndroidView(
id: params.id,
viewType: viewType,
layoutDirection: TextDirection.ltr,
creationParams: creationParams,
creationParamsCodec: StandardMessageCodec(),
)
..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
..create();
},
);
}
}
最新のApple標準のサポート
Flutterチームは、プライバシーマニフェストやSwift Package Managerなど、最新のApple標準をサポートします。これにより、開発者は最新のiOS機能を活用したアプリケーションを開発できるようになります。例えば、プライバシーマニフェストのサポートにより、ユーザーのプライバシーを保護しながら、アプリケーションの信頼性を向上させることができます。
さらに、Androidでは、今後のリリースに向けて必要なサポートを検討します。特に、新しいAndroidバージョンに対応した機能の追加や、Kotlinのサポート強化が期待されます。これにより、Android開発者にとっても、Flutterはますます魅力的なフレームワークとなるでしょう。
ネイティブコードとのインターフェース
DartからObjective Cコードを直接呼び出すサポートを完成させ、Swiftコードの呼び出しも検討します。これにより、iOS開発者は、Dartから直接ネイティブコードを操作できるようになり、アプリケーションのパフォーマンスと機能性が向上します。同様に、AndroidではJavaとKotlinのサポートを強化します。これにより、Android開発者もネイティブコードとのインターフェースが容易になり、より柔軟なアプリケーション開発が可能となります。
さらに、Flutterチームは、ネイティブAPIの呼び出しや、プラットフォーム固有の機能へのアクセスを改善するためのツールとライブラリの提供を計画しています。これにより、開発者は、より多機能でパフォーマンスの高いアプリケーションを構築できるようになります。
以下に、DartからObjective CまたはSwiftコードを呼び出す方法のサンプルコードを示します。
Objective-Cのセットアップ
#import "NativeBridge.h"
#import <Flutter/Flutter.h>
@implementation NativeBridge
// Objective-Cメソッドの実装
- (void)sayHello {
NSLog(@"Hello from Objective-C");
}
@end
#import <Foundation/Foundation.h>
@interface NativeBridge : NSObject
- (void)sayHello;
@end
Swiftのセットアップ
import Foundation
@objc class NativeBridge: NSObject {
@objc func sayHello() {
print("Hello from Swift")
}
}
FlutterプロジェクトでDartコードからネイティブコードを呼び出す
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static const platform = MethodChannel('com.example.native');
Future<void> _sayHello() async {
try {
await platform.invokeMethod('sayHello');
} on PlatformException catch (e) {
print("Failed to invoke: '${e.message}'.");
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Native Code Invocation'),
),
body: Center(
child: ElevatedButton(
onPressed: _sayHello,
child: Text('Say Hello'),
),
),
),
);
}
}
iOSネイティブコードでメソッドチャンネルのセットアップ
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#include "NativeBridge.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GeneratedPluginRegistrant registerWithRegistry:self];
FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
FlutterMethodChannel* channel = [FlutterMethodChannel
methodChannelWithName:@"com.example.native"
binaryMessenger:controller.binaryMessenger];
NativeBridge* nativeBridge = [[NativeBridge alloc] init];
[channel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
if ([@"sayHello" isEqualToString:call.method]) {
[nativeBridge sayHello];
result(nil);
} else {
result(FlutterMethodNotImplemented);
}
}];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
import UIKit
import Flutter
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
let controller = window?.rootViewController as! FlutterViewController
let channel = FlutterMethodChannel(name: "com.example.native",
binaryMessenger: controller.binaryMessenger)
let nativeBridge = NativeBridge()
channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
if call.method == "sayHello" {
nativeBridge.sayHello()
result(nil)
} else {
result(FlutterMethodNotImplemented)
}
}
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
ウェブプラットフォーム
パフォーマンスと品質の向上
ウェブプラットフォームにおいては、アプリケーションサイズの削減、マルチスレッディングの活用、プラットフォームビューのサポート、アプリロード時間の改善など、パフォーマンスと品質に重点を置きます。これにより、ウェブアプリケーションのユーザーエクスペリエンスが大幅に向上し、よりスムーズで高速な操作が可能となります。
Flutterチームは、CanvasKitをデフォルトレンダラーとして採用し、テキスト入力の改善やSEO対応の検討など、多岐にわたる改善を進めています。また、ウェブ上でのホットリロードサポートの再開発にも取り組みます。これにより、開発者はコードの変更を即座に確認できるようになり、開発効率が飛躍的に向上します。
WasmGCのサポート
DartをWasmGCにコンパイルし、Flutter WebアプリのWasmコンパイルをサポートします。これにより、WebAssemblyを活用した高性能なウェブアプリケーションの開発が可能となります。また、JSとWasmコンパイルのための新しいJSインターフェースメカニズムも導入します。これにより、DartとJavaScriptの間の相互運用性が向上し、より柔軟なアプリケーション開発が可能となります。
さらに、Flutterチームは、WasmGCの導入に伴うパフォーマンス向上やメモリ管理の最適化を進めており、これによりウェブアプリケーションの効率が大幅に向上します。これらの改良により、Flutter Webはさらに強力で使いやすいプラットフォームとなるでしょう。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter CanvasKit Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter CanvasKit Example'),
),
body: CustomPaint(
size: Size.infinite,
painter: MyPainter(),
),
);
}
}
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// Create a paint object with desired properties
final paint = Paint()
..color = Colors.blue
..strokeWidth = 4.0;
// Draw a simple line
canvas.drawLine(Offset(0, 0), Offset(size.width, size.height), paint);
// Draw a rectangle
paint.color = Colors.red;
canvas.drawRect(Rect.fromLTWH(50, 50, 100, 100), paint);
// Draw a circle
paint.color = Colors.green;
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
CanvasKitを使用したFlutter Webのセットアップ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flutter CanvasKit Example</title>
<base href="/">
<meta name="description" content="A new Flutter project.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<script src="https://unpkg.com/canvaskit-wasm/bin/canvaskit.js"></script>
<script>
window.flutterWebRenderer = "canvaskit"; // CanvasKitを有効にする設定
</script>
</head>
<body>
<script src="main.dart.js"></script>
</body>
</html>
デスクトッププラットフォーム
プラットフォームビューのサポート
macOSとWindowsでのプラットフォームビューのサポートを進め、WebViewなどのサポートを実現します。これにより、デスクトップアプリケーションにおいても、ネイティブのウェブコンテンツ表示や他のプラットフォーム固有のビューを統合することが可能となります。Linuxでは、GTK4のサポートとアクセシビリティの向上に注力します。これにより、Linuxユーザーに対しても、使いやすく高性能なアプリケーションを提供できます。
マルチウィンドウサポート
すべてのプラットフォームで、1つのDartアイソレートから複数のウィンドウをレンダリングするサポートに向けた作業を続けます。これにより、開発者はデスクトップアプリケーションで複数のウィンドウを効果的に管理できるようになり、より複雑で機能豊富なアプリケーションを構築できます。この取り組みは、特にビジネスアプリケーションやプロダクティビティツールの開発において重要な意味を持ちます。
さらに、Flutterチームは、デスクトッププラットフォームにおけるパフォーマンスの最適化や、ネイティブ機能へのアクセス改善を目指して、さまざまなツールやライブラリの開発を進めています。これにより、デスクトップアプリケーションの開発がより効率的かつ効果的になるでしょう。
import 'package:flutter/material.dart';
import 'dart:io'; // デスクトップアプリのためにdart:ioをインポートします
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Multi-Window Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainWindow(),
);
}
}
class MainWindow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Window'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 新しいウィンドウを開くボタンを押したときの動作
_openNewWindow();
},
child: Text('Open New Window'),
),
),
);
}
void _openNewWindow() async {
// デスクトッププラットフォーム上でのみ動作
if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
// 新しいプロセスでflutter runを呼び出して新しいウィンドウを作成
Process.run('flutter', ['run', '-d', 'windows'], workingDirectory: '.');
}
}
}
エコシステムとツール
AIとの連携
Flutterチームは、AIフレームワークと協力し、AI対応のFlutterアプリをサポートします。これにより、開発者は機械学習や人工知能を活用したアプリケーションを容易に構築できるようになります。例えば、画像認識、音声認識、自然言語処理などのAI技術を活用した機能をFlutterアプリに統合することが可能となります。
AIの活用により、Flutterアプリはより高度でインテリジェントな機能を提供できるようになり、ユーザーエクスペリエンスが大幅に向上します。Flutterチームは、AIフレームワークとの統合を進めるためのツールやライブラリの提供を計画しており、これにより開発者はAI技術を効果的に活用できるようになります。
import 'package:flutter/material.dart';
import 'package:tflite/tflite.dart'; // TensorFlow Liteパッケージをインポート
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ImageClassifier(),
);
}
}
class ImageClassifier extends StatefulWidget {
@override
_ImageClassifierState createState() => _ImageClassifierState();
}
class _ImageClassifierState extends State<ImageClassifier> {
String _result = 'No image selected';
@override
void initState() {
super.initState();
// TensorFlow Liteモデルをロード
loadModel();
}
Future<void> loadModel() async {
String res = await Tflite.loadModel(
model: "assets/model.tflite", // モデルファイルのパス
labels: "assets/labels.txt", // ラベルファイルのパス
);
print(res);
}
Future<void> classifyImage() async {
// サンプル画像の分類
var recognitions = await Tflite.runModelOnImage(
path: "assets/sample.jpg", // 画像ファイルのパス
numResults: 5, // 結果の数
threshold: 0.5, // 信頼度の閾値
imageMean: 127.5, // 画像正規化のための平均
imageStd: 127.5, // 画像正規化のための標準偏差
);
setState(() {
_result = recognitions != null ? recognitions.toString() : 'Error in classification';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Classifier'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_result),
SizedBox(height: 20),
ElevatedButton(
onPressed: classifyImage,
child: Text('Classify Image'),
),
],
),
),
);
}
@override
void dispose() {
// アプリが破棄される際にモデルを解放
Tflite.close();
super.dispose();
}
}
既存プラグインの品質向上
Flutterチームは、新しいプラグインの拡充よりも、既存プラグインの品質向上とコア機能のギャップ解消に注力します。これにより、既存のFlutterアプリケーションがより安定し、信頼性が向上します。例えば、人気のあるプラグインのバグ修正や、パフォーマンスの最適化が進められます。
Flutterのプラグインエコシステムは、開発者にとって非常に重要な要素であり、品質の高いプラグインはアプリケーション開発の効率を大幅に向上させます。Flutterチームは、プラグインの品質向上に向けた取り組みを続けることで、開発者コミュニティに対して高い価値を提供し続けます。
カジュアルゲームのサポート
Flutterでのカジュアルゲーム開発をサポートするため、Flameコミュニティと共同で作業します。Flameは、Flutterでゲームを開発するためのフレームワークであり、高いパフォーマンスと柔軟性を提供します。これにより、ゲーム開発者はFlutterを使用して迅速に高品質なカジュアルゲームを開発できるようになります。
Flutterチームは、Flameとの連携を強化し、ゲーム開発に必要なツールやライブラリの提供を計画しています。これにより、Flutterを使用したゲーム開発がますます容易になり、開発者は多様なゲームを迅速に市場に投入することができます。
プログラミング言語 Dart の進化
マクロのサポート
Dartチームは、マクロサポートの可能性を評価し、2024年にその第一段階を導入するか、あるいは構造的な問題が見つかった場合にはその取り組みを中止します。マクロは、コードの生成や変換を簡単に行うための機能であり、シリアライゼーション/デシリアライゼーション、データクラス、一般的な拡張性など、多くのユースケースで役立ちます。
マクロの導入により、開発者はより効率的にコードを記述でき、複雑なロジックをシンプルに実装することが可能となります。Dartチームは、マクロのサポートを通じて、Dartの柔軟性と拡張性をさらに高めることを目指しています。
// マクロを定義するためのimport文
import 'package:macro_annotations/macro_annotations.dart';
// データクラスを自動生成するためのマクロ
@DataClass()
class User {
final String name;
final int age;
// コンストラクタ
User(this.name, this.age);
}
// 上記の定義により、自動生成されたコード
// この部分はマクロによって生成されます
class User {
final String name;
final int age;
User(this.name, this.age);
// データクラスに必要なtoStringメソッド
@override
String toString() => 'User(name: $name, age: $age)';
// データクラスに必要な==演算子とhashCode
@override
bool operator ==(Object other) =>
identical(this, other) ||
other is User &&
runtimeType == other.runtimeType &&
name == other.name &&
age == other.age;
@override
int get hashCode => name.hashCode ^ age.hashCode;
}
言語機能の改善
Dart言語の機能改善にも注力しています。特に、冗長性を減らすための構文変更（例えば、プライマリコンストラクタとインポート構文の省略）や、静的にチェックされたバリアンスのサポートを検討しています。これにより、開発者はより簡潔で直感的なコードを書けるようになります。
また、新しい言語機能の導入により、Dartの開発体験が向上し、より多くの開発者がDartを選択する理由となります。Dartチームは、開発者コミュニティからのフィードバックを元に、言語の進化を続けています。
Dartの再利用性向上
さまざまな場所でのDartビジネスロジックの再利用性を高め、DevToolsやAnalyzerのプラグイン機能を強化します。これにより、Dartコードの一貫性と再利用性が向上し、開発効率が大幅に改善されます。
Dartチームは、再利用可能なビジネスロジックの構築を支援するためのツールやライブラリの提供を計画しています。これにより、開発者はDartを使用して、より迅速に高品質なアプリケーションを開発できるようになります。
まとめ
2024年のFlutterロードマップは、品質とパフォーマンスの向上、新しいプラットフォームのサポート、ネイティブコードとのインターフェース改善など、多岐にわたる重要な取り組みを含んでいます。これらの進展により、Flutterはさらに多くの開発者にとって魅力的なフレームワークとなるでしょう。
Flutterに興味があるエンジニアは、このロードマップを参考にし、Flutterの未来の可能性を探ることで、より効果的なアプリケーション開発に役立ててください。この記事が役に立ったと思ったら、いいねやストックをお願いします！