Flutter入门：搭建环境创建项目管理依赖

Posted 2022-02-22 BennuCTech

搭建flutter环境

这一步很简单，根据官网提示一步步进行就可以。官方地址：https://flutterchina.club/get-started/install/

重点说一下官网表述不准确和搭建过程中发生的问题，我是基于mac环境安装的。

The Flutter directory is not a clone of the GitHub project

运行flutter doctor报如下错误：

Error: The Flutter directory is not a clone of the GitHub project.

  The flutter tool requires Git in order to operate properly;
  to set up Flutter, run the following command:
  git clone -b beta https://github.com/flutter/flutter.git

官方文档上让去官网下载，但是需要翻墙才可以。

另外一个建议是去github上下载release压缩包，解压安装，但是配置完环境后运行flutter doctor就会报错如上。

只能说官方文档真的不能尽信，网上有两种方法处理：

（1）到flutter目录下，git init一下，这样就生成.git目录了。证实不可行，由于没有git提交记录，执行flutter doctor还会报错。

（2）不用下载release压缩包，直接clone 下来，如提示推荐的git clone -b beta https://github.com/flutter/flutter.git 使用beta分支。然后重新配置环境，执行flutter doctor即可。

但是这个flutter项目有点大，下载特慢，我换上代理也不行，一直超时失败。后来一想，我既然都翻墙了，干嘛不直接去官网进行下载https://flutter.io/sdk-archive/#macos （Stable channel版本）,这个包也很大，里面git历史是完整的，但是翻墙后下载快。下载后解压配置环境，在执行命令即可。

（3）另外一个方法，因为项目大导致超时，所以我们clone的时候只clone最近一次commit，即clone时添加参数–depth=1。

git clone --depth=1 -b beta https://github.com/flutter/flutter.git

我在windows上测试是可行的，执行flutter doctor成功。

执行flutter doctor失败

当执行失败，在终端里日志中都会提示为什么失败，甚至给出解决方法，比如：

android sdk缺失（mac）

✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3

  To update using sdkmanager, run:
    "/Users/xxx/android-sdk-macosx/tools/bin/sdkmanager"
    "platforms;android-28" "build-tools;28.0.3"
  or visit https://flutter.dev/setup/#android-setup for detailed
  instructions.

执行
"/Users/xxx/android-sdk-macosx/tools/bin/sdkmanager" "platforms;android-28" "build-tools;28.0.3"
命令即可下载，注意中间不要换行

xcode工具缺失（mac）

✗ CocoaPods not installed.
    CocoaPods is used to retrieve the ios and macOS platform side's plugin
    code that responds to your plugin usage on the Dart side.
    Without CocoaPods, plugins will not work on iOS or macOS.
    For more info, see https://flutter.dev/platform-plugins
  To install:
    sudo gem install cocoapods

根据提示执行sudo gem install cocoapods即可安装

编辑器缺失插件

