XD to Flutterで書き出したコードをFlutterで使用する

こんにちは。
初心者すぎて、「えっなんで・・・」となったので備忘録含めたメモ書きです。

#Adobe XDとは

Adobe XDは、共同作業を促進するパワフルで使いやすいプラットフォーム。webサイトやモバイルアプリ、音声インターフェイス、ゲームなどのデザイン制作をチーム全体でスムーズにおこなうことができます。

今回はここについて触れないのでこれで割愛します。

#XD to Flutter
AdobeXDのプラグインの一つで、XDで頑張ってデザインしたものを簡単にコード化してくれるという優れもの。
僕はこれを参考にしました。
https://qiita.com/ashdik/items/d02d46a690e5e9578a7e
XD to Flutterの使い方は上の記事でわかりやすく書いてくれているのでここでは割愛します。

#問題のFlutterです

XD to Flutterで書き出したコードですが

Pinned.fromSize(
                  bounds: Rect.fromLTWH(0.0, 47.0, 325.0, 90.0),
                  size: Size(325.0, 137.0),
                  pinLeft: true,
                  pinRight: true,
                  pinBottom: true,
                  fixedHeight: true,
                  child:
                  // Adobe XD layer: 'Categories Section' (none)

この__"Pinned"__というWidgetがうまく認識されていないという状態でした。

#解決方法

・Adobe XDのパッケージをFlutterに入れてあげる。

①https://pub.dev/
に飛んで「xd」と検索します。。

②[adobe_xd]というパッケージが表示されるのでクリック。

③[installing]タブをクリック。

④自分のプロジェクトのpubspec.yamlファイルに手順1を加える。
僕の場合はこんな感じ

dependencies:
  carousel_slider: ^2.2.1
  adobe_xd: ^1.0.0+1
  flutter_svg: ^0.18.0
  flutter:
    sdk: flutter

⑤flutter pub getコマンドを実行

Process finished with exit code 0
と表示されればOKです。

⑥XD to Flutterで書き出したコードを書いているファイルの上に

import 'package:adobe_xd/adobe_xd.dart';

を追加する。

これで
__"Pinned"__というWidgetが認識されました。