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());
}
コメント