Flutter Webで本格的なソフトを作るのは “おすすめ出来ない” 理由 [2025年]

2025.02.07

Flutterでプログラムするのはとても楽しいです。
実際idea Laneの開発を続けて約2年経ちました。

しかし私は現在「Flutter Webをきちんとしたソフトで使うにはおすすめしづらい」と感じているのが正直なところです。

その理由を書きます。

　

Flutter Webの本格利用がおすすめ出来ない理由

大きな理由は３つです。
基本的に、致命的な不具合が治らないことに起因しています。

　

１つ目：TextFieldのフォーカス切り替えで大変なことになる

スマホ実機のブラウザで、画面下部のTextFieldにフォーカスすると、画面まるごと上にずれてしまって元に戻せないという問題があります。

言葉で書くと簡単ですが症状は深刻です。

動画プレーヤー

何が起きているか分かりづらいと思うのですが、TextFieldにフォーカスするとFlutterの描画領域全体が上の方に大きくずりあがってしまいます。

スマホの実機(Android+Chrome)で発生します。簡単なソースで再現出来ます。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    builder: (context, child) => const MyApp(),
  ));
}

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

  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Spacer(),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.indigo,
            child: EditableText(
              controller: TextEditingController(),
              focusNode: FocusNode(),
              style: const TextStyle(fontSize: 14, color: Colors.black),
              cursorColor: Colors.white,
              backgroundCursorColor: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }
}

報告されているイシュー：Keyboard issue on mobile Web platform #124205

2023年の報告であり、イシューにコメントも多数(100以上)付いていますが解決しません。

実際に遭遇すると結構深刻な問題であることが分かるのですが、優先度が変わらないのでずっとこのままだと思います。

　

２つ目：TextFieldの入力で表示が崩れる

２つ目もTextFieldです。

日本語をスマホから普通に入力するだけで、おかしな状況になります。

動画プレーヤー

何が起きているか分かりづらいと思うのですが、TextFieldで日本語入力すると表示が崩れるというものです。

スマホの実機で発生します。上記はiPhone＋Chromeですが、機種・ブラウザ・日本語IMEの組み合わせ・Flutterのバージョンによっても表示の崩れは異なります。文字が2重に重なることが多いです。

短いソースで簡単に再現できます。PCではなく、スマホの実機からアクセスしてください。
dartPadで試す

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: TextField(maxLines: null),
      ),
    );
  }
}

イシューは上げていますが、治る見込みは無いです。

[flutter web] A highlight of characters is incorrect on composing mode at TextField. #151097

上記はスマホのみの問題で、PCはPCで別のイシューがあります。

例：flutter/flutter TextField’s underline on text is misaligned on Web when using Japanese Keyboard (ATOK 2014)

Flutter Webで日本語入力すると、TextField(EditableText)という超基本的なWidgetで表示崩れしてしまいます。
残念ながら英語圏では発生しませんし、不具合対応の優先度が上る可能性は低いです。

　

３つ目：最初の表示が非常に遅い

Flutter Webは起動が遅いです。

主な原因は下記です。

  • デフォルトのレンダリングエンジンであるWebKitの読み込みで時間がかかる
  • ソフトが巨大になるとmain.dart.jsを分割して遅延読み込みする機能はあるが、問題があり自分で回避策を実行する必要性がある( [web] DeferredLoadException after deploying a new version of app #127459 )
  • それに加えて日本語を表示するにはフォント読み込みが必要で、追加の時間がかかる
フォントの読み込みは実際はもっと早いが、それでも初回読み込み時にある程度の時間は必要

１つ目のWebKitは仕方が無い面はあるとはいえ、他の要素も合わせると実用面でかなり厳しくなります。

idea Laneも機能追加に伴いサイズが大きくなり起動がどんどん遅くなったため、なんとか改善したいと頑張っています。
しかしFlutterの不具合もあいまってかなり大変です。そして起動速度改善にはプラットフォームとしての限界があります。

ここまで書いたように「テキスト入力に問題があり、起動も遅い」のがFlutter Webの現状です。

Flutter自体は素晴らしいところもいっぱいあります。
何よりFlutterは楽しい。

しかし多くの人に使ってもらうようなソフトをFlutter Webで作って本番環境で運用するのは、現状、厳しいと言わざるを得ません。
日本語を入力しない小規模なアプリなら大丈夫だと思いますが。
　

根深い問題

そして本当の問題は、不具合が存在することではなく、致命的な具合がなかなか治らないことです。

多くの人が同じように困り、イシューにたくさんのコメントやリアクションが付いても、それでも長く解決しません。（下手したら年単位）

深刻な問題でも優先度が上がらないので、問題が長い間放置されてしまうのです。

でもFlutterは定期的にAI対応など新機能を出しており、開発が止まっているわけではありません。ということはおそらく不具合の深刻度の定義に問題があるか、トリアージプロセスに問題があるのだろうと思います。

またFlutterの開発者やテスターは、おそらくWebにデプロイしてスマホ実機で動作確認をしないから問題の深刻さに気づかないのだと思います。日本語など当然後回しでしょう。

その結果、利用する側から見れば大きな問題であっても、開発から見ると優先度が上がらないので、いつまで経っても治らない。これが根深い問題だと思います。

ちなみにFlutterのバージョンアップのお知らせが来て flutter upgrade をすると、不具合が直るどころか新たな不具合が起きるし仕様も良く変わるしでバージョンアップが毎回怖いです。　

　

私は既に2年近くかけて１つのソフトを作っていますが、Flutterそのものの問題で今も苦労し続けています。
本来の機能開発以外の部分(Flutterの不具合を回避するための調査と試行錯誤)で時間を取られすぎて、最近は、Flutterを選んだのは失敗したと感じている面も正直あります。

もちろん、スーパーエンジニアであればどんな問題も軽々と突破していくのでしょう。

しかし私のような普通の人は、イシューに付く何十ものコメントを読んだが結局解決策が無かったり、datrが吐き出したjsをさらに書き換えるバッチを必死に作って不具合回避するのは時間が取られますしイヤになります。

他のフレームワークに移行した方が良いと思うのですが、今からだととてつもない労力がかかるでしょう。

まとめ

  • Flutterでプログラムを組むのは楽しいです
  • マルチプラットフォーム対応は素晴らしいです
  • しかしFlutter Webを本番環境で使うには、経験上はかなり厳しい道と言わざるを得ません

たとえばスマホで文字しようとすると画面がまるごとずれます。日本語入力は文字表示がおかしくなります。そもそも起動が遅いです。起動を早くするためにソースを分割すると最新のものが読み込まれずおかしくなります。ワークアラウンドを実施するのも大変です。

こういった問題は、実際にソフトをWebサーバにデプロイしてスマホなどでアクセスすると初めて深刻さに気づきます。
しかも報告しても不具合が長く治らないので非常に困ることになります。

ということで皆様、Flutter Webは良い面もありますが、本格採用する前に上記を理解しておくことおすすめします。

この記事の英語バージョン：Why I cannot recommend developing production software by using Flutter Web [2025]

0

コメント / Comment

タイトルとURLをコピーしました