Your Second Flutter App

Dart Dev tools are a suite of debugging tools that are installed when you install the Flutter and Dart extensions in Visual Studio Code. They can also be installed in Android Studio or from the command line.

There’s a whole set of tools available to use with your Flutter app, including memory and performance profilers. In this episode, you’ll see how to start the dev tools and use them to slow the hero animation added in the last episode.

To get started, open your project in progress and download a starter project. I’m going to start mine in an Android emulator. Once you have your app up and running, you may get prompted to open the dart dev tools. I

In my case, I’m going to open the command palette by selecting View and then Command Palalette. Search for Dart: Open Dev Tools. Select that option and then choose Open Dev Tools in Web Browser.

This is going to open all the dev tools in your default web browser. You can see the different tabs for all the main aspects of the dev tools such as the Inspector, Performance, CPU Profiler, Memory, and a bunch of tools to inspect your app.

There are a great many tools for you to debug any issue with your app. For instance, if you wanted to see how items are laid out, select the Show Guidelines

Now turn that off and let’s take a look at the animation. We can do this with the Slow Animations option. Now when you tap on a course image, you’ll see the animations slowly appear on screen. Now turn off the animations and its back to normal. We can do an entire course on the set of tools. For now, feel free to explore and see what options are available to you.