Flutter — Debugging UI Cheat Sheet

Today i will teach you how to debug your Flutter UI app and Gestures. Later I will write a new Cheat Sheet about gestures and how to use it.

Let’s start with the below code.

First we need to import rendering.dart from flutter.

import 'package:flutter/rendering.dart';

debugPaintSizeEnabled

What debugPaintSizeEnabled do???

Causes each RenderBox to paint a box around it’s bounds, and some extra boxes, such as RenderPadding, to draw construction lines.

• The edges of the boxes are painted as a one-pixel-thick outline “Color(0xFF00FFFF)”.
• Spacing is painted as a solid “Color(0x90909090)” area.
• Padding is filled in solid “Color(0x900090FF)”, with the inner edge outlined in “Color(0xFF0090FF)”
• Scroll are marked with two big green arrow with a big dot on the start point.
• Alignment are marked in yellow arrows

Let’s add debugPaintSizeEnabled = true in the main function and see what going on.

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

Every-time you need to add new property, you should restart the app not hot reload.

When the app start you should see the below screen.

debugPaintSizeEnabled = true;

In the below image you can see the image has padding from all sides same size. Two yellow arrows for the alignment. Has a margin from top and padding from all sides also.

Here below, we have a horizontal list view and inside it a vertical list view that it is marked with the two green arrows

debugPaintBaselinesEnabled

It causes each RenderBox to paint a line at each of its baselines.

Now lets remove debugPaintSizeEnabled and add debugPaintBaselineEnabled then restart the app.

debugPaintBaselinesEnabled = true.

Here in the picture above you can see a green line below “JLouage”. This is the baseline.

debugPaintLayerBordersEnabled

It causes each layer to paint a box around it’s bounds.

Now let’s remove debugPaintBaselineEnabled and add debugPaintLayerBordersEnabled = true and restart the app.

debugPaintPointersEnabled

It causes objects like RenderPointerListener to flash while they are being tapped. This can be useful to see how large the hit box is, e.g. when debugging buttons that are harder to hit than expected.

Let’s remove the debugPaintLayerBordersEnabled and add debugPaintPointersEnabled = true; Restart our app. Then clicking on the JL image.

We can see in the above image the marked green with the opacity around the image. This is when the user can tap.

let’s try scrolling the list view.

also the list view is marked green with opacity.

debugRepaintRainbowEnabled

It overlay a rotating set of colors when repainting layers in checked mode.

Let’s try it.

debugRepaintRainbowEnabled = true;

and the first result is in the below image

Let’s scroll the list view and check what happened

We can see that all the widget that have rebuilt have changed the border color.

debugRepaintTextRainbowEnabled

It Overlay a rotating set of colors when repainting text in checked mode.

Let’s try it.

debugRepaintTextRainbowEnabled = true;

Let’s scroll the list view.

We can see in the above image that the color overlay has changed because the text has been repainted.

debugCheckElevationsEnabled

It causes PhysicalModelLayer’s to paint a red rectangle around themselves if they are overlapping and painted out of order with regards to their elevations. Android and iOS will show the last painted layer on top, whereas Fuchsia will show the layer with the highest elevation on top. This check helps developers that want a consistent look and feel detect where this inconsistency would occur.

Let’s try it.

debugCheckElevationsEnabled = true;

As you can see in the above image the two containers are marked in red because the material in the stack, the one that is on the back has elevation 17 and the one in front has an elevation 16.

debugdisableClipLayers

Setting to true will cause all clipping effects from the layer tree to be ignored. Can be used to debug wether objects being clipped are painting excessively in clipped areas. Can also be used to check wether excessive use of clipping is affecting performance. This will not reduce the number of Layer objects created; the compositing strategy is unaffected. It merely causes the clipping layers to be skipped when building the scene.

let’s try it:

debugDisableClipLayers = true;

You can see in the above image that the green rectangle is not clipped trying to slide the vertical listview you will see that when a container is built it will not be clipped.

debugDisablePhysicalShapeLayers

Setting to true will cause all physical modeling effects from the layer tree, such as shadows from elevations, to be ignored. Can be used to check wether excessive use of physical models is affecting performance. This will not reduce the number of Layer objects created; the compositing strategy is unaffected. It merely causes the physical shape layers to be skipped when building the scene.

debugDisablePhysicalShapeLayers = true;

debugDisableOpacityLayers

Setting to true will cause all opacity effects from the layer tree to be ignored. An optimization to not paint the child at all when opacity is 0 will still remain. Can be used to check whether excessive use of opacity effects is affecting performance. This will not reduce the number of Layer objects created; the compositing strategy is unaffected. It merely causes the opacity layers to be skipped when building the scene.

Let’s try it

debugDisableOpacityLayers = true;

You can see in the above image that the second container has an opacity.

Hope you enjoy the article! Leave a comment below or tweet me if with any questions / suggestions!

Julien Louage (@JLouage) | Twitter

Julien Louage

JLouage.com