如何在Android Studio，Visual Studio Code上轻松设置Flutter，并开始构建出色的应用程序！

Let’s setup our lab environment for app development using Flutter. We will be using Visual Studio Code and Android studio IDE.

让我们为使用Flutter进行应用程序开发设置实验室环境。我们将使用Visual Studio Code和Android studio IDE。

那么到底是什么？ (So what exactly is flutter?)

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia and the web from a single codebase.

Flutter是Google创建的开源UI软件开发套件。它用于从单个代码库为Android，iOS，Linux，Mac，Windows，Google Fuchsia和Web开发应用程序。

Flutter consists of two important parts:

Flutter由两个重要部分组成：

An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
SDK(软件开发套件)：一系列可帮助您开发应用程序的工具。这包括将您的代码编译为本机代码(iOS和Android的代码)的工具。
A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.
框架(基于窗口小部件的UI库)：您可以根据自己的需求进行个性化的可重复使用的UI元素(按钮，文本输入，滑块等)的集合。

To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.

要使用Flutter进行开发，您将使用一种称为Dart的编程语言。该语言是Google于2011年10月创建的，但在过去的几年中，它有了很大的改进。

Dart focuses on front-end development, and you can use it to create mobile and web applications.

Dart专注于前端开发，您可以使用它来创建移动和Web应用程序。

If you know a bit of programming, Dart is a typed object programming language. You can compare Dart’s syntax to JavaScript.

如果您懂一些编程，那么Dart是一种类型化的对象编程语言。您可以将Dart的语法与JavaScript进行比较。

我可以使用Flutter构建哪些类型的应用程序？ (What kinds of apps can I build with Flutter?)

Flutter is optimized for 2D mobile apps that want to run on both Android and iOS. Flutter is also great for interactive apps that you want to run on your web pages or on the desktop. (Note that web support is in beta, and desktop support is in alpha.)

Flutter针对要在Android和iOS上运行的2D移动应用程序进行了优化。 Flutter对于要在网页或桌面上运行的交互式应用程序也非常有用。 (请注意，Web支持处于beta状态，而桌面支持处于alpha状态。)

Apps that need to deliver brand-first designs are particularly well suited for Flutter. However, apps that need to look like stock platform apps can also be built with Flutter.

需要交付品牌第一设计的应用特别适合Flutter。但是，也可以使用Flutter构建需要看起来像股票平台应用程序的应用程序。

You can build full-featured apps with Flutter, including camera, geolocation, network, storage, 3rd-party SDKs, and more

您可以使用Flutter构建功能全面的应用，包括摄像头，地理位置，网络，存储，第三方SDK等

软件先决条件： (Software Prerequisites:)

Operating System: Windows 7 or Later version of Windows (64 bit).
操作系统：Windows 7或更高版本的Windows(64位)。
Flutter application for windows/mac/linux (Available on the official flutter website)
用于Windows / mac / linux的Flutter应用程序(在Flutter 官方网站上提供 )
Android studio IDE
Android Studio IDE
Visual Studio Code for windows/mac/linux.
适用于Windows / Mac / Linux的Visual Studio代码。

因此，让我们开始吧！ (So let’s get started!)

Firstly, we need to extract the .zip file for Flutter Windows that we’ve downloaded already. As soon as we extract, flutter will be installed. All we need to do is set the path. After extraction, we should get the following files:

首先，我们需要为已经下载的Flutter Windows解压缩.zip文件。一旦解压缩，就会安装颤振。我们需要做的就是设置路径。解压缩后，我们应该获得以下文件：

In Command Prompt, if we execute the command “flutter” and the following output comes up, installation of flutter is successful!

在命令提示符中，如果我们执行命令“ flutter”并且出现以下输出， 则表明成功安装了flutter！

Flutter SDK里面有什么？ (What is inside the Flutter SDK?)

Heavily optimized, mobile-first 2D rendering engine with excellent support for text
经过高度优化的，移动优先的2D渲染引擎，具有出色的文本支持
Modern react-style framework
现代React式框架
Rich set of widgets implementing Material Design and iOS-style.
丰富的小部件集，实现了Material Design设计和iOS风格。
APIs for unit and integration tests
用于单元和集成测试的API
Interop and plugin APIs to connect to the system and 3rd-party SDKs
互操作和插件API，用于连接到系统和第三方SDK
Headless test runner for running tests on Windows, Linux, and Mac
无头测试运行程序，用于在Windows，Linux和Mac上运行测试
Dart DevTools for testing, debugging, and profiling your app
Dart DevTools，用于测试，调试和分析应用程序
Command-line tools for creating, building, testing, and compiling your apps
用于创建，构建，测试和编译应用程序的命令行工具

Flutter是否可以与任何编辑器或IDE一起使用？ (Does Flutter work with any editors or IDEs?)

