This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

This month will bring mainly flutter, Android, Hongmeng and the foundation of small programs. I don’t know where we will go in the end. Go nuts!

Just a few words before you install it,

What is a flutter

Flutter is an open source software development kit (SDK) designed to “help developers efficiently build beautiful multi-platform applications that support mobile, Web, desktop and embedded platforms from a single code base”. Allow cross-platform development. This can save your company and your team a lot of time and effort.

So what exactly does that mean? Let’s say we have a developer who has created an amazing application and people love it. However, the app is only supported on Android. As a result, developers decided to spend a lot of time learning IOS to enable more users to use their applications. Even after learning how to build IOS apps, they realized that their app had to support all types of IOS devices, and that adapting to each of them would leave them bald. Solve these problems. It can be solved by simply introducing Flutter, which is where Flutter comes in.

On March 4, 2021, Google officially released Flutter 2.0. The biggest feature of the release is that it supports five major operating systems: iOS, Android, Linux, Windows and MacOS. Officials even said Toyota would bring the Flutter to cars.

This means that we can adapt the whole platform with a Flutter code.

Flutter is currently available in version 2.5.3

But before that, the first step is to install the Flutter SDK and become familiar with your IDE so that you can take full advantage of it. If you’ve already done so, you can jump to the bottom and find my Easter egg for all of you, my favorite VSCode plugin.

The installation

Complete installation instructions are available on the official website:

  • Install the flutter
  • Install a Chinese address for Flutter

If you want to build Flutter applications on Android and iOS, you need to install the corresponding SDK, as well as the Android emulator and iOS emulator. The guide above explains how to do this.

Note: You can only develop Flutter applications for iOS on macOS systems. If you are using Windows, you can only build for Android.

Configure your IDE

You will also need a Code editor, such as Android Studio or Visual Studio Code, and the Dart and Flutter plug-ins:

  • Set up editor Chinese
  • Settings editor

To get the most out of your IDE, check the documentation for tips on running and debugging applications, using code snippets, keyword shortcuts, and more:

  • Android Studio and IntelliJ
  • Android Studio and IntelliJ Chinese
  • vs-code
  • V – code Chinese website

flutter doctor

After installing everything (don’t forget to configure the system path on Windows or MacOS!) You should be able to enter the FLUTTER doctor on the terminal. Your output should look like this:

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel Stable, 2.5.1, on Microsoft Windows [Version 10.0.19042.1288], locale zh-cn) [!] Develop Toolchain for Android Devices (Android SDK Version 30.0.3)! Some Android licenses not accepted. To resolve this, run: Flutter Doctor -- Android - Licenses [√] Chrome - Develop for the Web [√] Visual Studio - Develop for Windows (Visual Studio Community 2019 16.11.3) [√] Android Studio (Version 4.2) [√] Connected Device (3 available)! Doctor found issues in 0 category.Copy the code

If the Flutter Doctor does not report any errors, you already have everything you need to start building the application.

It’s time for a quick test drive. This page shows you how to create a new Flutter project and run it:

  • Initial experience of development official documents
  • First experience Chinese development

Easter Egg: VS Code plug-ins can be developed just like Flutter Pro

If you use VSCode, I strongly recommend that you add some useful plug-ins. These are my favorites:

  • Flutter and Dart are not available, so don’t use vscode to develop them.
  • Official theme (Who doesn’t like Dark Mode? 😉)
  • Errorlens (Get any feedback about errors as you type: super useful)
  • pubspec-assist(Note: Similar functionality is available for the new “Dart: Add Dependency” and “Dart: Add Development Dependency” commands)
  • Todo Tree
  • Better Comments
  • Remove Comments
  • Color Highlight
  • Bracket Pair Colorizer 2
  • Material Icon Theme
  • Image Preview

These are the ones I use all the time. If you still have good recommendations, please let me know in the comments section and we can make progress together.

You can also enable some VSCode Settings to improve your development experience. These can be set by opening preferences in the command palette: Open Settings (JSON) :

  • Set up the"editor.formatOnSave": trueforWhen the saveTo enable theformat(applicable todartfmt)
  • Set up the"editor.bracketPairColorization.enabled": trueTo enable theHigh-performance bracket for coloring(Here to explain)

Congratulations, your Flutter development environment is ready!

My Settings. Json

Inside I used the version control FVM, have the same shoe need, go to search how to install, I will not elaborate

{ "security.workspace.trust.enabled": false, "dart.flutterSdkPaths": [ "/Users/andrea/fvm/versions" ], "dart.flutterSdkPath": "/Users/andrea/fvm/versions/stable", "dart.warnWhenEditingFilesOutsideWorkspace": false, "dart.debugSdkLibraries": false, "dart.lineLength": 80, "dart.openDevTools": "flutter", "dart.previewFlutterUiGuides": true, "dart.previewFlutterUiGuidesCustomTracking": true, "editor.bracketPairColorization.enabled": true, "editor.formatOnSave": true, "editor.renderWhitespace": "all", "editor.minimap.enabled": false, "editor.inlineSuggest.enabled": true, "explorer.confirmDelete": false, "explorer.confirmDragAndDrop": false, "javascript.updateImportsOnFileMove.enabled": "always", "markdown.extension.toc.updateOnSave": false, "todo-tree.highlights.enabled": true, "todo-tree.regex.regex": "(//|#|<! - |; |/\*|^|^\s*(-|\d+.) )\s*($TAGS)", "todo-tree.general.tags": [ "BUG", "HACK", "FIXME", "TODO", "XXX", "[ ]", "[x]" ], "terminal.integrated.tabs.enabled": true, "window.zoomLevel": 1, "workbench.colorTheme": "Dracula", }Copy the code

The next section gives you the basics of the DART language, which I’ve written about briefly but not systematically