搭建flutter环境

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

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

The Flutter directory is not a clone of the GitHub project

运行flutter doctor报如下错误：

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

另外一个建议是去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）

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

xcode工具缺失（mac）

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

编辑器缺失插件

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

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

Android license status unknown（windows）

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

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

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

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

执行sdkmanager --update

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

还是报错：

明显升级时要操作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中可以看到

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

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

管理依赖

在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就可以下载依赖了，在控制台中可以看到

然后就可以使用了。

这部分可以参考官方文档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学习之旅了。