Sitemap
Flutter

Flutter is Google's UI framework for crafting high-quality native interfaces on iOS, Android, web, and desktop. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

How to debug layout issues with the Flutter Inspector

9 min readJul 27, 2020

--

Table of Contents

What is the Flutter Inspector?

A GIF showing the Details Tree and Layout Explorer features of the Flutter Inspector

The debugging adventure 🤠

End menu app with the fixed issues
$ flutter create menu

Layout problem 1: Overflow error

Overflow error on the Debug Console
Overflow error on the Layout Explorer
Wrap Text with Expanded using smart refactoring on VS Code (similar method on other editors)

Layout problem 2: Unbounded height error

Column(
children: [
// Modify code here
Example2(),
],
)
Unbounded height error on the Debug Console
Layout Explorer doesn’t display grandchildren of Flex widgets.
ListView’s constraints and size on the Details Tree
class Example2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
child: ListView(
...
),
);
}
}

Layout problem 3: Invisible VerticalDivider

Column(
children: [
// Modify code here
Example3(),
],
)
VerticalDivider on the Layout Explorer
Inspecting Row and its children using the Details Tree
class Example3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 50.0,
child: Row(
...
),
);
}
}
Column(
children: [
// Modify code here
Example1(),
Example2(),
Example3(),
],
)

Summary

--

--

Flutter
Flutter

Published in Flutter

Flutter is Google's UI framework for crafting high-quality native interfaces on iOS, Android, web, and desktop. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Katie Lee
Katie Lee

Written by Katie Lee

DA intern on the Flutter team

Responses (8)