Flutter
Published in

Flutter

New tools for Flutter developers, built in Flutter

Why we rebuilt Dart DevTools from scratch in Flutter

By: Filip Hracek & Chris Sells

Today, we’re releasing a new version of Dart DevTools, our suite of tools for debugging and performance analysis for Dart and Flutter code. It has been rebuilt from scratch in Flutter. This version adds several improvements, such as updates to the performance and memory pages, and a completely new network page.

Many people know Flutter for its hot reload feature that lets you make changes to your mobile app while it’s running. But hot reload is but one of a suite of tools that we provide to help you write, test, debug, and analyze your app.

Let’s first take a moment to discuss why we rebuilt DevTools in the first place. The short answer is productivity and quality. The Flutter team understands the productivity benefits of Flutter when building beautiful, high performance UIs — and we want those benefits for ourselves. This productivity has enabled us to not only rebuild DevTools but also to add big new features along the way.

We chose to ship DevTools as a web application, since it is easy for us to integrate into the existing tooling experience across all of our target platforms and IDEs. Building with the web in mind has also enabled us to walk in the shoes of our customers; in doing so, we’ve learned about (and fixed) some performance issues, such as scrolling performance.

We have also been evaluating the benefits of shipping DevTools as compiled desktop apps and so far the results are promising. One major benefit of choosing Flutter is that selecting a distribution model is something we can do after we’ve written the code, rather than the first decision we have to make. Many customers also tell us that this is an attractive capability of Flutter.

Now that we’ve discussed a little bit about the near past and new future of DevTools, let’s dive into a quick overview of all of the major tools available to every Flutter developer. Because DevTools is not the only tool worthy of your attention.

The basics

Of course, there’s the flutter tool, which runs your app in debug mode, performs hot reload, builds APKs and IPAs, and more. The flutter tool is written in Dart, and runs on the command line, so that you can use Flutter no matter which operating system or editor you prefer.

The Dart analysis server provides static analysis and intelligence in a variety of IDEs. This means that you get code completion …

This happens to be VS Code, but all the examples here work in Android Studio as well, of course.

… error highlights that link to documentation on how to fix them

For the most common static errors, IDEs link to a longer version of the error message, including example code and common fixes.

… and smart lints.

Here, the analyzer detects that a Sink is created but is never closed — a possible memory leak.

The analysis server can also use the Language Server Protocol, which means all the developer tools that use it (and there are many) can easily support it.

UI code helpers

With Flutter, you build UI in code by creating widget trees. This means that a lot of Dart code is in the form of nested constructors like the following:

return MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome'),
),
body: Column(
...
),
),
);

Flutter tooling makes it easier to work with code like this. UI guides highlight the widget tree that you are building.

The lines on the left, called UI guides, explicitly visualize the widget tree.

Trailing comments can show which closing bracket belongs to which widget.

The comments here are shown by the IDE but are not actually part of the file.

Smart refactoring helps you modify the tree in a few strokes, such as wrapping a part of it with a new parent …

Wrapping an IconButton with a SizedBox.

… and moving widgets around.

DevTools

And then there are DevTools, a standalone suite of tools that run in the browser. They provide additional telemetry and functionality that isn’t practical to show in the IDE.

DevTools open in a browser window.

The DevTools we’re launching this week are written in Flutter. (They were previously written in Dart, but not using the Flutter framework.) This was a complete rewrite from scratch, which brought opportunities to improve the UI and add completely new features.

The first tab is the Flutter Inspector, which is a tool for visualizing and exploring Flutter widget trees. From here, you can select widgets in your running app, slow down all animations, see text baselines, and more.

One of the new features is the Layout Explorer, which you can find in the Flutter Inspector tab next to the Details Tree. The Layout Explorer lets you inspect Flutter’s flex layout model. This can be a lifesaver when you’re unsure why a row of widgets doesn’t look the way you expected, for example, or why you’re getting the “RenderFlex overflowed by 42 pixels” error.

Next to the Flutter Inspector tab, you’ll find three tabs dedicated to performance profiling: the Timeline view, the Memory view, and the Performance view.

The Timeline view now shows build times for each frame as well as a flame chart. This makes it easy to identify problematic frames while seeing them in context.

The Timeline pane also has the new Track Widget Builds button, which adds build times of all widgets in your app to the timeline (at the expense of performance of your profile build — which is why it’s not on by default). This is handy when you’re trying to find out which widgets, exactly, are behind a slow frame.

The Memory view lets you peek at how your app is using memory at a given moment. This view now shows a heatmap of the allocated memory, and allows tracking platform memory as well.

The Performance view is a traditional CPU profiler. It lets you record a session of your app, and see in which functions the CPU spent most of its time, overall. This is generally used to decide where to spend optimization efforts.

DevTools even includes its own Debugger. This can be useful if you are not using an IDE for development, but still want the option to add breakpoints, step through the code, peek at variable values, and so on.

The next tab is completely new. The Network view lets you inspect, you guessed it, network traffic. You can see the whole history of requests that your app made since it started, and detailed information about each one. This frees you from having to log these events on your own when trying to debug a network issue. The Network tab currently shows HTTP traffic; future improvements include showing general socket I/O traffic.

You’ll now also find network requests in the Timeline view, so that you can see them in context.

The Logging view shows events from your app and the framework. With it, you can easily filter messages (for example, you can specify -gc to filter out Garbage Collector events, or flutter.frame to only show frame events). In Dart, logging messages can be structured, and the Logging view makes use of that.

DevTools work for mobile apps, desktop apps, and web apps.

The rewrite of DevTools to Flutter has many benefits: increased productivity, walking in the shoes of our customers, and freedom of choice of target platforms. One benefit we haven’t mentioned: rebuilding DevTools in Flutter invites the community to contribute more easily. DevTools was always developed in the open, but today, most users will be familiar with its structure (starting with runApp(DevToolsApp(…)) in lib/main.dart).

Summary

Tooling is vitally important for the Flutter developer experience. We invest heavily in making it better every day. But we can only do this with your feedback.

So upgrade to the newest DevTools today, and test it out on your app. Read the documentation to learn about all the hidden gems. File bugs if you find them, or vote for new features on GitHub.

We hope the new DevTools make your Flutter development experience more enjoyable.

--

--

--

Flutter is Google's mobile 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

Recommended from Medium

Convert TensorFlow Object Detection Model into Bytes file for Unity 3D Using FreezeGraph Method

Root Me: SSL — HTTP exchange

Building Modern Data Lakes with MinIO : Part 3

How to Start Learning RPA ?

Get Started with Airflow + Google Cloud Platform + Docker

Meet the Anvs Team

Your Project is in Trouble, What Do You Do?

Automating job searching and filtering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Filip Hracek

Filip Hracek

Developer and manager working on Google’s Dart programming language and Flutter SDK; gamebooks enthusiast; https://filiph.net

More from Medium

Why is Flutter Fast? — Part 1: Sublinear Building

Flutter Blocs: A Simple Introduction

A package for request

Dart control flow statements.