More than 3 years have passed since last update.

Flutter on the WebでURL形式を変更

Posted at 2021-12-23

この記事は、「Flutter Advent Calendar 2021」に投稿した「Flutter on the WebをFirebase Hostingで公開した」の一部となります。

URL形式の変更

Flutter on the Webの初期状態のURLのパスは、以下のように「#(ハッシュ)」ベースになります。

このままでもいいのですが、せっかくなのでハッシュ無しのパスに変更したかったのでflutter_web_pluginsパッケージを適用しました。

pubspec.yaml

dependencies:
  flutter_web_plugins:
    sdk: flutter

main() に setUrlStrategy(PathUrlStrategy()); を追加します。

main.dart

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(MyApp());
}

URLの形式が変わっています。

setUrlStrategy(PathUrlStrategy())を追加すると、WEB以外でのビルドが通らないようになります。
flutter testすらエラーになります。
flutter test --platform chromeなら大丈夫ですけど。

WEB以外へも対応したい場合は、以下のようにするとWEBとそれ以外で読み込むdartファイルを場合分けすることが出来ます。

main.dart

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';

同じ関数を用意して、WEBの時だけsetUrlStrategy(PathUrlStrategy())を呼ぶようにします。

configure_web.dart

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

configure_nonweb.dart

void configureApp() {
}

以上です。