verify_code
Compare Flutter code to a Figma design by rendering both at 2x and reporting analyzer/runtime errors, pixel differences, and a visual diff. Use after implementing a frame to fix mismatches.
Instructions
Check Flutter code against the design: analyzes it, renders it with flutter test at 2x, and compares the render with Figma's own 2x render of the node. Returns analyzer errors, runtime errors (overflows, missing assets), the share of differing pixels and a diff image (the design in grey, differing pixels in red).
With file, it checks that widget inside its own Flutter project: the project's packages and assets, inside a MaterialApp, scaled by flutter_screenutil to the frame size when the project uses it. The widget needs a constructor without arguments. Without file, it checks the reference code get_design_context generates and also compares every layer's box. Use it after implementing a frame, and fix what it reports. Text in fonts it cannot find is drawn in a fallback font, and emoji have no colour font in the test, so text after them shifts. A run takes from 20 seconds to a few minutes.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| file | No | The .dart file with the widget, under the project's lib/ (absolute, or relative to the project). | |
| fonts | No | Folders with font files (default: the project's assets/fonts and the system fonts). | |
| nodeId | No | The ID of the node, eg. "123:456" or "123-456" (instance ids like "I1:2;3:4" work too). Omit it to use the current selection in Figma. | |
| widget | No | The widget class in `file` (default: its first widget class). | |
| fileKey | No | The key of the Figma file. Accepted for compatibility; the file open in Figma Desktop is always used. | |
| flutter | No | Path of the flutter tool, when it is not on PATH. | |
| viewport | No | Lay the code out on a screen of this size, e.g. "360x780", and report runtime errors (overflows) and layers pushed off screen instead of comparing. |