【Flutter】WebアプリのURLから「#」(ハッシュ)を消す

Flutter

Flutter WebアプリのURLにはデフォルトで「#」(ハッシュ)が付いています。

この「#」を消す方法と、クロスプラットフォーム対応(Webの時だけ有効化)する方法について解説します。(基本的には公式の説明そのままです)

スポンサーリンク

URLの「#」を消す方法

「#」を消すには、flutter_web_plugins パッケージを使用します。

  • pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  # ↓これを追加
  flutter_web_plugins:
    sdk: flutter
  • main.dart
// ↓これをインポート
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  // runAppの前に↓これを実行
  setUrlStrategy(PathUrlStrategy());
  runApp(const MyApp());
}

これで、URLから「#」が無くなります。

クロスプラットフォーム対応

Webとそれ以外でインポートするファイルを分岐させるように記述します。

  • url_strategy.dart(メインで読み込むファイル)
export 'url_strategy_noop.dart' if (dart.library.html) 'url_strategy_web.dart';
  • url_strategy_noop.dart(Web以外の時に読み込む※何もしない)
void usePathUrlStrategy() {
  // noop
}
  • url_strategy_web.dart(Webの時に読み込む)
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void usePathUrlStrategy() {
  setUrlStrategy(PathUrlStrategy());
}
  • main.dart
import 'package:flutter/material.dart';
// ↓メインで読み込むファイルはこれ
import 'url_strategy.dart';

void main() {
  // ↓どちらにしても同じ関数を実行
  usePathUrlStrategy();
  runApp(MyApp());
}

コメント

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