Use Android Studio for Flutter development

This article will review with you how to configure Flutter tools in Android Studio.

Create project

You can create a new project in many ways.

640?wx_fmt=jpeg

Create new project

Use the Futter application template to create a new Flutter project:

In the IDE, click on the Welcome window or Create New Project in the main window File> New> Project .
Select Flutter in the menu and click Next .
Enter your Project name and Project location .
If you plan to publish this application, you need to set the company domain name ⚠️.
Click Finish .

⚠️ About setting company domain name

“
When creating a new application, some Flutter IDE plugins require a reversed domain name, for example com.example. In addition to the program name, after the application is released, it will serve as the package name of the Android application and the Bundle ID of the iOS application. If you may publish this application, it is best to specify it now, and you cannot change it after the application is published. Your domain name should be unique.
”

Create a new project from existing source code

Create a new Flutter project containing the existing Flutter source code:

In the IDE, click on the Welcome window or Create New Project in the main window File> New> Project .

“
For Flutter project, please do not use the New> Project from existing Sources .
”

Select Flutter in the menu and click Next .
Under Project location , enter or select the file directory of the existing Flutter source code.
Click Finish .

Edit code, and view issues

Code analysis of Dart plug-in can do:

Syntax highlighting.
Code completion based on multiple types of analysis.
Locate the type declaration ( Navigate> Declaration ) and find the type reference ( Edit> Find> Find Usages ).
View the existing code problems ( View> Tool Windows> Dart Analysis ), all problems will be displayed in the Dart Analysis window

Dart Analysis window

Run and debug

You can debug your application in the following ways:

Use Developer Tools (DevTools), a series of debugging and analysis tools running in the browser, including Flutter inspector , which replaces the previous Observatory analysis tools.
Use the built-in debugging functions of Android Studio (or IntelliJ), such as setting breakpoints.
Use Flutter inspector, built in Android Studio and IntelliJ.

The following introduction articles apply to Android Studio and IntelliJ. For more information about developer tools, please refer to the document: Install and run developer tools on Android Studio.

In the main toolbar, you can run and debug code:

IntelliJ's main toolbar

Select target device

When you open a Flutter project in the IDE, you will see a set of Flutter-specific buttons on the right side of the toolbar.

“
If the Run and Debug buttons are not available and the target device is not displayed, it means that Flutter has not found any connected iOS, Android devices or emulators. You need to connect the device or start the emulator to continue.
”

Find the select target drop-down button and click it to display a list of available devices.
Select the device you want to launch the app. When the device is connected or the emulator is started, new options will be added to the list.

“
If you run your Flutter application on the web platform, but you can't find the Chrome (web) device, please make sure that you have turned on the web support first. Please see more in this document: Use Flutter to build web applications.
”

Run the application without breakpoints

Click the Play button in the toolbar, or select Run> Run . The Run window at the bottom will have log output:

Run the application with breakpoints

If necessary, set breakpoints in the source code.
Click the Debug button in the toolbar, or select Run> Debug .

The Debugger window at the bottom will display stack and variable information.
The Console window at the bottom will display detailed log output.
Debugging is based on the default startup configuration. If you need to customize it, click the select target drop-down button and select Edit configuration to configure.

Quickly edit and view effects

Flutter effectively speeds up the development cycle. Use hot overloaded function, you can modify the source code, almost immediately see the effect. For details, please refer to Using Hot Reload.

Display performance data

“
To check performance issues in Flutter, please check the timeline view documentation.
”

After starting the application in Debug mode, use View> Tool Windows> Flutter Performance to open the performance tool window to view performance data and widget reload information.

Flutter performance debugging window

Click Show widget rebuild information in the Performance window to view the widget statistics and reload frequency that are being reloaded. The second column on the right shows the number of reloads of the frame. If there are too many reloads, a yellow spinning circle is displayed. The rightmost column shows the number of reloads of the widget after entering the current page. For widgets that are not overloaded, a gray circle will be displayed, otherwise a gray rotating circle will be displayed.

“
The application performance in the screenshot is poor. By overloading the analyzer, you can find clues that cause the poor performance. The overload analyzer is not a performance diagnostic tool, but it is related to performance.
”

The purpose of this function is to let you know when the widget is overloaded. It may not be easy to find if you just look at the code. If the widget is overloaded in unexpected circumstances, it means that you may need to refactor the code to split the large-scale construction method into multiple widgets.

This tool can help you debug at least four common performance problems:

The entire screen (or most of the screen) is composed of a StatefulWidget, leading to unnecessary UI construction. UI may be split into a plurality of light amount having a build()widget method.
A widget that is not displayed on the screen has been overloaded. For example, a ListView that extends outside the screen, or the RepaintBoundary is not set for a list that extends outside the screen, will cause the entire list to be redrawn.
AnimatedBuilder the build()method of drawing up a sub-tree does not need animation, causing unnecessary static object overloading.
An Opacity widget uses an unnecessary height in the widget tree, or creates an Opacity animation by directly manipulating the transparency properties of the Opacity widget, causing the widget and its subtree to be overloaded.

You can click on a row in the table to locate the source code location of the specified widget. As the code runs, a rotating icon will also be displayed in the code window to help you observe the ongoing reload.

A large number of overloads does not necessarily indicate a problem. Under normal circumstances, only when you find that the performance is not ideal through analysis, you need to consider the problem of excessive overloading.

