【FlutterWeb】URLパラメータを使いたい！

URLパラメータとは

そんなもん知ってるわという方は読み飛ばしてください。

URL パラメータとは、データを収集するために URL の末尾に付け加える変数のことです。
具体的には、URL の「?」以降がこれにあたります。

たとえば以下のようなURL。

http://localhost:○○○○○/?id=123

今回のURLだとidは123となっており、123をプログラムの引数として扱えて便利なわけです。idによって表示する画面を変えるなんてことも可能になります。例えばユーザーのマイページを表示するケースとかに使われていると思います。

ちなみに、URL関係を調べているとたまにURIっていうのが出てきててタイプミスかななんて思っていましたが、少し定義が違う様です。

URL（Uniform Resource Locator）はweb上の住所
URN（Uniform Resource Name）はWeb側で認識されている名前
URI（Uniform Resource Identifier）はURLとURNの総称

参考にした記事

少し脱線しましたが、本題に入っていきます。

やっていくこと

今回はとりあえずローカル環境で動くように設定していきます。FlutterWebアプリをChromeでビルドした後に

http://localhost:○○○○○/?id=123

をブラウザから検索すればFlutterWebアプリ上で123を引数として扱えるようにします。もちろん123だけでなく任意の文字をいれることができます。

完成品

ちなみにlocalhost:○○○○○の５桁数字はビルドするたびに変わるのものなのでご自身の環境に合わせてください。

ソースコード

完成品はGithubにあげています。
https://github.com/MatsumaruTsuyoshi/flutter_web_url_parameters

解説

URLの取得方法について簡単に紹介します。標準ライブラリのUriクラスを活用します。

URL全体の取得

まずは現在のURLを取得するメソッドを紹介します。

main.dart

//URL取得
String myurl = Uri.base.toString();

これでmyurlにはhttp://localhost:○○○○○/?id=123が入ります。

URLパラメータのみ取得

main.dart

//クエリパラメータ取得
String? id = Uri.base.queryParameters["id"];

これでidには123が入ります。今回はqueryParametersのkeyが”id”にしましたが任意に決めれます

コード全文

URLを取得できたらあとは表示させるだけです。

main.dart

import 'package:flutter/material.dart';

void main() {
  //URL取得
  String myurl = Uri.base.toString();
  //クエリパラメータ取得
  String? id = Uri.base.queryParameters["id"];

  runApp(MyApp(myurl: myurl, id: id ?? 'null'));
}

class MyApp extends StatefulWidget {
  String? myurl, id;
  MyApp({this.myurl, this.id});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test App",
      home: Scaffold(
          appBar: AppBar(
            title: Text("Flutter webページだよ"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container(
              padding: EdgeInsets.all(20),
              alignment: Alignment.center,
              child: Column(
                children: [
                  //display parameters and URL here
                  SelectableText(
                      widget.id == null ? "id is null" : "id  = " + widget.id!),
                  SelectableText(widget.myurl == null
                      ? "URl is null"
                      : "URLパラメータ = " + widget.myurl!)
                ],
              ))),
    );
  }
}

おわりに

結構簡単だったと思います。次は実際にWeb上にデプロイして動かせるか検証していきます。