Flutter support plugins for Android Studio, IntelliJ IDEA, and VS Code.

Flutter支持Android Studio ， IntelliJ IDEA和VS Code的插件。

Now, initially, if we run the “flutter doctor” command, we will get the following output.

现在，首先，如果我们运行“ flutter doctor”命令，将获得以下输出。

因此，让我们开始其余的过程！ (So, lets get started with the remaining process!)

Step 1: Installing the Android Studio IDE

步骤1：安装Android Studio IDE

Android Virtual Device

Android虚拟设备

An Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android phone, tablet, Wear OS, Android TV, or Automotive OS device that you want to simulate in the Android Emulator. The AVD Manager is an interface you can launch from Android Studio that helps you create and manage AVDs.

Android虚拟设备(AVD)是一种配置，用于定义要在Android Emulator中模拟的Android手机，平板电脑，Wear OS，Android TV或Automotive OS设备的特征。 AVD Manager是可以从Android Studio启动的界面，可帮助您创建和管理AVD。

So, we need to tick the Android Virtual Device positively.

因此，我们需要积极打勾Android虚拟设备。

Now, after giving the location for installation, the process is complete.

现在，在提供了安装位置之后，该过程就完成了。

We need to install the following SDK Tools:

我们需要安装以下SDK工具：

Android SDK Build-Tools
Android SDK构建工具
Android Emulator
Android模拟器
Android SDK Platform-Tools
Android SDK平台工具
Android SDK Tools
Android SDK工具
Google USB Driver
Google USB驱动程序
Inter x86 Emulator Accelerator (XAHM installer)
Inter x86 Emulator Accelerator(XAHM安装程序)

Now, we will have to add a new path for the Android SDK Location.

现在，我们将不得不为Android SDK位置添加新路径。

We can see here, using the “flutter doctor” command we can see that the Android SDK is installed successfully, but there are some plugins missing, which we will need later.

我们在这里可以看到，使用“ flutter doctor”命令可以看到Android SDK已成功安装，但是缺少一些插件，稍后我们将需要它们。

Now, let’s see how to install the AVD Manager

现在，让我们看看如何安装AVD Manager

One can select any system Hardware and download and install any system image.

您可以选择任何系统硬件，然后下载并安装任何系统映像。

After naming and verifying, click Finish!

命名并验证后，单击完成！

If we run the “flutter emulators” command, we can find this output:

如果运行“ flutter emulators”命令，我们可以找到以下输出：

Now, if we launch the device, we will get a virtual device having internal RAM, CPU, etc.

现在，如果启动设备，我们将获得一个具有内部RAM，CPU等的虚拟设备。

Now, if we get run “flutter devices” command, we will find that a new device is detected.

现在，如果我们运行“ flutter devices”命令，我们将发现检测到新设备。

Now, let’s call the doctor once more! (“flutter doctor”)

现在，让我们再次致电医生！ (“颤抖的医生”)

So, finally our lab is ready!

所以，终于我们的实验室准备好了！

让我们运行一个测试应用程序。 (Let’s run a Test Application.)

flutter create test_app

We can see that it is displaying that our application is in test_app\lib\main.dart.

我们可以看到它显示我们的应用程序在test_app \ lib \ main.dart中。

This is the dart file that has been created. Let’s run this app then!

这是已创建的dart文件。那我们就运行这个程序吧！

flutter run // from the root folder of the flutter project

We will have to allow access. After a few minutes, our test application will be launched in our device!

我们将不得不允许访问。几分钟后，我们的测试应用程序将在我们的设备中启动！

The best thing about this application: It supports Hot Reload (no need to compile after changing the code)

关于此应用程序的最好的事情：它支持热重装 (更改代码后无需编译)

Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM). After the VM updates classes with the new versions of fields and functions, the Flutter framework automatically rebuilds the widget tree, allowing you to quickly view the effects of your changes.

Flutter的热重装功能可帮助您快速轻松地进行实验，构建UI，添加功能并修复错误。通过将更新的源代码文件注入到正在运行的Dart虚拟机(VM)中，热重载可以工作。 VM使用新版本的字段和函数更新类后，Flutter框架会自动重建小部件树，使您可以快速查看更改的效果。

因此，让我们对其进行测试！ (So let’s test it!)

Let’s make a change in the dart file.

让我们在dart文件中进行更改。

Now, all we need to do is press the “r” key for hot reload!

现在，我们要做的就是按“ r”键进行热装！

Magic! In just a single click, application updated!

魔法！只需单击一下，即可更新应用程序！

Now, you guys must be wondering what is the use of Virtual Studio Code, well here it comes! It will provide us with an IDE. For that we need to check a few things, before using it.

现在，你们一定想知道Virtual Studio Code的用途是什么，它来了！它将为我们提供一个IDE。为此，我们需要在使用前检查一些事项。