adjust screenshot sizes to AppStore Guidelines

[guenth39]

Hey,

Would be really helpful if the Screenshots of iOS Devices would match the AppStore Screenshot Guidlines.

[bierbaumtim]

I have the same issue on the iPad 12.9 2.Gen configuration, were the dimension is currently Size(1024, 1336)(portrait) and Size(1336, 1024)(landscape) and should be Size(1024, 1366)(portrait) and Size(1366, 1024)(landscape)`.

@guenth39 On which devices did you encounter this issue ?

[aloisdeniel]

It may be a mistake on that device. Are the iPhone screenshot sizes fine ?

[bierbaumtim]

Yes, iPhone sizes matches the guideline.

[bierbaumtim]

But also the Watch does not match any of the possible sizes, but it is not clear whether the 44mm or 40mm is required, because the guideline only says

312 x 390 pixels (Series 3) 368 x 448 pixels (Series 5 and Series 4)

So the current size could be correct for the 40mm Watch.

[guenth39]

I tried to automate somehow the screenshot taking for App Store with this package. I looked up the iPhone sizes and the MediaQuery params are fine. I tried to make a screenshot of a Screenshot on the iPhone Xs Max because with the device pixel ratio of 3 and the screenshot size of 414 x 896 it matches the App Store requirements for a 6,5 inch 1242 x 2688 pixels screen. But the screenshot I received was 1542 x 2988 pixels, it doesn't match the App Store guidelines, I can't upload it to the App Store as screenshot. The second issue is that it's a PNG file but App Store doesn't accept "images with transparent layers" so PNG doesn't work and I have to convert it to JPG. So, the plan is to somehow adjust the package that I can upload the screenshots directly to App Store Connect without any editing necessary. I looked a bit in the package and the screenshot size depends on the real screen size + the frame size + the padding around the frame. Because i think it's quite nice to have the frame around the screenshot for App Store images i started to somehow process the screenshot and found a solution. I wrote a onScreenshot function where the screenshot is resized to the device guidelines and then uploaded as JPG. See my example: https://github.com/aloisdeniel/flutter_device_preview/blob/c7078e98bc9cfa17869efcefdc04843551ae39a6/device_preview/example/lib/screenShotProcessing.dart#L1-L70

I think it's a quite time-consuming thing to take all the screenshot every time you have a release. So I suggest it would be quite nice to give somehow a param to the screenshot function where I can set some attributes like position, text, background color and then receive ready to got screenshot. If we could use that with flutter UI testing (test driver) it would be a perfect working solution. I will try to implement UI testing to the example on weekend. Looking forward to hear your feedback regarding this. Hope you understand what's my plan.

Best Regards

[aloisdeniel]

Thanks a lot for your suggestions! I think i get what you're trying to achieve.

I need to create a more complete solution for that, but I can imagine a list of WidgetBuilder scenes that you can choose from the screenshot menu to create a specific screenshot rendering (customisable with any widget texts, illustrations, ...).

Something like :

DevicePreview(
    screenshotScenes: {
        'Home': (context, device) => Column(children: <Widget>[ 
             Expanded(child: device), 
             Text('Welcome'),
          ],
       ),
    }
)

[guenth39]

I think the coolest thing for the users would be if you could somehow provide a list of scenes and a list of devices and then it creates for all devices screenshots for all scenes and uploads it in a single zip file or something like this. Maybe we could create something like a take multiple screenshots button with a customizable function where you can navigate to the different screens in the app. Don't know if we maybe could achieve this goal without flutter_driver. The other possibility is to use flutter_driver and provide a new screenshot function you can use there. There is a function driver.screenshot() witch returns a screenshot as List<int>. If we add a function DevicePreview.screenshot(device, screenshotScene) it would a good solution as well I think :) Then you can navigate and use everything from UI testing, integrate it in you're pipeline and store the screenshots like you want. But I don't know if that is possible ...

[guenth39]

Is there any progress or anything I can do?

[xalikoutis]

Since screenshots package is abandoned by its dev and no more working is latest releases of flutter , device_preview is our only option to take screenshots and upload to stores. Using flutter driver i believe we need to statically call

1.DevicePreview.setDevice(device) 2.DevicePreview.screenshot()