Getting Screenshots Automatically in Flutter

by Hiroki Matsue

Slide 1

Slide 1 text

Getting Screenshots Automatically in Flutter Hiroki Matsue (@macs_6) Sep 9th, 2019 Flutter Meetup Tokyo #11

Slide 2

Slide 2 text

https://itsallwidgets.com/ﬂutter-app/mioswitch

Slide 3

Slide 3 text

This talk is about Getting Screenshots Automatically

Slide 4

Slide 4 text

2 usage of sceenshots • Golden ﬁle testing • Catalog / Styleguide / Previews on Store

Slide 5

Slide 5 text

Golden ﬁles

Slide 6

Slide 6 text

Testing with golden ﬁles await expectLater( find.byType(RepaintBoundary), matchesGoldenFile( 'test_name.subtest.subfile.png', version: 0, ), );

Slide 7

Slide 7 text

https://github.com/ﬂutter/goldens/tree/master/packages/ ﬂutter/test/material

Slide 8

Slide 8 text

Update golden ﬁles $ flutter test --update-goldens https://help.github.com/en/articles/rendering-and-difﬁng-images

Slide 9

Slide 9 text

Check images diff on terminal https://github.com/ﬂutter/goldens/blob/master/diff-images.sh #!/bin/sh compare $2 $1 png:- | montage -geometry +4+4 $2 - $1 png:- | display -title "$1" -

Slide 10

Slide 10 text

Catalog / Styleguide

Slide 11

Slide 11 text

https://ﬂutter.dev/docs/catalog/samples/AnimatedListState

Slide 12

Slide 12 text

Flutter catalog pages are generated by sample_page.dart Catalog generation steps: 1. Put formatted comment to the code. 2. Generate markdown file and codes for flutter driver. • Render app's widgets one by one. 3. (Convert markdown file to HTML file and host it.) <= managed by committers

Slide 13

Slide 13 text

Tail of flutter/examples/catalog/animated_list.dart ... /* Sample Catalog Title: AnimatedList Summary: An AnimatedList for displaying a list of cards that stay in sync with an app-specific ListModel. When an item is added to or removed from the model, the corresponding card animates in or out of view. Description: Tap an item to select it, tap it again to unselect. Tap '+' to insert at the ... */

Slide 14

Slide 14 text

Generated markdown --- layout: page title: "AnimatedListState Sample Apps" permalink: /catalog/samples/AnimatedListState_index/ --- All of the sample apps listed here use the Flutter AnimatedListState class in an interesting way. The Sample App Catalog page lists all of the sample apps.

...

Slide 15

Slide 15 text

Result !

Slide 16

Slide 16 text

How to generate $ git clone https://github.com/flutter/flutter.git $ cd flutter/examples/catalog $ ../../bin/flutter packages get $ dart bin/sample_page.dart ${commit_hash} $ ../../bin/flutter drive test_driver/screenshot.dart

Slide 17

Slide 17 text

Flutter Driver "flutter drive" command runs apps on emulators or devices. Good to test apps performance.

Slide 18

Slide 18 text

Getting screenshots by Flutter Driver screenshot_test.dart driver = await FlutterDriver.connect(); ... await driver.waitUntilNoTransientCallbacks(); final List pixels = await driver.screenshot(); final File file = new File(path); await file.writeAsBytes(pixels); print('wrote $file'); await driver.tap(find.byValueKey('screenshotGestureDetector'));

Slide 19

Slide 19 text

Screenshots in Flutter • 2 usage of sceenshots • Golden ﬁle testing • Catalog / Styleguide / Previews on Store • Use "matchesGoldenFile" for golden ﬁles testing • Use "driver.screenshot()" for catalog generation • sample_page.dart is good reference.

Slide 20

Slide 20 text

References • https://github.com/flutter/flutter/wiki/Writing-a-golden-file- test-for-package:flutter • https://api.flutter.dev/flutter/flutter_test/ matchesGoldenFile.html • https://github.com/flutter/goldens • https://github.com/flutter/flutter/blob/ 72a72b375afd2d9a341d62f70a2f30a324744d33/ examples/catalog/bin/sample_page.dart

Slide 21

Slide 21 text

Thanks