Blog de Joe Freeman

Creating tests for various size viewports can help us look for wrapping and sizing regressions.  Our goal is to run the same test across several different-sized displays looking for regressions in the individual display sizes. We can do that by sizing the canvas just before loading the widget tree and running the golden test comparison.  We need either the viewport size for the device or the raw size of the device in pixels and its DPR. So currently this test code accepts the raw size and the DPR.  The alternative is to just run the MediaQuery against the device and accept its width and height with a DPR of 1.0.  The test code below supports both. Test Code There are two tests, one for the Pixel 3a and the other for the Pixel 4XL.  Both tests pass in the raw pixel size and the Flutter DPR. The test  Sizes the canvas to the device geometry. Brings up the demo app Creates/validates a golden image snapshot of the viewport The test app is the MediaQuery code listed in a previous blog artic

We wanted to verify our layout behavior across various screen widths, especially across layout change boundaries. Ex: Change field sizes, expose menus, or make other items at higher widths.  Mobile devices have high-resolution screens that are logically down-scaled for sizing display widgets essentially using a logical resolution. I ended up writing this simple MediaQuery program that tells me the  effective  size of the screen of a device. This lets us build a library of test device resolutions and aspect ratios. We can run the same test across as many devices as we wish because computing is cheaper than manual testers. Flutter golden image tests are a simple way to watch for layout regression.  They compare a stored image against a new image captured during test execution.  The base behavior is that they open an 800x600 canvas and use that.   We can change the size of the test canvas where the golden test images are rendered. What if we want to work in the opposite direction starting