🐙

device_previewとFigmaでFlutterのStore用スクショを簡単に作る

2022/07/07に公開

Android

はじめに

Flutterでいざアプリを作ったもののStore向けのスクショの作り方が分からない、作るのがめんどくさいということがあると思います。この記事ではdevice_previewとFigmaを使って簡単にStore用のスクショを作る方法を紹介します。
こんな感じのスクショが作れます。

device_preview

Flutterで様々な条件のレイアウトを確認するのに便利なパッケージです。
この記事が参考になります。

今回はdevice_preview_screenshotというdevice_previewでスクショが取れるようになるプラグインパッケージを組み合わせて使います。

スクショ作りで特に面倒なのがApp Store向けに複数サイズのスクショを用意することですが、device_previewを使うとこれがかなり簡単になります。

Fimga

言わずと知れた無料のUIデザインツールです。
自分で1からデザインを作る他に、Comminityの作ったリソースを使ってデザインを作り始めることもできます。
今回はdevice_preview_screenshotで作ったスクショから、Store用のスクショを簡単に作れるリソースを用意しました。

device_preview_screenshot導入

device_previewに加えてdevice_preview_screenshotの依存をpubspec.yamlに追加します。
device_previewの使い方自体は先ほどの記事を参照ください。

pubspec.yaml

dependencies:
  device_preview: ^1.1.0
  device_preview_screenshot: ^1.0.0

device_preview_screenshotで撮ったスクショをMacのデスクトップに移すと楽なので、以下のようなhelperを作ります。

device_preview_screenshot_helper.dart


// ignore_for_file: lines_longer_than_80_chars
import 'dart:io';

import 'package:device_preview_screenshot/device_preview_screenshot.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as img;
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';

/// Take a screenshotボタンを押すとクリップボードに便利コマンドがコピーされる
Future<void> onScreenshot(
  BuildContext context,
  DeviceScreenshot screenshot,
) async {
  final isFrameVisible = context.read<DevicePreviewStore>().data.isFrameVisible;

  final timestamp = DateTime.now();
  final tempDir = await getTemporaryDirectory();
  final file =
      await File('${tempDir.path}/${screenshot.device.name}_$timestamp.png')
          .create();
  // フレームがあるときはそのまま書き込む
  if (isFrameVisible) {
    file.writeAsBytesSync(screenshot.bytes);
  }
  // フレームが無い時は実際の画面サイズに調整してから書き込む
  else {
    final rawImage = img.decodePng(screenshot.bytes);
    final resizedImage = img.copyResize(
      // ignore: avoid-non-null-assertion
      rawImage!,
      width: (screenshot.device.screenSize.width * screenshot.device.pixelRatio)
          .toInt(),
      height:
          (screenshot.device.screenSize.height * screenshot.device.pixelRatio)
              .toInt(),
    );
    file.writeAsBytesSync(img.encodePng(resizedImage));
  }

  final message = 'mv ${file.parent.path}/*.png ~/Desktop';
  if (kDebugMode) {
    print(message);
  }
  // スクショがあるディレクトリのpngファイルをデスクトップに移動するコマンドをクリップボードにセット
  await Clipboard.setData(
    ClipboardData(text: 'mv ${file.parent.path}/*.png ~/Desktop'),
  );
}

device_previewの利用箇所にこのhelperを追加します。

main.dart

DevicePreview(
  enabled: const bool.fromEnvironment('enable_device_preview'),
  tools: const [
    ...DevicePreview.defaultTools,
    DevicePreviewScreenshot(
    onScreenshot: onScreenshot,
    ),
],

こちらのリポジトリで同じようなことをしてるので、よかったら参考にしてください

device_preview_screenshotでスクショをとる

device_previewのTake a screenshotボタンでスクショが取れます。
device_previewのDEVICE->Modelで端末の種類を変更しつつ以下のModelのスクショを取ります。

iPhone SE（5.5inch用）
iPhone 13 Pro Max（6.5inch用）
iPad(11")（12.9inch用）

先ほどのhelperを導入しているとDEBUG CONSOLEに、シミュレーターのディレクトリからMacのデスクトップに画像を移動させるコマンドがログに出ているので実行します。
こういうやつです。

mv /Users/hoge/Library/Developer/CoreSimulator/Devices/hoge/data/Containers/Data/Application/hoge/Library/Caches/*.png ~/Desktop

FimgaでStore用のスクショに加工する

リソースのコピー

先ほどのFigmaリソースのコピーを作ります。

Get a copyというボタンです。

こんな感じで初期化されます。

Streo用スクショに加工

まずはdevice_preview_screenshotで取ったスクショをドラッグ＆ドロップします

スクショを重ねるとなってるコンポーネントに重ねます。
画像はiPhone 13 Pro Maxの例です。コンポーネントに配置されるとExport用のFrameが更新されてることが分かります。
全てのサイズで同じことをします。