Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Screenshots Automatically in Flutter

Hiroki Matsue
September 06, 2019

Getting Screenshots Automatically in Flutter

"Flutter Meetup Tokyo #11"でのLT資料です。

Hiroki Matsue

September 06, 2019

More Decks by Hiroki Matsue

Other Decks in Technology


  1. 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
  2. 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 ... */
  3. 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> ...
  4. 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
  5. 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'));
  6. 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.