Raise your hands if you use Flutter for mobile development. I like Flutter. It has a nice basic UI, and the apps are indeed “fast and beautiful” as advertised. However, one thing that can be a pain, are those annoying UI overflows. You know what I’m talking about. You create a Column widget, and put some other widgets inside, and when you run it on the emulator, you get the black and yellow stripes in certain areas. The debug message shows something like “overflow by 19 pixels” or some nonsense. This really doesn’t happen with other coding languages, so it can leave one feeling frustrated and confused as to how to resolve the issue. Granted, Flutter has very helpful error messages, that say something to the effect of “try and wrap it in an Expanded widget”, but sometimes finding what is causing the overflow is not as simple as the error message would lead you to believe…
Enter the Widget Inspector. This is a debugging tool that’s built into Flutter itself. If you Google “how to fix Flutter overflow” or something along those lines, you’ll probably find some posts that direct you to using the Widget Inspector. But where exactly is the Widget Inspector? You’d think it’s in the horizontal menu on top, but it’s not there (it should be). It’s actually on the horizontal menu on the bottom, with all the other stuff that you just glanced over and thought was maybe there just for decoration. More specifically, you’re looking for the “Dev tools”, and from there, you’ll be able to find the Widget Inspector…
Ok, so how does one use the Widget Inspector? Let’s go over one example, a pretty common one, kind of like the scenario proposed above. You are trying to place widgets in a column, and get the overflow in debug mode, and it says “bottom overflow by 19 pixels” or something like that. Now, pull up the Widget Inspector (if in debug mode, there is a popup for the overflow that has a button to “inspect” that will also pull it up). Now, the click on the magnifying glass looking icon on the top left of the Widget Inspector. This will bring up a list of all the widgets in the app. From there, click on the main widget that is the source of the overflow (the debug message will usually tell you what the widget is, something like “the offending widget is Column”). You will see an image of how the parent widget sits in relation to the child widget(s) in the middle right portion of the inspector. If you don’t see the black and yellow stripes, then there is no overflow, but there really should be overflow if you’ve selected the correct widget. Now, this image will show the width and height of the parent and child widgets, and you’ll see that, oftentimes, the child widget is bigger than the parent widget, causing the overflow. Simply wrap the child widget in an Expanded widget, and that should solve the overflow issue. Note that there may be multiple offending child widgets inside the main parent widget, so you’ll want to wrap each one in an Expanded widget…
And there you go, you’ve inspected your gadget!
