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

开心猴爷
271 阅读4分钟

目前，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 的路径。完成配置后，点击下一步。

接下来我们可以对项目进行详细配置，例如，项目名称，项目位置，项目描述，项目类型，组织域名标识等基本信息，还可以选择 Android 和 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 自动创建的，无需手动创建。

使用 Appuploader 简化 iOS 开发流程

在开发 iOS 应用时，Appuploader 是一个非常有用的工具。它可以帮助开发者快速上传应用包到 App Store，并简化了证书管理和配置文件生成的过程。对于 Flutter 开发者来说，Appuploader 可以大大减少在 iOS 平台上的部署时间，尤其是在处理复杂的证书和配置文件时。

使用 Appuploader 的步骤如下：

  1. 安装 Appuploader：首先，下载并安装 Appuploader。安装完成后，启动 Appuploader 并登录你的 Apple 开发者账号。

  2. 创建证书和配置文件：在 Appuploader 中，你可以轻松创建和管理开发证书、发布证书以及配置文件。Appuploader 会自动处理证书的生成和下载，减少了手动操作的复杂性。

  3. 上传应用包：在 Flutter 项目中，完成 iOS 平台的构建后，使用 Appuploader 上传生成的 .ipa 文件到 App Store。Appuploader 提供了简洁的界面和详细的日志，帮助你快速定位和解决问题。

  4. 管理应用信息：Appuploader 还支持管理 App Store 中的应用信息，包括应用描述、截图、定价等。你可以直接在 Appuploader 中更新这些信息，无需登录 App Store Connect。

通过使用 Appuploader，Flutter 开发者可以更专注于应用开发，而不必花费大量时间在繁琐的部署流程上。Appuploader 的自动化功能极大地提高了开发效率，尤其是在处理 iOS 平台上的复杂配置时。

avatar
文章
阅读
粉丝