[Flutter] MapBoxでピンをタップしたら処理を行えるようにする方法

いせきです。
たくさん役に立てるような記事を書いていこうと思っています。よろしくお願いします。

今回は、MapBoxでピンをタップしたら処理を行えるようにする方法を紹介していこうと思います。

初めに ~MapBoxとは~

こちらを参考にしてください。

MapBoxの基礎については以下のサイトがとても参考になります。（僕もとても参考になりました。死ぬほど助かりました。）

解説のコード

今回は、initStateの中にピンを表示させる処理を書いていこうと思います。

final Completer<MapboxMapController> controller = Completer();

  @override
  void initState() async {
    super.initState();
    await controller.future.then(
      (mapBoxMap) {
        mapBoxMap.addSymbol(
          const SymbolOptions(
            geometry: LatLng(
              35.7100069,
              139.8108103,
            ),
            textField: '東京スカイツリー',
            textAnchor: 'top',
            textHaloWidth: 3,
            textSize: 12,
            iconImage: 'pin',
            iconSize: 0.8,
            iconAnchor: 'top',
            iconHaloBlur: 100,
            iconHaloColor: '#FFF',
            iconOffset: Offset(0, -55),
          ),
        );
      },
    );
   }

ちなみに

mapBoxMap.onSymbolTapped.add((argument) {});のargumentからは、
MapBoxのピンの情報が取得することができます。

例えば

 mapBoxMap.onSymbolTapped.add((argument) {
 print(argument.textField); //'restaurant'になります。
});

最後に

Verooは、Blockchain技術を活用した「想いの巡るグルメSNSアプリ」です。食に対する熱量、例えばラーメンがめちゃくちゃ好きで年間400杯食べているとか、変態的に具材にこだわった中華料理を作っているなどのような、今まで直接お金にはならなかった食に対する情熱や熱量、その裏側にある想いがトークンを使うことで巡る世界。自分のラーメンに費やす熱量がコミュニティに承認される。自分がほんとにいいと思って作った食べ物がコミュニティで広まる。Verooは単なるSNSアプリではなく、クリエイターたちの想いが紡がれるソーシャルグルメアプリです。

Homepage: https://veroo.xyz/

Discord URL：https://t.co/VoT0gpsflA

参考文献