SI企業が知っておくべきFlutterの技術的制約と導入リスク

益子 竜与志
益子 竜与志
XThreads
最終更新日:2026年04月07日公開日:2026年04月07日

クロスプラットフォーム開発の有力候補として注目されるFlutterですが、SI企業が採用する際には見落とせない技術的・仕様上の制約があります。デザインシステムの差異、PlatformChannelの複雑さ、Flutter WebのSEO・CORS問題など、実際のGitHub issueを交えながら現場視点で解説します。

FlutterがSI案件で選ばれる背景と見落とされがちな前提

近年、モバイルアプリ開発においてFlutterを採用する案件が増えています。iOS・Android両プラットフォームに対応したアプリを単一のコードベースで開発できること、高品質なUIを素早くプロトタイピングできること、そしてGoogleによる継続的なサポートが評価されています。SI企業においても、顧客からの「コストを抑えて両OSに対応したい」という要望に応える手段として提案される機会が増えています。

しかし、Flutterを採用する際には事前に把握しておくべき技術的制約がいくつか存在します。これらを見落としたまま開発を進めると、後工程での手戻りや予期しない追加コストにつながるリスクがあります。本記事では、SI企業のエンジニア・PMが特に注意すべき制約を、実際のGitHubのissueを引用しながら解説します。

なお、Flutterの開発言語であるDartはJavaScriptやKotlinと文法的に近い部分もありますが、非同期処理モデルやウィジェット設計の考え方は独自のものです。既存のWebエンジニアやネイティブエンジニアが初めてFlutter開発に入る場合、慣れるまでに1〜2ヶ月程度の学習期間を見込んでおくことが現実的です。

MaterialデザインとCupertinoの差異が現場にもたらす影響

FlutterはGoogleのMaterial Designに準拠したウィジェット群と、AppleのHuman Interface Guidelinesに対応したCupertinoウィジェット群の両方を提供しています。この二系統の存在は柔軟性を生む一方で、実際の開発現場ではさまざまな問題を引き起こすことがあります。

代表的な問題のひとつが、iOSのスワイプバックジェスチャーの無効化です。Flutterの画面遷移で広く使われるWillPopScopeウィジェットを使用すると、iOSネイティブのスワイプで前画面に戻る操作が機能しなくなります。この問題はGitHub issue #14203として2018年から報告されており、125件以上のコメントが寄せられています。ユーザー体験に直結するバグでありながら長期間にわたって残存しており、対処するにはNavigator.of(context).pop()の明示的な実装やCupertinoPageRouteへの切り替えなど、追加の工数が必要です。

また、MaterialとCupertinoのウィジェット間にはAPIレベルの差異も多く存在します。以下の表に主要なウィジェットの差異を示します。

機能

Materialウィジェット

Cupertinoウィジェット

互換性

日付選択

showDatePicker

CupertinoDatePicker

API・UIとも非互換

アクションシート

BottomSheet

CupertinoActionSheet

見た目が大きく異なる

スイッチ

Switch

CupertinoSwitch

ほぼ互換、外見が違う

ナビゲーションバー

AppBar

CupertinoNavigationBar

レイアウト構造が異なる

アラートダイアログ

AlertDialog

CupertinoAlertDialog

ボタン配置が異なる

さらに、MaterialとCupertinoのパッケージが依存関係を持っており、片方しか使わない場合でも両方のコードがバンドルに含まれる構造的問題がissue #101479で指摘されています。これはFlutter Webにおいてはmain.dart.jsのファイルサイズ増大(issue #46589)として現れ、初回ロード時間の悪化につながります。SI企業のプロジェクトでは、初期設計段階でデザインシステムをMaterialに統一するかプラットフォーム別対応を行うかを明確に決定し、後からの方針変更を避けることが重要です。

MaterialデザインとCupertinoの差異・PlatformChannel図解
MaterialとCupertinoのウィジェット差異、PlatformChannelによるネイティブ連携の仕組み

PlatformChannelが抱えるネイティブ連携の課題

FlutterがiOS・Androidのネイティブ機能やサードパーティSDKを呼び出す際は、PlatformChannel(MethodChannel)という仕組みを介して通信を行います。この仕組みによってFlutterとネイティブコードを連携させることができますが、SI案件特有の要件では複数の課題が表面化することがあります。

まず、スレッドモデルの複雑さがあります。PlatformChannelはFlutterのUIスレッドとネイティブのプラットフォームスレッド間で非同期通信を行います。issue #150525(108コメント)では両スレッドのマージが長期的な課題として議論されており、現状ではIsolateを用いた非同期処理で対応することが推奨されていますが、実装の複雑性が増します。UIスレッドのブロッキングが発生すると画面がフリーズするため、重い処理を行うネイティブAPIとの連携ではとくに注意が必要です。

次に、コードプッシュ機能が公式にサポートされていない点も重要な制約です。issue #14330はFlutterリポジトリ中でも最多クラスの288コメントを持つissueで、React NativeのCodePushに相当するホットアップデート機能の実現可能性について2017年から継続して議論されています。現状ではShorebirdなどのサードパーティ製有償ツールが存在しますが、公式サポートではないため、バグ修正やUI変更のたびにAppStore・PlayStore審査を経る必要があります。リリース頻度が高いプロジェクトでは、この制約が運用コストに直結します。

