Win10下Flutter开发环境搭建这一篇足矣

前言:

笔者作为一个Android开发者，已经越来越能感受到原生开发的不受待见了，这里并不是说原生就不行了，而是随着这些年混合跨平台方案的层出不穷，导致市场对纯原生开发者的要求越来越高，你不仅要会原生还得会前端知识。这样就导致很多初级开发者举步维艰，特别是像笔者这样的应用开发人员。如果你是系统开发人员还好一点。在这种环境下，原生与web前端之间的区别越来越模糊，大前端时代也就随之到来。总体来说，这些方案里面，笔者最看好的还是Flutter，因为它的理念是前所未有的，其它方案或多或少都和js前端挂勾，性能上就大打折扣了，体验也是比不上原生的，对于客户端来说，体验和性能就是命脉。而Flutter和它们都不同，它是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。注意是原生界面，它采用的是GPU来渲染界面，所以性能体验上甚至是超过原生的，具体想详细了解，大家可以看Flutter中文网。好了，从这篇文章开始，我将和大家一起探索Flutter的世界！

一，SDK的安装:

在正式安装SDK前，要提醒一下各位使用Win7的小伙伴，你们可以停下了，建议你先去升级到Win10再来，为什么？因为环境不允许，由于后面涉及的相关命令操作，谷歌工程师研发Flutter的时候是基于Powershell5.0的环境来的，也就是说他当初使用的可能就是Win10的环境，Powershell是Windows自带的命令环境工具，win7上的版本太低，而且还升不了(反正笔者是没有成功)。所以劝各位还是老实点去升级系统吧！SDK的下载安装有如下两种方法。

1. 去Flutter官网或者flutter GitHub项目下载其最新可用的安装包。
2. 使用Git命令安装：git clone -b beta https://github.com/flutter/flutter.git

第一种方式如果官网打不开，可能需要，所以你可以去其GitHub项目下载。笔者采用是第二种方式，首先大家要安装配置好Git，随后在自己喜欢的目录下执行上面的命令，这样一来SDK的安装就完成了。注意！不要将flutter安装到需要一些高权限的路径如C:\Program Files\ 。

二，运行flutter doctor:

安装完SDK之后，接下来我们需要在控制台(目前Flutter不支持Git)运行Flutter doctor命令来检测SDK的依赖项安装情况，运行命令之前我们需要配置一下支持flutter命令的环境变量，还有一点要注意由于flutter命令需要联网获取数据，如果是在国内访问，可能需要，直接访问可能不会成功。不过Google已经为国内开发者搭建了临时镜像。下面我把这些环境变量列举一下！

1. 系统变量path：D:\futter_study\flutter\bin  (flutter安装包bin的全路径)
2. 系统变量FLUTTER_STORAGE_BASE_URL：https://storage.flutter-io.cn
3. 系统变量PUB_HOSTED_URL：https://pub.flutter-io.cn

上述系统变量如无则新建，注意如有多个变量值，它们之间需要用分号隔开。这些配置完之后，我们可以使用cmd控制台或者是打开flutter安装包文件夹找到flutter_console.bat文件双击打开执行flutter doctor命令，看名字就能知道作用是什么了，效果如图：

 上图就是flutter doctor的执行效果，首先你如果能正常显示这些。说明前面的都设置成功了，大家可以看到它会去检测flutter，Androidsdk ,支持的编译器，还有调试设备，由于我早已搭建了这些环境，所以它会显示绿勾，当前我没进行调试，所以设备不在线。大家如果以上这些都没做的话，它就会显示叉，那就需要大家去搭建好这些了，如果你是Android开发者的话，应该问题不大。前端开发者的话就需要费点功夫了，至于怎么做，这里我就不展开来说了。

3，第一个Flutter程序:

前面这些环境搭建好之后，接下来，我们来做一下经典的hello world程序，正式进入Flutter开发的世界，首先我们选择AS作为编译器，之前如果没有开发过Flutter,你的AS中应该是创建不了Flutter工程的，这个时候你需要分别安装Flutter和Dart插件，之后重启AS 就可以创建Flutter工程了。具体步骤如下：

 

之后和你创建Android项目差不多，创建完工程之后，Flutter项目结构如下

我们编写Dart代码是在lib文件夹下，默认情况下，里面会有一个main.dart文件，这时候你就可以直接连上真机了调试了。这里可能还需要你在Android目录下的build文件下再配置一下，才能运行成功，具体配置如下：

buildscript {
    repositories {
        //google()
        //jcenter()
        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' }

    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

allprojects {
    repositories {
        //google()
        //jcenter()
        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' }
    }
}

以上全部弄好之后，你就可以坐下来慢慢等待运行结果了，第一次可能会比较慢，如无意外最终效果如下：

就是一个计数器程序，里面的部分内容我改了一下。main.dart里面注释其实很清楚了，虽然是英文的。到这里的话，你已经做出了人生当中第一个Flutter程序了。如果你是没有Dart基础的话，我希望你可以去看看我的专栏或者官方文档，总之有Dart语言基础更利于你开发Flutter，这里还要告诉大家的是。用Win10只能开发Android端，如果想开发iOS。你首先要有一台mac。好了。大家应该会爱上Flutter这门技术的。加油！

不会Dart? 请点这里，快速入门！