3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Sketchの画像ファイルをFlutterのコードに落とし込む

Last updated at Posted at 2020-09-26

最近、FlutterでiOS/Androidアプリ開発を行っております。
そこで、.sketchファイル(画像)を用いて、Flutterで使用しているDart言語に変換する事が可能であることを知ることができました。

手順

ちなみに今回の掲題の方法は、macOSで確認が取れております。

1.Supernovaをインストールする

今回の目玉であるSketchの画像ファイルをFlutterのコードに落とし込む方法は、
「Supernova」というツールを使って行う必要があります。(以下、ダウンロード画面)

2.Supernovaを起動し、.sketchファイルをインポートする

520617FF-8E6C-4C1E-8CBA-AACB80B48ED6.png

上掲画像の赤枠部分を押下し、スタイルとして読み込みたい「.sketch」ファイルを選択し、インポートします。

3.Dart言語に変換する予定の画像を選択する

次に、画像を選択することができるタブが開きますので、
ここでDart言語に変換する予定の画像を選択していきます。

4B9C4AD4-0F82-4D11-A2DB-721ABD131C42.png

Shiftキーにて、複数の画像をいっぺんに選択することもできます。

4.コードプレビューボタンを押下して、Dart言語を表示する

937F86DB-28BD-49D5-B8BF-CF8BD2FA91E8.png

上掲画像の赤枠部分を押下します。
すると、上掲画像の右側のように、Dart言語が表示されています。

ちなみに、上掲黄色枠部分の設定ボタンで、Dart言語や他の言語に変換するときの設定を変更することができます。

インデントのスペース数や、行間の有無を決めることができるので、
この設定で、実際のソースコードに落とし込むときにいくらか修正する部分が減りそうです:relaxed:

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?