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

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());
}