省エネ

Flutter、vue3修行中。

【flutter】【go_router】flutter webでgo routerを使った時にurlの#を消す方法

こんにちは。
本日はgo routerを使った時にブラウザに表示される#を消す方法について書きたいと思います。

go routerについてはこちらを参考にしてみてください。

zenn.dev

ここにリンクされているページを一通り読むとgo routerについて理解できるかと思います。
モバイルアプリ開発しかやったことない方は理解が難しいかもしれませんが、webアプリの経験があればすぐに理解できるかなと思います。

さて、flutetr webでアプリを作るとurlに#がついてしまうと思います。

url 例
url 例
こんな感じ。
この#を消す方法が↑の目次の「サンプルコード集」のリンク先にもあるのですが、go_route5.1.5では使えないみたいです。
以前のバージョンではできていたんだと思います。
なお、どのバージョンから消えたのかの検証、確認はしていません。
該当の引数がない場合には↓の方法を試してみてください。

バージョン

flutter: 3.3.7
dart: 2.18.4
go_route: 5.1.5

pub.dev これを使います。

dependencies:
  flutter:
    sdk: flutter
  url_strategy: ^0.2.0

追加。

flutter pu get
import 'package:url_strategy/url_strategy.dart'; ←追加

void main() {
  setPathUrlStrategy(); ←追加
  runApp(const MyApp());
}

これで、#が消えます。

以上です。