Add LiFF SDK

[heyhey1028]

Package

https://pub.dev/packages/flutter_line_liff

Reference

For local debugging

https://techblog.roxx.co.jp/entry/2022/08/01/120000 (JA) https://qiita.com/umeneri/items/f2737b074b5960cedecc (JA) https://zenn.dev/bulb/articles/d6f629def573f3 (JA)

ngrok

https://qiita.com/miriwo/items/8c1e6550a5ab279d60b5 (JA)

mkcert

https://zenn.dev/takumiabe21/articles/645a38c0c18389 (JA)

[heyhey1028]

ローカル開発環境の整備

1. ローカルサーバーの立ち上げ

   $ flutter run -d web-server --web-port=8080

2. ngrokを使って、ローカルサーバーを外部公開

   $ ngrok http 8080

3. ngrokが吐き出すhttpsのurlをLIFFアプリのエンドポイントURLに登録

   
   ngrok                                                                                               (Ctrl+C to quit)

Join us in the ngrok community @ https://ngrok.com/slack

Session Status online
Account heyhey1028 (Plan: Free)
Version 3.0.7
Region Japan (jp)
Latency -
Web Interface http://127.0.0.1:4040

↓ このURL

Forwarding https://xxxx-xxx-xxx-xxx-xx.jp.ngrok.io -> http://localhost:8080

Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00

![](https://storage.googleapis.com/zenn-user-upload/622b277a3eb3-20220831.png)

4. LINE内でLIFF URLにアクセスすると現在ローカルで立ち上げたFlutter webが表示される
<img width="250" src="https://storage.googleapis.com/zenn-user-upload/4289a606a963-20220831.jpeg">

[heyhey1028]

壁①：vscodeのlaunch.jsonでビルドしたローカルサーバーではdart debug extensionが必要になる

現象：

• launch.jsonで下記の通り定義しデバックを実行

    {
      "name": "Debug web-server",
      "program": "lib/main.dart",
      "request": "launch",
      "type": "dart",
      "args": [
          "-d",
          "web-server",
          "--web-port=8080"
      ]
    },

• localhost: 8080にアクセスするも下記のエラーが表示され、ずっとローディング状態となる

解決策：

• コンソールからflutter run -d web-server --wep-port=8080を実行して立ち上げたローカルサーバーでは正常に起動
• launch.jsonで立ち上げたローカルサーバーの場合、chrome側にdart debug extensionをインストールして実行すると正常に起動する dart debug extension

[heyhey1028]

壁②：dotenvを使った環境変数の読み取りがLIFF内だと行えない？

こちらが関連してる可能性有り→ https://zenn.dev/tsukatsuka1783/articles/64c9e06d516a3e