[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

Android Studio或IntelliJ IDEA，直接在Preferences -> plugins中安装flutter插件即可。

注意如果同时安装了这两种编辑器，那么两个就都需要安装插件，否则卸载不需要的编辑器

Android license status unknown（windows）

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

X Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
instructions.

需要我们更新sdk manager。在windows下需要使用sdkmanager.bat这个文件，这个文件在“sdk目录/tools/bin"目录下。

我们执行命令 xxx\\tools\\bin\\sdkmanager --update来升级sdk manager。

但是执行这条命令也会报错：

Unsupported major.minor version 52.0

说明你的jdk是低于8.0的，使用8.0以上版本的jdk即可。

执行sdkmanager --update

（注意这个命令时间会很长，要下载，而且没有什么日志，好像卡死一样，耐心等待。
最重要的，有时候结束了根本不提示，一直卡在那不结束，所以关注一下sdk下的文件，如果很长时间没有文件改动可能就是结束了，直接ctrl+c退出，这时候可能才会打印出done）

还是报错：

Warning: An error occurred during installation: Failed to move away or delete existing target file: D:\\android-sdk\\sdk\\tools

Move it away manually and try again…

明显升级时要操作tools目录，但是我们执行命令的sdkmanager.bat文件也在这个目录下，所以删除这个被占用的目录一定失败。

解决方法是我们将tools目录改名成tool（或者其他不相干的名字），然后再执行其下的sdkmanager --update，升级的时候会新建一个tools目录，并将新版本的sdk manager相关文件放在其下。升级后改过名的tool目录就没用了。

未能解析此远程名称: ‘storage.flutter-io.cn’（windows）

在windows上执行flutter doctor时出现的问题，而且在环境变量中FLUTTER_STORAGE_BASE_URL和PUB_HOSTED_URL都添加了。

重启终端再执行一次就可以了。

创建并运行项目

我这里的编辑器是Android Studio 3.2

创建项目

安装完flutter插件后就可以创建项目了，具体见官网https://flutterchina.club/get-started/test-drive/

项目创建完目录结构如下：

其中主要分三个目录：

• android - android项目代码
• ios - ios项目代码
• lib - flutter代码

另外还有一个pubspec.yaml文件，这个文件是项目配置文件，比如管理项目依赖，后续会详细讲解。

镜像仓库

项目创建完构建的时候可能会出一些问题。

比如在没有翻墙的情况下下载依赖包会失败，我们需要在android目录的build.gradle中添加阿里镜像仓库

    repositories 
        google()
        maven url 'http://maven.aliyun.com/nexus/content/groups/public/' 
        maven url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'
        jcenter() url 'http://jcenter.bintray.com/'
    

还要注意，创建时会自动使用各个依赖的最新版本，但是镜像仓库由于更新频率问题，可能最新版本还不存在，遇到这种情况降低版本即可。

运行时发现还有依赖下不下来，而且这些依赖包在项目里肯定找不到引用的地方，这是因为flutter本身也有一些依赖，那么怎么给flutter添加修改镜像仓库？

上面我们知道flutter本身依赖一些java或android三方库，这就需要编译时从bintry仓库或google仓库拉取。

但是由于国内墙的问题，国外的仓库很难顺利访问，就需要为flutter也设置镜像仓库。

怎么为flutter设置镜像仓库？

在我们的项目代码中根本找不到相关文件，这是因为flutter本身的gradle文件并不在项目中，而且在flutter安装目录下。

同时注意，不只一个gradle文件需要修改。这些文件都在flutter安装目录flutter>packages>flutter_tools>gradle下。

包括：

• fultter.gradle
• resolve_dependencies.gradle

可以看到这些文件中都有仓库的配置

repositories 
        google()
        jcenter()
    

修改这里即可，添加完镜像仓库依赖就可以顺利下载下来了。

    repositories 
        google()
        maven url 'http://maven.aliyun.com/nexus/content/groups/public/' 
        maven url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'
        jcenter() url 'http://jcenter.bintray.com/'
    

添加完镜像仓库，项目可以顺利编译了，但是其实关于仓库这里并没有结束。

当我们的项目需要依赖第三方flutter库的时候，由于三方库很可能也包含android代码（plugin和package的区别，另外一篇会细讲），这些android代码也可能在gradle中依赖了其他第三方的android包或java包，这种情况下依然无法顺利下载。

怎么办？本文第三节“管理依赖“会提供解决方法。

运行项目

创建完运行项目即可。

在Android Studio中还可启动ios模拟器

模拟器完全启动后会多出一个ios设备选项

选择这个设备运行就可以在ios模拟器上运行该项目。

这里注意，有时候模拟器已经完全启动，但是选项中没有多出设备，关闭模拟器重新打开即可。

热重载

热重载是flutter的一大特色，它可以在不重启app的情况下直接更新运行代码。

当我们已经在设备上运行了项目，这时我们修改代码，比如将“Hello World“改成“Hello World！“，修改后只需调用 Save All (cmd-s / ctrl-s), 或点击 热重载按钮 (带有闪电⚡️图标的按钮).

可以看到应用没有重装，甚至没有重启，页面上的内容就改变了。

这块还有一个问题，就是不能按stop按钮，或者设备断链。如果我们将调试机拔下在插上，会发现热重载失效，解决很简单。

连上设备后，发现热重载按钮 (带有闪电⚡️图标的按钮)变灰了，说明功能失效了。这时我们点击旁边的按钮重新同步代码即可，在console中可以看到

Waiting for a connection from Flutter on Redmi 5 Plus…

Syncing files to device Redmi 5 Plus…

当同步完成，热重载按钮 (带有闪电⚡️图标的按钮)就会亮起来，这时就可以使用热重载功能了。

我们改动代码save一下，在console中可以看到

Initializing hot reload…

Syncing files to device Redmi 5 Plus…

Reloaded 1 of 478 libraries in 600ms.

管理依赖

在flutter中我们同样通过依赖的形式引入外部包的。上文提到过pubspec.yaml是项目配置相关的文件，其中有这么一部分

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  //TODO 添加其他外部包

dev_dependencies:
  flutter_test:
    sdk: flutter

很明显就是管理依赖的地方。

将我们外部包按格式添加进去后，如

  webview_flutter: ^0.3.19  //可以在https://pub.flutter-io.cn/仓库中心查询名称及版本号

点击右上角的Packages get就可以下载依赖了，在控制台中可以看到

/Users/bennu/flutter/bin/flutter --no-color packages get

Running “flutter pub get” in fluttertest… 0.4s

Process finished with exit code 0

然后就可以使用了。

这部分可以参考官方文档https://flutterchina.club/get-started/codelab/

在第二节中的“镜像仓库“小节中我们提到了，依赖三方flutter库后，由于这个库又需要依赖android库或java库，导致无法顺利下载编译。

比如上面的webview_flutter，它就需要依赖guava。

同样我们需要为他们设置镜像仓库，但是它的gradle文件在哪呢？

以上面我们添加的webview_flutter为例，添加后点击“Packages get“将库引入项目，这时候在项目根目录下的.packages文件中可以看到多出一条

webview_flutter:file:///Users/xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/webview_flutter-0.3.19+5/lib/

我们进入到/Users/xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/webview_flutter-0.3.19+5这个目录下，就会发现一个android目录。

这个目录就是这个库中的android模块，所以只要修改这个目录中的build.gradle就可以了，添加镜像仓库

    repositories 
        google()
        maven url 'http://maven.aliyun.com/nexus/content/groups/public/' 
        maven url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'
        jcenter() url 'http://jcenter.bintray.com/'
    

添加完保存文件，再回到项目中编译运行，就会发现webview_flutter依赖的三方包都顺利下载了，项目正常编译运行起来了。

一切都准备好了，下面就可以我们正式的flutter学习之旅了。

关注公众号：BennuCTech，发送“电子书”获取经典学习资料。