Your Second Flutter App

Nov 30 2021 · Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 3: Navigate & Animate

22. Utilize Dart Dev Tools

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 21. Use a Hero Animation Next episode: 23. Conclusion

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

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.