Flutter Widgets finden und untersuchen in VS Code

Flutter Widgets finden und untersuchen in VS Code

Als ich mit der Entwicklung von Flutter angefangen habe, haben mir sofort die Developer Tools gefehlt, wie ich sie von Chrome her kannte. Zum Glück bietet auch VS Code ein integriertes Debugging Tool, mit dem man schnell Bugs in Flutter identifizieren und beheben kann: den Widget Inspector. Mit diesem kannst du einzelne Widgets in Flutter finden und untersuchen. Hier kommt eine kleine Anleitung, wie du den Widget Inspector in VS Code richtig nutzt.

App starten

Damit der Widget Inspector überhaupt angezeigt wird, führe zuerst die App aus. Das geht am Einfachsten mit ‘flutter run’ oder auch über VS Code selbst.

Flutter starten in VS Code

Widget Inspector öffnen

Im Developer Menü siehst du nun eine blaue Lupe. Wenn du diese auswählst, öffnet sich der Widget Inspector.

Flutter Widget Inspector

Ein Element untersuchen

Mit dem blauen Mauszeiger (#1) kannst du nun jedes Element in deiner App untersuchen. Wenn du also auf ein Element in der App klickst (#2), zeigt dir der Layout Explorer, um welches Element es sich handelt und wo es innerhalb der App liegt.

Widget Inspector Layout

Element im Code anzeigen

Wenn du im Widget Inspector auf ein Element klickst, springt er auch im Code automatisch an die Position, wo das Element liegt.

Widget Inspector Code

Elemente noch genauer untersuchen

Im Widget Inspector selbst gibt es rechts noch ein Menü mit fünf Punkten. Hier kannst du zum Beispiel Animationen verlangsamen, um sie besser zu untersuchen, Bilder anzeigen lassen, die zu groß sind und komprimiert werden können und weiteres. Probier es aus!

Elememente noch besser untersuchen

Bonus: Attribute eines Widgets anzeigen

Eigentlich ganz einfach, kennen aber wenige. Wenn du wissen möchtest, welche Attribute ein Widget akzeptiert, kannst du einfach über dem Element hovern. Dann öffnet sich ein Popup, das anzeigt, was du im Widget angeben kannst.

Elememente noch besser untersuchen

Du arbeitest gerne mit VS Code? Dann findest du in diesem Artikel coole VS Code Extensions für Flutter, die du auf jeden Fall kennen solltest: VS Code Flutter Extensions

Werde zum Flutter-Experten

Lerne Flutter von den Profis – persönlich und vor Ort. Mit unseren Flutter-Schulungen kommst du auf nächste Entwickler-Level.

Flutter Schulung entdecken