Flutter 3 基础02: 创建第一个项目

目前，Flutter 官方支持三个开发工具：Android Studio, Visual Studio Code 和 Emacs.

下面我们使用 Android Studio 创建第一个 Flutter 项目。

在创建 Flutter 项目之前，需要安装两个必需的插件。

启动 Android Studio，在欢迎对话框的左侧导航菜单，选择 Plugins，在右侧内容区域，搜索并安装 Flutter 和 Dart 两个插件，并重启 Android Studio.

再次启动 Android Studio 后，在欢迎页面的内容区域，可以看到 New Flutter Project 按钮。

点击该按钮，开始创建 Flutter 项目。在新项目向导页面，首先需要配置 Flutter SDK 的路径。完成配置后，点击下一步。

接下来我们可以对项目进行详细配置，例如，项目名称，项目位置，项目描述，项目类型，组织域名标识等基本信息，还可以选择 Andorid 和 iOS 开发所使用的语言，以及项目可以支持部署的平台。

对于我们第一个 Flutter 项目，我们只需要输入项目名称，hello_world，项目类型，Application，然后点击创建按钮。

等待 Android Studio 完成项目的创建。

点击这里，选择一个虚拟机或物理设备。如果列表为空，选择 Tools > AVD Manager 创建一个虚拟机。

点击绿色的运行按钮，等待 Android Studio 打包部署应用。

一旦部署完成，打开运行设备窗口，看到应用页面。

此时，控制台也会输出结果信息。

Launching lib/main.dart on sdk gphone x86 in debug mode...
Running Gradle task 'assembleDebug'...
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app-debug.apk...
Debug service listening on ws://127.0.0.1:51449/ttoe0qTWHHY=/ws
Syncing files to device sdk gphone x86...

常见问题

我们在运行项目时，经常会发现，等待很长时间，模拟器上都没有显示应用页面。查看控制台输出，只显示下面两行，就不再有任何输出了：

Launching lib/main.dart on sdk gphone x86 in debug mode...
Running Gradle task 'assembleDebug'...

出现这种情况，通常有两个可能的原因。

原因一：Android Studio 在运行 Flutter 项目时，需要联网下载依赖数据包，默认使用国外的网络地址，下载速度慢导致的。

我们可以尝试修改下载地址配置，使用国内下载地址。以下修改逐一测试，有效即停：

• /your/path/to/flutter/packages/flutter_tools/gradle/flutter.gradle

repositories {
        // google()
        // mavenCentral()
        maven { url 'https://maven.aliyun.com/repository/central/' }
        maven { url 'https://maven.aliyun.com/repository/public/' }
        maven { url 'https://maven.aliyun.com/repository/google/' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' }
    }

class FlutterPlugin implements Plugin<Project> {
    // private static final String DEFAULT_MAVEN_HOST = "https://storage.googleapis.com";
    private static final String DEFAULT_MAVEN_HOST = "https://storage.flutter-io.cn";
...}

• /your/path/to/flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle

repositories {
    // google()
    // mavenCentral()
    maven { url 'https://maven.aliyun.com/repository/central/' }
    maven { url 'https://maven.aliyun.com/repository/public/' }
    maven { url 'https://maven.aliyun.com/repository/google/' }
    maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' }
    maven {
        // url "$storageUrl/download.flutter.io"
        url "https://storage.flutter-io.cn/download.flutter.io"
    }
}

• 项目中的配置文件 /your/path/to/project/android/build.gradle

buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
//        google()
//        mavenCentral()
        maven { url 'https://maven.aliyun.com/repository/central/' }
        maven { url 'https://maven.aliyun.com/repository/public/' }
        maven { url 'https://maven.aliyun.com/repository/google/' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' }
}

...

allprojects {
    repositories {
//        google()
//        mavenCentral()
        maven { url 'https://maven.aliyun.com/repository/central/' }
        maven { url 'https://maven.aliyun.com/repository/public/' }
        maven { url 'https://maven.aliyun.com/repository/google/' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' }
    }
}

原因二：Android Studio 使用 Gradle 编译 Flutter 项目，如果之前没有下载安装过 Gradle，Android Studio 会先去下载 Gradle 软件包，这也需要长时间等待。

我们可以使用下载工具提前下载 Gradle 软件包，放置到 Android Studio 默认访问的位置。

首先，在项目中打开 android/gradle/wrapper/gradle-wrapper.properties 文件，找到distributionUrl 属性对应的值。例如，

distributionUrl=https://services.gradle.org/distributions/gradle-7.5-all.zip

下载完成后，只需要把压缩包拷贝到以下地址，Android Studio 会自动进行解压。

/Users/your_name/.gradle/wrapper/dists/gradle-7.5-all/6qsw290k5lz422uaf8jf6m7co

注意：your_name 是当前登录系统的用户名；/gradle-7.5-all/6qsw290k5lz422uaf8jf6m7co 是 Android Studio 自动创建的，无需手动创建。