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下在如下地方配置 环境变量

Flutter - Hello world_第1张图片

2.2 获取FlutterSDK

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

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

2.2.1 配置flutter环境变量

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

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

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

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

2.3 运行flutter doctor

C:\Users\qs>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后按照要求创建项目。

Flutter - Hello world_第2张图片

如有梯子可以不用配置,否则建议配置使用阿里云的镜像地址,否则很可能在运行的时候卡在 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项目也会使用阿里云的镜像进行配置。更改配置后程序如期运行起来。

你可能感兴趣的:(Flutter,flutter,环境搭建)