Even if you haven’t done client development before and haven’t used Android Studio, the friendly interface of Android Studio is pretty predictable

Button to launch the project (which is why the Android Studio editor is recommended above).

Click the start button again

Start the Flutter application.

In the console, the corresponding startup log will be output

At the same time, the mobile emulator has already presented the application. Congratulations, you have successfully launched your first Flutter project! 🎉

Project commissioning

• Hot update

Flutter was developed to support Hot Reload. The title of the Flutter Demo Home Page can be changed to Hello World in the initial project. Save the changes in the editor (CTRL + S for MAC).

In the blink of an eye, the display on the simulator changes.

• Dart language error debugging

Flutter development uses the Dart language and Android Studio will kindly inform us of any syntax errors that occur during Flutter development.

For example 🌰, in the previous code, write some wrong syntax.

The editor tells you what went wrong in a variety of ways.

1) When you save, there will be an error message at the bottom of the editor

2) As you write, the editor tells you in a friendly red wavy line that a line of code has been written incorrectly

3) When you hover over a red wavy line, the editor will also prompt you with a specific error message and possible modification

In addition to the above three ways, Android Studio can also evoke
Dart Analysis, which analyzes Dart syntax errors.

在
Dart Analysis, displays the specific error information and the number of error lines, facilitating error location.

• Application View Debugging

Learn from React. The UIi interface of Flutter is made up of Widgets.

Flutter provides a developer tool that allows you to view your app’s Widgets view.

This tool is very powerful and provides a lot of debugging. The first is the Widgets detection tool, Flutter Inspector, which tracks the selected Widget and renders its properties. (Similar to Chrome’s Inspect tool for Web pages and Firefox’s Inspector)

Graphical display of layout dimensions is also supported for Flex layout Widgets.

However, there is currently no support for displaying Widgets with non-Flex layouts. (Let’s look forward to future DevTools updates.)

• Log print

Log output in our development, can help us track the execution of the program, quickly locate problems. Flutter log viewing is still in DevTools, select the Logging Tab. This section describes two log printing methods.

The first is the STDXX & Print method that comes with the Flutter SDK. (There is no difference between stdout and print methods 😓)

Stdout: ordinary log outputprint: normal log output stderr: error log output (shown in red in the tool)Copy the code

In this way, the official introduction said that there may be omissions when the log is too much (I quickly click the + sign, no recurrence), you can use the debugPrint method instead. DebugPrint is a layer of throttle wrapped around the print method.

Dart: Developer library is available. Dart: Developer library is more powerful than the basic one and can print more information.

Specific use can see the official documentation.

• Breakpoint debugging

Break debugging of Flutter code can be done in Android Studio and DevTools. Since it is much more intuitive to do in DevTools, I will only describe the debugging process in DevTools.

To set breakpoints, click to the left of the line you want to debug.

The breakpoint shown here is set in “functions that respond to click events” to trigger debugging after the Tap event is triggered by clicking the “+” sign. If you’ve ever done breakpoint debugging on a Web page, this will be familiar. There are Step in, Step Over, and Step Out methods to debug running code.

And on the tools panel, the Call Stack shows which lines of code are currently executing into that library.

Performance monitoring

DevTools also has some other powerful features, such as monitoring memory usage, performance, and network performance, which will be discussed later on in Flutter.

• The last

There are many other ways to debug, such as how to debug animation, debugging with syntax Settings, etc. Since this is the first chapter of Flutter practice, we will not introduce more knowledge about advanced syntax here. We will discuss and learn more debugging methods as the practice progresses.

reference

• DevTools
• debugging