[FlutterTips] RichText component overflow in Golden test

Last week, I had to develop a simple card with a Text surrounded by two Icons. Everything worked fine on my device, I was happy with my brand new widget, until I had to test it with a golden test.

Golden tests are basically Widget tests: your widget is tested on multiple frame resolutions and multiple screen ratios. In my case, I saw an overflow with a golden case, which was nice !

When an overflow happens, you’ll see yellow & black stripes indicating the area of overflow in the app

The solution came with the Expanded widget. This widget allows the child to resize itself to fill the available space. It has to be a descendant of a Row, Column or Flex. You can find a short presentation of this widget in this video.

You can find a snippet of my widget below:

You can find the projet of this article here

Hope this helps !