Before installation, I'll talk to you a few words,

What is flutter

Fluent is an open source software development kit (SDK), which is used to "help developers efficiently build multi platform exquisite applications through a set of code base, and support mobile, Web, desktop and embedded platforms". Allow cross platform development. This can save your company and team a lot of time and energy.

So what exactly does that mean? Suppose we have a developer who creates an amazing application and people like it. However, this application is only supported on Android. Therefore, developers decided to spend a lot of time learning IOS to support more users to use their applications. Even after learning how to build IOS applications, they realize that their applications must support all types of IOS devices, and then adapt them one by one, which will make them bald. Solve these problems. It can be solved simply by introducing Flutter, which is where Flutter can be used.

On March 4, 2021, Google officially released Flutter 2.0. The biggest feature of this version is that it can support five mainstream operating systems: iOS, Android, Linux, Windows and MacOS. Officials even said Toyota would bring the shuttle into the car.

In other words, we can use a set of fluent code to adapt to the whole platform.

At present, the version of FLUENT is 2.5.3

image-20211020192303070

But before that, the first step is to install the fluent SDK and familiarize yourself with your IDE so that you can make the most of it. If you have done so, you can jump to the bottom and find the colored egg I gave you, my favorite VSCode plug-in.

install

Complete installation instructions are available on the official website:

• Installing the flutter
• Install fluent Chinese web address

If you want to build the fluent application on Android and iOS, you need to install the corresponding SDK, Android simulator and iOS simulator. The above guide explains how to do this.

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

Configure your IDE

You also need a code editor, such as Android Studio or Visual Studio Code, as well as Dart and fluent plug-ins:

• Set editor Chinese Web
• Settings editor

To make the most 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 website
• vs-code
• Vs code Chinese website

flutter doctor

After installing all the contents (don't forget to configure the system path on Windows or MacOS!), you should be able to enter it on the terminal with the fluent doctor. 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)
[!] Android toolchain - develop 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.

If the shuttle doctor does not report any errors, you already have everything you need to start building your application.

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

• Official documents for initial development experience
• Development experience Chinese network

Egg: the VS Code plug-in can be developed like the Flutter Pro

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

• There are no two plug-ins, fluent and dart. Don't use vscode.
• Official theme (who doesn't like dark mode?)
• errorlens (get any feedback about errors as you type: super useful)
• Pubspec assist (Note: similar functions can also be used 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 what I've been using. If you still have good recommendations, please tell me in the comment area and we will make progress together.

You can also enable some VSCode settings to improve your development experience. These can be set by opening preference settings (JSON) in the command panel:

• Set "editor.formatOnSave": true to enable format when saving (applicable to dartfmt)
• Set "editor. Bracketpaircoloring. Enabled": true to enable high-performance bracket coloring (explained here)

Congratulations, your Flutter development environment is ready!

My settings.json

I used version control fvm. If you need the same shoes, search how to install them. I won't 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",
}

The next section brings you the basics of dart language. In fact, I have written a simple article before, but I haven't written it systematically. Click to read the original text to open the link inside