また、地図SDK・WebView・カメラなどPlatformViewを利用するウィジェットでは、Flutterのジェスチャー認識とネイティブViewのジェスチャーが競合する問題が発生することがあります(issue #37579)。決済端末やNFCリーダーといった特殊ハードウェアとの連携が求められるSI案件では、各プラットフォーム向けのPlugin実装をKotlin・Swiftで自前開発しなければならないケースもあり、ネイティブSDK連携1件あたり3〜10日程度の追加工数を見積もっておくことが現実的です。

さらに、Androidのバックボタンでアプリを終了した際にdispose()が呼ばれないケースがあるという問題(issue #40940)も長期間未解決のままです。これはリソースリークにつながる可能性があり、バックグラウンドでの動作が重要な業務アプリでは動作検証を十分に行う必要があります。

Flutter WebにおけるSEOとCORSの構造的問題

FlutterはWebプラットフォームへの対応も進めていますが、Flutter Webを採用する際には2つの重大な制約を理解しておく必要があります。それがSEO問題とCORS問題です。

SEO問題は、Flutter WebのレンダリングがCanvasベース(CanvasKit)であることに起因します。通常のWebサイトはHTMLのdivやpタグでテキストコンテンツが構成されるため検索エンジンがクロールしてインデックスできますが、Flutter WebはすべてのUIをCanvasに描画するためHTMLのテキスト構造が存在しません。issue #46789は2019年12月から継続中の問題で、883件ものリアクションが集まっており、FlutterコミュニティにとってWebの最重要課題のひとつです。Flutterチームのコメントによれば、アクセシビリティ改善が優先されており、SEO対応は後回しとなっています。SSR(サーバーサイドレンダリング)についてもissue #47600で要望が出ていますが未実装のままです。

CORS問題は、Flutter WebアプリがブラウザのCORSポリシーの制約を受けることに起因します。ネイティブアプリ向けのDartではdart:ioのHttpClientが使えますが、Flutter Webではdart:ioが使用できないため、httpパッケージやdioを使ってもブラウザ経由のHTTP通信となり、CORSプリフライトリクエストが発生します。issue #49482(97コメント)をはじめ、CORS関連の問題が複数報告されています。API連携先のサーバーがAccess-Control-Allow-Originヘッダーを返すように設定されていない場合、追加のサーバー設定が必要です。レガシーなオンプレミスAPIとの連携ではCORS設定の改修が困難なケースもあり、BFF(Backend For Frontend)パターンの導入が解決策となることがあります。

課題

影響範囲

GitHub Issue

現状

SEO(クローラー未対応)

公開向けWebサービス全般

#46789

2019年〜未解決

SSR非対応

SEO・初期表示速度

#47600

未実装

CORS制約

APIサーバーとの通信

#49482

ブラウザ仕様依存

バンドルサイズ肥大

初回ロード時間

#46589

改善中だが限界あり

これらの制約から、Flutter Webは社内向けツールやイントラネットアプリケーションには適しているものの、SEOが重要なECサイト・コーポレートサイト・メディアサイトへの採用は避けるべきです。SEOが必要なページにはNext.jsなどのフレームワークを採用し、Flutter Webはアプリライクな操作性が求められる管理画面などに限定する使い分けが現実的です。

Flutter WebのSEO・CORS問題図解
Flutter WebにおけるSEO問題(CanvasKitレンダリング)とCORSの壁、ユースケース分類

SI企業がFlutter採用を判断する際のチェックポイント

ここまで解説してきた制約を踏まえ、SI企業がFlutter採用を判断する際に役立つチェックポイントを整理します。

まず、プロジェクトの要件とFlutterの適性を照合することが重要です。以下の表に、Flutter採用が適するケースと適さないケースをまとめます。

項目

Flutter採用に適するケース

Flutter採用を避けるべきケース

対象プラットフォーム

iOS・Android両対応が必要な社内アプリ

SEO重視の公開向けWebサービス

ネイティブ連携

カメラ・GPS程度の標準APIのみ

決済端末・カードリーダー・特殊ハードウェア多数

開発期間

6ヶ月以上でチームに学習期間がある

3ヶ月以内の短期開発

チームスキル

Flutter経験者が1名以上いる

全員がFlutter未経験

APIサーバー

CORS設定済みの既存API環境

CORS未対応のレガシーオンプレAPI

次に、工数リスクの定量的な把握も欠かせません。特にPlatformChannelを使うネイティブSDK連携とFlutter WebのCORS対応は、見積もり段階で見落とされやすいリスク項目です。

リスク項目

リスク度

追加工数目安

ネイティブSDK連携(PlatformChannel)

3〜10日/件

Flutter Web CORS対応

中〜高

2〜5日

iOS・Androidデザイン差異対応

1〜3日/画面

Flutter Web SEO対応(SSR)

高(実質不可)

別フレームワーク検討を推奨

各プラットフォームでのテスト工数

通常の1.5〜2倍

中長期の保守性についても考慮が必要です。Flutterはメジャーバージョンアップでのコードの変更要求(Breaking Change)が発生しやすく、pub.devのコミュニティプラグインはメンテナンスが停止するリスクがあります。長期保守が前提のSI案件では、プラグインの品質確認と自社実装の方針を初期段階で定めることを推奨します。

Flutterは適切な用途において非常に強力な選択肢です。「クロスプラットフォームだから工数半減」という期待は禁物ですが、本記事で紹介した制約を事前に把握し、要件・チームスキル・保守計画を総合的に判断することでFlutter採用の成功確率は大きく高まります。

IT/DXプロジェクト推進するPMO・コンサル人材を提供しています

AI利活用×高生産性のリソースで、あらゆるIT/DXプロジェクトを一気通貫支援します

詳しく見る →
AI駆動型ITコンサルティング
Careerバナーconsultingバナー