Debugging Layout Issues Using the Widget Inspector

Implementing Responsiveness

All the fixes and fancy widgets you’ve used until now will be fruitless if you don’t handle device orientation. A well-implemented screen responsiveness solution will go far in improving your app’s UX.

Change the device orientation from portrait to landscape. The solar system pageview will remain more or less the same in both orientations. But the details page is a different story. Because Column is a non-scrollable widget, if it does not get enough height, Flutter probably will show an overflow warning. Layout Explorer itself will display a different message as well for the Column height.

Consult the Layout Explorer for a deeper dive into the issue.

Comparing the Layout Explorer blueprint in portrait and landscape orientations, you can see the width and height have switched places more or less. But because the dimensions of the widgets remain the same and only the constraints passed down by the widget tree are now different, you get the overflow warning.

As a limited solution, widgets such as GridView allow setting the total column count. Using MediaQuery.of(context).orientation should handle the orientation change for GridView easily.

Open lib/widgets/moons_grid.dart and replace crossAxisCount below //TODO add MediaQuery flag with the following snippet (To remove the compile-time error, you might need to remove the const modifier.):

crossAxisCount:
   MediaQuery.of(context).orientation == Orientation.portrait
    ? 3
    : 6,

Hot reload and see the GridView column count change with every orientation change.

However, OrientationBuilder is the standard widget used to handle orientation changes.

Open lib/details.dart and replace the Column below //TODO add OrientationBuilder with the following snippet:

return OrientationBuilder(builder: (_, orientation) {
  if (orientation == Orientation.portrait) {
    return _DetailPortrait(path: path, member: member);
  } else {
    return _DetailLandscape(path: path, member: member);
  }
});

Hot reload and see the details page change UI according to the device orientation.

Where to Go From Here?

Download the final project by clicking the Download Materials button at the top or bottom of this tutorial. You have gotten an introduction to the Widget Inspector, learned the concept of constraint flow and used the following widgets to overcome specific UI issues:

• OverflowBox: Imposes constraints different from the ones set by the parent widget.
• FittedBox: Scales content according to the size of the parent widget.
• Expanded: Ensures the content occupies the available space either vertically or horizontally.
• UnconstrainedBox: Renders the content at its natural size unconstrained.
• LimitedBox: Constrains the content even if the parent does not impose any constraints on it.
• FractionallySizedBox: Constrains the content to a certain fraction of the parent dimension.
• OrientationBuilder: Ensures the layout reacts properly to orientation changes.

To dive deeper, check out the following resources

• Visit the Flutter widget catalog to learn about even more useful widgets.
• Learn about slivers which are another important part of UI design in Flutter.
• Dive deeper into the subject of constraint flow.
• Study the Dart devtools in greater depth including the Widget Inspector.

If you have any questions, comments or suggestions, feel free to join the discussion below!