Add devices for app store screenshots

[nfriend]

What does this PR do?

Adds 6 new devices that allow developers to take screenshots that conform to all the size and resolution requirements of the iOS and Android app stores:

• iPhone 5.5" (1242x2208)
• iPhone 6.5" (1242x2688)
• iPad 12.9" (2048x2732)
• Android 16:9 Phone (1242x2208)
  • Note: Same as iPhone 5.5"
• Android 7" Tablet (1728x3072)
• Android 10" Tablet (2160x3840)

Notes

The devices do not have any frames, since they only exist for screenshotting purposes. I used these devices to capture all the screenshots for my Flutter app and can confirm it produces the correct sizes/aspect ratios for both stores.

If you don't like the lack of frames, I could consider surrounding each with a generic black square (maybe with some text describing its purpose), if that would make sense.

I'm also open to any naming changes if you think these could be more clear. Ideally, I would have put all of these devices in their own category/tab (e.g. "App store screenshots"), but it appears the current categories are backed by a built-in enum, so I wasn't sure how to go about this.

Compliments

Thanks so much for putting this project together! It literally saved me hours. My app is a drawing app, so putting together a single screenshot-worthy drawing can take hours. Doing this 5 times for each screenshot was a total non-starter for me.

Also, the way this project uses the SVG files as input is brilliant!

Closes #38
Closes #85

[pandazed]

@nfriend
Didn't checked but maybe it will help you

You can use something like this

final store = DevicePreviewHelper.getDevicePreviewStore(context);
  store.enableCustomDevice();
  store.updateCustomDevice(CustomDeviceInfoData(id: id, type: type, platform: platform, name: name, safeAreas: safeAreas, pixelRatio: pixelRatio, screenSize: screenSize))

in ItemScreenMode function property before you open page by DirectPageRouteBuilder

[pandazed]

Yeah, it works

devices.dart

class TotoCustomDevices {
  static const CustomDeviceInfoData iphone11ProMaxPortrait =
      CustomDeviceInfoData(
    id: 'iphone11ProMax',
    type: DeviceType.phone,
    platform: TargetPlatform.iOS,
    name: 'iphone11ProMax',
    pixelRatio: 3.0,
    safeAreas: EdgeInsets.only(left: 0.0, top: 44.0, right: 0.0, bottom: 34.0),
    screenSize: Size(375.0, 812.0),
  );
  static const CustomDeviceInfoData iphone11ProMaxLandscape =
      CustomDeviceInfoData(
    id: 'iphone11ProMaxLandscape',
    type: DeviceType.phone,
    platform: TargetPlatform.iOS,
    name: 'iphone11ProMaxLandscape',
    pixelRatio: 3.0,
    safeAreas: EdgeInsets.only(left: 44.0, top: 0.0, right: 44.0, bottom: 21.0),
    screenSize: Size(812.0, 375.0),
  );
}

screenshot.dart

final simpleScreenShotModesPlugin = SimpleScreenShot(
  processor: saveScreenShot,
  pages: listPush,
  devices: [
    Devices.android.small.identifier
  ],
  useToggleDarkMode: false,
);

final listPush = [
  ItemScreenMode(function: pushHome, label: 'home', modes: deviceModes),
  ItemScreenMode(
      function: pushAddScenario, label: 'addScenario', modes: deviceModes),
  ItemScreenMode(
      function: pushPrompterGirl, label: 'prompterGirl', modes: deviceModes),
  ItemScreenMode(
      function: pushPrompterBlack, label: 'prompterBlack', modes: deviceModes),
];

final deviceModes = [
  ItemScreenMode(
      function: (context) async {
        final store = DevicePreviewHelper.getDevicePreviewStore(context);
        store.enableCustomDevice();
        store.updateCustomDevice(TotoCustomDevices.iphone11ProMaxPortrait);
      },
      label: "iphone11ProMaxPortrait"),
  ItemScreenMode(
      function: (context) async {
        final store = DevicePreviewHelper.getDevicePreviewStore(context);
        store.enableCustomDevice();
        store.updateCustomDevice(TotoCustomDevices.iphone11ProMaxLandscape);
      },
      label: "iphone11ProMaxLandscape"),
];

Future pushHome(BuildContext context) async {
  if (navigatorKey.currentContext != null)
    Navigator.of(navigatorKey.currentContext!)
        .push(DirectPageRouteBuilder(builder: (_) => HomePage()));
  await Future.delayed(Duration(seconds: 1));
}

.......

main.dart

void main() async {
   ......

  List<Locale> locales = [Locale('ru', 'RU'), Locale('en', 'US')];

 runApp(DevicePreview(
      enabled: GlobalData.devicePreviewEnabled,
      availableLocales: locales,
      plugins: [simpleScreenShotModesPlugin],
      builder: (context) => WrappedApp());
}

[nfriend]

@pandazed Sorry, I'm a little confused. What are your comments above about? This is a proposal to add some new device frames to this repo 🤔

[pandazed]

@pandazed Sorry, I'm a little confused. What are your comments above about? This is a proposal to add some new device frames to this repo 🤔

You can set any device you need in my example in devices.dart: iPhone 5.5, iPhone 6.5 and others
And use this devices to make screenshots.

No need to change something in device_preview

[fotiDim]

This PR would be very nice to have. I am trying to produce App Store screenShots and I am missing:

• iPhone· 6.5-inch
• iPhone 8 Plus · 5.5-inch
• iPad Pro (6th Gen) 12.9" Display
• iPad Pro (2nd Gen) 12.9" Display