Remember, widget overload information is only available in the debug version . Use profile build for application performance analysis on real devices, and use debug build for performance problem debugging.

Flutter code editing tips

If you have other code hint suggestions that we should provide, please let us know!

Code assistance and quick fixes

The code assist function is the code modification related to a specific code identifier. When the cursor is placed on the Flutter widget, the yellow light bulb icon indicating the available modifications, changes may be made by clicking on the lamp, or using keyboard shortcuts (on Linux and the Windows Alt+ Enter, used in macOS Option+ Return), as shown in FIG. :

IntelliJ editing assists

The Quick Fixes function is similar. When a piece of code has an error, it will appear and help correct the error. It is indicated by a red light bulb.

Widget nesting assistance

You can use this function when you have a widget that needs to be nested in other widgets. For example, widget needs to be nested Rowor Columnin.

Widget list nesting aid

Similar to the auxiliary above, but it nests a list of widgets instead of a single widget.

Child and children conversion assistance

Convert child to children, and write the parameter value into a list.

Real-time template

Real-time templates are used to increase the input speed of typical code structures. After entering the prefix, select it in the code completion window:

IntelliJ live templates

The Flutter plugin includes the following templates:

Prefix stless: create a StatelessWidgetsub-class.
Prefix stful: create a StatefulWidgetsub-class, and the associated State subclasses.
Prefix stanim: create a StatefulWidgetsub-class and subclass associated State, contains a AnimationControllerinitialization field.

You can also define custom templates via Settings> Editor> Live Templates .

Keyboard shortcuts

Hot reload

On Linux (the default mapping scheme is XWin ) and Windows, the shortcut keys are Controle+ Alt+ ;and Control+ Backslash.

On macOS ( Mac OS X 10.5+ mapping scheme ), the shortcut keys are Command+ Optionand Command+ Backslash.

You can modify the shortcut keys in the IDE settings: After selecting Keymap , enter flutter in the search box in the upper right corner . Right-click the shortcut key you want to modify, and click Add Keyboard Shortcut

IntelliJ settings keymap

Hot reload and hot restart

The working principle of hot reloading is to inject the updated code into the Dart VM (virtual machine). Not only includes adding new classes, but also adding methods and fields to existing classes. But some types of code cannot be hot-reloaded:

Initialization of all variables
Initialization of static variables
Application of the main() method

For these changes, you do not need to end the debugging process and directly hot restart your application: do not click the Stop button, just click the Run button (while running), or the Debug button (while debugging), or hold down Shift Click the hot reload button.

Edit Android code in Android Studio and get full IDE support

Open the root directory of the Flutter project, and all Android files will not be displayed in the IDE. Flutter application contains a named androidsubdirectory, if you open as a separate project in Android Studio in the directory, the IDE will be able to fully support the editing and reconstruction of all the Android files (such as Gradle script file).

If you have opened the entire project as a Flutter application in Android Studio, there are two ways to open Android files and edit them in the IDE. Before proceeding, please make sure you are using the latest version of Android Studio and the Flutter plugin.

In the "Project View", you can see a flutter in the root directory of the application androidsubdirectory. Right click on it and select Flutter> Open Android module in Android Studio .
Or, you can open androidany file in the directory for editing. You will see a "Flutter commands" banner at the top of the editor, which contains a label of Open for Editing in Android Studio , click on it.

In both methods, Android Studio allows you to choose to use a separate window, or replace the existing window to open a new project, both are possible.

If you haven't opened the Flutter project in Android Studio, you can open the Android file as a project from the beginning:

Click Open an existing Android Studio Project in the welcome window . If Android Studio is already open, you can also click File> Open .
Open the application root directory under the flutter androidsubdirectory. For example, the project name flutter_appis opened flutter_app/android.

If you have not run over your Flutter application may open androidduring the project, see the Android Studio build reports failure. Run the root directory of the project flutter pub getand click Build> Make to rebuild the project to fix the problem.

Edit Android code in IntelliJ IDEA

To edit Android code in IntelliJ IDEA, you need to configure the location of the Android SDK:

In Preferences> Plugins , enable Android Support .
In the project view, right-click the android folder and select Open Module Settings .
In the Sources option, find Language level and select level 8 or higher.
In the Dependencies option, find Module SDK and select an Android SDK. If the SDK is not listed here, click New and specify the location of the Android SDK. Flutter ensure selection and use of matched Android SDK (as flutter doctorshown).
Click OK .

Tips and tricks PDF download

Flutter IDE cheat sheet, MacOS version
Flutter IDE cheat sheet, Windows and Linux versions

Troubleshooting

Known issues and feedback

Known important issues that may affect your experience are recorded in the Flutter plug-in README file.

All known issues will be tracked in the issue tracker:

Flutter plugin: GitHub issue tracking
Dart plugin: JetBrains issue tracking

We welcome all bugs, problems, and feature feedback. Before submitting a new question:

Always search quickly in the issue tracker to see if the issue already exists.
Make sure you have updated to the latest version of the plugin.

When you are submitting a new issue, make sure to bring the operation flutter doctorto return after the contents of the command.

Due to limited space, future articles will no longer manually post links in WeChat channels. If necessary, please click to read the original text to view, thank you!

640?wx_fmt=gif