Getting Screenshots Automatically in Flutter

4c6ec167a614173c5b31aaf4d1defa19?s=47 Hiroki Matsue
September 06, 2019

Getting Screenshots Automatically in Flutter

"Flutter Meetup Tokyo #11"でのLT資料です。
https://flutter-jp.connpass.com/event/140588/

4c6ec167a614173c5b31aaf4d1defa19?s=128

Hiroki Matsue

September 06, 2019
Tweet

Transcript

  1. Getting Screenshots Automatically in Flutter Hiroki Matsue (@macs_6) Sep 9th,

    2019 Flutter Meetup Tokyo #11
  2. https://itsallwidgets.com/flutter-app/mioswitch

  3. This talk is about Getting Screenshots Automatically

  4. 2 usage of sceenshots • Golden file testing • Catalog

    / Styleguide / Previews on Store
  5. Golden files

  6. Testing with golden files await expectLater( find.byType(RepaintBoundary), matchesGoldenFile( 'test_name.subtest.subfile.png', version:

    0, ), );
  7. https://github.com/flutter/goldens/tree/master/packages/ flutter/test/material

  8. Update golden files $ flutter test --update-goldens https://help.github.com/en/articles/rendering-and-diffing-images

  9. Check images diff on terminal https://github.com/flutter/goldens/blob/master/diff-images.sh #!/bin/sh compare $2 $1

    png:- | montage -geometry +4+4 $2 - $1 png:- | display -title "$1" -
  10. Catalog / Styleguide

  11. https://flutter.dev/docs/catalog/samples/AnimatedListState

  12. 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
  13. 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 ... */
  14. 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 <a href="/catalog/samples/">Sample App Catalog</a> page lists all of the sample apps. <div class="container-fluid"> <div class="row" style="margin-bottom: 32px"> <a href="/catalog/samples/animated-list/"> <div class="col-md-3"> <img style="border:1px solid #000000" src="..." alt="Android screenshot" class="img-responsive"> </div> </a> ...
  15. Result !

  16. 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
  17. Flutter Driver "flutter drive" command runs apps on emulators or

    devices. Good to test apps performance.
  18. Getting screenshots by Flutter Driver screenshot_test.dart driver = await FlutterDriver.connect();

    ... await driver.waitUntilNoTransientCallbacks(); final List<int> pixels = await driver.screenshot(); final File file = new File(path); await file.writeAsBytes(pixels); print('wrote $file'); await driver.tap(find.byValueKey('screenshotGestureDetector'));
  19. Screenshots in Flutter • 2 usage of sceenshots • Golden

    file testing • Catalog / Styleguide / Previews on Store • Use "matchesGoldenFile" for golden files testing • Use "driver.screenshot()" for catalog generation • sample_page.dart is good reference.
  20. 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
  21. Thanks