Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Dart Dev Tools are a suite of debugging tools that are installed when you actually install the Flutter and Dart extensions in Visual Studio Code. They can also be installed from Android Studio or from the command line as well. Now there's a whole bunch of tools available to use with your Flutter app, including memory and performance profilers. Now, 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 or download the starter project for the episode. I'm going to start my project in an Android emulator. Once you have your app up and running, you may be prompted to open up the Dart dev tools. In my case, I'm going to open up the command pallet by selecting View and then Command Pallet. I search for Dart Open DevTools. If you are following along, select the option and then select Open DevTools in a Web Browser. This is going to open all the dev tools in your default 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 want to see how your widgets are laid out, select the Show Guidelines button. Now turn that off. Let's take a look at the animations. We can do this with a Slow Animations option. Now, when you tap on a course image, you'll see the animation slowly appear on screen. Now turn off the slow animations and it's back to normal. We can do an entire course on these dev tools. For now, feel free to explore them and see what options are available to you.