Flutter - Hello world

Flutter - Hello world 一、概要

Flutter发展已经逐步稳定，使用的人群和企业也越来越多，已经逐步得到了大家的认可。最近公司有一个项目，用户相对固定，因此打算使用Flutter来做一次实验，到底能不能做出我们能够接受的效果。

二、环境搭建 2.1 环境变量配置

说明：以下全部 *** 作均在Windows上。

官网搭建说明：https://flutter.cn/docs/get-started/install
初次使用建议参考一下。

这里注意一点：为了正常升级和通过pub package 命令获取packages，需要设置两个环境变量，

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_base_URL=https://storage.flutter-io.cn

windows下在如下地方配置 环境变量

2.2 获取FlutterSDK

可在 https://flutter.cn/docs/development/tools/sdk/releases下载最新的SDK版本。下载完成后将压缩包解压，放flutter整个目录放在对应的位置（如：D:srcflutter）

请勿将Flutter 安装在需要高权限的文件夹内，例如 C:Program Files。

2.2.1 配置flutter环境变量

• 在开始菜单的搜索功能键入「env」，然后选择 编辑系统环境变量

• 在 用户变量 一栏中，检查是否有 Path 这个条目：

  • 如果存在这个条目，以 ; 分隔已有的内容，加入 flutterbin 目录的完整路径。

  • 如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 flutterbin 所在的完整路径作为新变量的值

2.3 运行flutter doctor

C:Usersqs>flutter doctor

上述命令会检查你现有环境，并将检查结果以报告的形式呈现出来。有问题的地方，会使用 粗体 进行提示，并说明有对应的解决方案。

Running "flutter pub get" in flutter_tools...                      14.6s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1348], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] Android Studio (version 4.1)
[√] Android Studio (version 4.2)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

比如我当前环境有两个问题：

1. cmdline-tools component is missing
2. Android license status unknown

按照提示解决完成后，再次运行 flutter doctor

[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1348], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] Android Studio (version 4.1)
[√] Android Studio (version 4.2)
[√] Connected device (2 available)

• No issues found!

这次可以看到没有提示环境问题。

2.4 安装Android Studio

Android Studio 的下载安装可以参考 https://developer.android.google.cn/

2.5 在Android Studio安装Flutter 和 Dart插件

1. 打开插件偏好设置 (位于 File > Settings > Plugins)
2. 选择 Marketplace (扩展商店)，选择 Flutte 然后点击 Install (安装)

完成后重启AS。

三、Hello World体验

相关的环境配置完成后可新建Flutter项目，File > New > New Flutter Project，并配置Flutter SDK path后按照要求创建项目。

如有梯子可以不用配置，否则建议配置使用阿里云的镜像地址，否则很可能在运行的时候卡在 Running 'gradle assembleDebug，半个小时过去了估计都没有什么反应。

1. 修改 android – build.gradle中的allprojects和repositories，按下面方式进行配置：

buildscript {
    ......
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
        google()
        mavenCentral()
    }
    ......
    
}

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
        google()
        mavenCentral()
    }
}

2.修改 flutter/packages/flutter_tools/gradle/flutter.gradle，按如下进行配置：

buildscript {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
    }
}

配置完成后再运行项目，就能快速编译完成，并且在手机上安装运行。

最后

参考中文网站完成相关的 *** 作步凑，加上自己是做Android开发的，基本上没有遇到什么坑，在运行的时候卡在 Running 'gradle assembleDebug，这个地方。当然凭借经验也猜到了是镜像的问题，自己平时的Android项目也会使用阿里云的镜像进行配置。更改配置后程序如期运行起来。