Flutter DevTools

Flutter is Google’s UI toolkit for develop natively compiled applications for mobile, web, and desktop from single codebase. Flutter considered as most fast growing hybrid mobile application development framework now. In this blog article discuss about flutter’s suite of performance and debugging tool. It is Flutter DevTools.

Flutter DevTools help developers to check how an application is working for different situations. Flutter DevTool is not just a single tool it’s a set of tools which includes:

· Timeline view

· Memory view

· Performance view

· Network view

· Debugger and more

Each of these tools has it’s own various purposes. These tools will show the developer, how the application is performed. Using that DevTool information developer can easily identify some problems & errors. After that developer can fix or improve these things and manage application footprints easily and properly. These tools help developer to increase productivity of application.

Let’s dive deeper and look at some most important tools of Flutter DevTools. First before use it we must know how to install dev tools on IDE

· Install Flutter DevTools on Android Studio and IntelliJ

Step 1: Install the Flutter plugin in Android Studio or IntelliJ. (You can search flutter in the marketplace and install the plugin.)

Step 2: First you need to run a Flutter app on a connected device.

Step 3: After running the application you can open flutter DevTools from the toolbar/menu in your flutter project.

· Installing Flutter DevTools from VS Code

Step 1: In vs code you need to install the Dart extension and Flutter extension for debugging flutter applications.

Step 2: Then Start debugging by clicking Run >> Start Debugging

Step 3: After debugging started, the Dart Opens DevTools command available in the VS Code command palette and you also you can open Flutter devTools by clicking Flutter devTools icon

Connect DevTools to Relevant application

After set up all things you can debug flutter application and by opeaning Flutter DevTools simply open Chrome or your chromium browser window and navigating to the

http://localhost:9100

After DevTools opens, the dialog box pop-up and you will get the Login window in web browser. After by using given URL(URL Show on terminal of IDE) you can connect your application to Flutter DevTool.

Flame Chart

This frame chart contains Flutter’s frame information about application. Every single bar in the chart represents a single Flutter frame. The bars, which are color-coded to highlight the different portions of work that occur when rendering a Flutter frame. After recording for some time developer can find out which stack is taking more time than it should and try to modify it somehow and cut the time it spends on CPU. Using these report, developer can improve flutter applications performance.

CALL TREE

The call tree displays the method trace for the CPU profile. This table of call tree is a top-down representation of the profile which means that a method can be expanded to describe its callees.

Total time: Total Time shows total time spent by this method and its children.

Self-time: Self-Time shows time spent on CPU by only that method. This doesn’t include time spent by children.

Method: Method shoes name of the method. We can click little expand icon beside the name of the method to see its child.

NETWORK VIEW

In this era most of the applications are using internet connected services. So, there is high percentage of chance most of the applications use internet.

Now we don’t want our application to make too many requests or download large amount of data every time page is changed. This will make our app feel less responsive and there will be some latency between application and app user.

So, using a network view developer can track network usage. And the network view allows developer for inspecting web socket traffic like HTTP and HTTPS from your Dart or Flutter application. It helps to develop great application with high performance.

Memory View

The allocated object in any application created using a class constructor (like using new MyClass() or MyClass()) live in a portion of memory known as the heap. Memory page in DevTools lets you peek at how an isolate is using memory at a given time. With the help of Monitor Allocations and Reset options, anyone can analyze accumulator counts. The accumulators can be used to study the rate of memory allocations for any dart app, if you suspect your application is leaking memory or has other bugs relating to memory allocation you can easily figure out it on the memory page. Memory profiling contains six parts:

1. Chart of Memory overview

2. Chart for Android-only memory

3. Event timeline

4. Monitoring and setting up of Dart total instances, size, and accumulator monitoring to detect memory leaks in applications

5. Snapshots of all live memory class instances, sentinels, etc.

The Performance view:

The performance view provides us feature to record and profile a session from your Dart or Flutter application. If you are running a Flutter application, please build a profile build to analyze the performance of your application.

Flutter Inspector

Getting confused between how you expect your widget tree vs one you are seeing on screen? Well, your savior is here. Flutter Inspector is a helping tool rather than performance measurement tool like all those we have seen before this.

Flutter inspector will show us our exact widget tree. This will help us understand our current tree and find out the issues that may cause your UI to looks different or not same as your expectation.

Here we can see perfect hierarchy of our widget tree. It is easier to find out which widget is out of position or causing some problems. Once we determine which widget is part of the problem, we can just click the name of the widget on right hand side and tool will automatically take you to definition.

Flutter Layout Explorer

The Layout Explorer visualizes how to Flex widgets and their children. The explorer identifies the main axis and cross axis and the current alignment in your application when you debugging it. Also, explorer shows layout constraint violations and render overflow errors in your app. During debugging sessions violated layout constraints are colored red, and overflow errors are presented in the standard “yellow-tape” pattern, as you might see on a running device in your emulator. All the above and following visualizations aim to understand easily, why overflow errors occur as well as how to fix them.

App size Tool

The app size tool frees you to analyze the total size of your app and can view a single snapshot of “size information” using the Analysis tab, or compare two different snapshots of “size information”, which contains size data for Dart code of your application. The flutter compiler attempts to optimize your app’s size by removing pieces of code that are unused or unreachable(garbage code) in your application.

Analysis tab

In the analysis tab you can view the hierarchical structure of the size data using the treemap and table, view code attribution data (i.e. why a piece of code is included in your compiled application) using the dominator tree and call graph.

Usage of DevTools:

The Flutter DevTools can be used to perform a number of operations. Some of them are listed below:

UI inspection.

App state inspection.

Diagnose UI junk performance.

Diagnose issues with flutter apps.

DevTools use for CPU profiling.

Network profiling for an app.

Source-level debugging of an app.

Debug memory issues in a Flutter or Dart or command-line app.

View general log and diagnostics information of an app.

Analyze your code and app size of the flutter app.

The following table shows which tools you can use with common Dart app types.

Use all these powerful tools to standout and improve quality of your application drastically. And power up your flutter mobile, web, desktop applications.

--

--

--

Flutter Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Location Based Access Control — GSoC 2019 with OpenMRS

Introduction to Solidity — Blockchain Guide for Everyone

prefect dag scheduling — cloud

Flutter and Dartea — create mobile application with pleasure.

Getting OpenAI Atari on Windows 10

Progressing the web

Storing BASH Scripts from EC2 instances on Github

Let’s Play With Routing Tables

Routing tables, Networking

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
Thilina Weerasinghe

Thilina Weerasinghe

Flutter Developer

More from Medium

Guide to Flutter Architecture

I Used Flutter To Build My Dream App

MVP architecture pattern in Flutter

Why Should Startups Choose Flutter To Develop Mobile Apps in 2022?