$30 off During Our Annual Pro Sale. View Details »

Getting Screenshots Automatically in Flutter

Hiroki Matsue
September 06, 2019

Getting Screenshots Automatically in Flutter

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

Hiroki Matsue

September 06, 2019
Tweet

More Decks by Hiroki Matsue

Other Decks in Technology

Transcript

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

    View Slide

  2. https://itsallwidgets.com/flutter-app/mioswitch

    View Slide

  3. This talk is about
    Getting Screenshots Automatically

    View Slide

  4. 2 usage of sceenshots
    • Golden file testing
    • Catalog / Styleguide / Previews on Store

    View Slide

  5. Golden files

    View Slide

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

    View Slide

  7. https://github.com/flutter/goldens/tree/master/packages/
    flutter/test/material

    View Slide

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

    View Slide

  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" -

    View Slide

  10. Catalog / Styleguide

    View Slide

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

    View Slide

  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

    View Slide

  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
    ...
    */

    View Slide

  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 Sample App Catalog page lists all of the sample apps.







    ...

    View Slide

  15. Result
    !

    View Slide

  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

    View Slide

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

    View Slide

  18. 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'));

    View Slide

  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.

    View Slide

  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

    View Slide

  21. Thanks

    View Slide