Google Flutter DevTools – Improving the developer experience

Flutter is Google’s open-source framework for building high-quality apps for mobile, web and desktop – all from a single codebase. Alongside Flutter, DevTools runs as a browser-based tool for debugging and performance monitoring.

When usability challenges were identified in DevTools, Google asked Codemate to help improve the user interface. The goal was to make DevTools a more intuitive, developer-friendly tool for everyday use.

Flutter – the fastest-growing UI framework

Flutter’s growth isn’t just driven by great tech – it’s powered by an active developer community. While Google leads the framework’s development, Flutter is open source, with contributions from developers around the world – including the Codemate team.

We’ve been working with Flutter since the early days. We developed one of the first commercial Flutter apps, which was showcased at Google I/O in 2019, when the technology was still in beta. Later, we also built one of the first Flutter web applications, which was presented at a meetup organised together with Google.

Since then, we’ve designed and launched over 80 Flutter-based applications, including projects for Moi Mobiili, Burger King Finland, and Schaeffler. Our team also actively contributes to Flutter and DevTools open-source projects.

Explore our Flutter work here

In 2021, we launched our dedicated Flutter unit: Rebel App Studio by Codemate, which is listed in Google’s official Flutter Consultant Directory. 

How we improved the developer experience

Codemate’s designer and developer team worked closely together to deliver the improvements in just two months – using an agile, user-centred approach.

• User research and usability testing helped identify the pain points in DevTools.
• The UI was clarified, especially around visual debugging.
• Icons, buttons and tooltips were redesigned to be more intuitive and readable.
• Finding and identifying Flutter widgets became faster and easier.
• Visual themes were unified across views to ensure a consistent look and feel.

Our Flutter developers implemented the changes in Dart and contributed them directly to the public DevTools GitHub repo – following open source best practices.

“It was really interesting to dive deeper into what actually improves the developer experience. Making it easier to find widgets was a meaningful and concrete improvement,” Codemate’s designer highlights.

“Flutter DevTools is built with Flutter. I think that’s a pretty cool detail — when you debug your Flutter app, you’re doing it with Flutter,” says Codemate’s Flutter developer.

Results

The updated DevTools was well received by the Flutter community. Developers now have a tool that makes everyday debugging and performance analysis smoother and easier to understand.

Google especially appreciated the close collaboration between design and development – and Codemate’s ability to move fast and contribute meaningfully to the Flutter ecosystem. Our work with Google continues as we support the growth of Flutter and open source tools.

DevTools improvements were also featured in an official Flutter release:

Read more: What’s new in Flutter 2.5

FAQ

What is Flutter?

Flutter is Google’s open-source UI toolkit for building native-quality apps for mobile, web and desktop using a single codebase.

What is Flutter DevTools?

DevTools is a browser-based tool for debugging, performance monitoring and app structure analysis in Flutter projects.

How is Codemate involved in the Flutter community?

Codemate is one of the early adopters of Flutter. Our dedicated Flutter unit, Rebel App Studio by Codemate, is listed in Google’s Flutter Consultant Directory.

Was this project open source?

Yes. All improvements were contributed directly to the public DevTools GitHub project as pull requests — available for the whole Flutter community.