【Flutter】slangでinterfaceを作成してJSONの中のarrayをうまく使う

slangというpackageを使っていて、arrayのjsonを作りたい時に、そのままだと型がList<dynamic>になって、うまく使えずに困っていたのですが、interfaceを作成するという機能を使うといい感じになったのでシェアします。

slangは以下。

https://pub.dev/packages/slang

やり方

projectのルートにslang.yamlを作ります。
今回作るのはqとaをparamに持つQAModelです。

slang.yaml

interfaces:
  QAModel:
    attributes:
      - String q
      - String a

以下のjsonのqaList というkeyを qaList(interface=QAModel) と書くようにします。

  "qa": {
    "subtitle": "よくある質問",
    "qaList(interface=QAModel)": [
      {
        "q": "初心者ですが、大丈夫ですか？",
        "a": "大丈夫です。\nFlutter大学では初心者から中級者の方まで幅広くサポートしています。"
      },
      {
        "q": "初心者はHTML等から始めるべきですか？",
        "a": "いいえ。Flutterから始めて大丈夫です。\nもちろん知っているに越したことはありませんがFlutterから始めてバリバリ活躍されている方も多いのでご安心ください。"
      },
      {
        "q": "Windowsですが、大丈夫ですか？",
        "a": "大丈夫です。\nしかし、WindowsですとiPhoneアプリのデバッグができないのでMacの方がオススメです。"
      }
    ]
  },

その上で以下を叩いて、dartファイルを生成します。

flutter pub run slang

すると、以下のようにQAModelが使えるようになりました。

    final qaWidgets = t.qa.qaList
        .map(
          (QAModel model) => QATile(
            question: model.q,
            answer: model.a,
          ),
        )
        .toList();

interfaceを使わなかった場合、JSONのlistの方がdynamicになってしまい、castできる型も特になかったので、こういった取得方法ができませんでした。

今回のQ&Aみたいなケースに役立ちそうです。

まとめ

以上です。

Flutter大学LPのF&Aの部分はこのコードで実装しています。
良かったらみてみてください！

https://flutteruniv.com/

コードに関してもFlutter大学メンバーは以下から見れるのでチェックしてみてください！

https://github.com/flutteruniv/salon_app_web