Getting Screenshots Automatically in Flutter

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

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