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命令,看名字就能知道作用是什么了,效果如图:

Win10下Flutter开发环境搭建这一篇足矣_第1张图片

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

3,第一个Flutter程序:

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

Win10下Flutter开发环境搭建这一篇足矣_第2张图片

 Win10下Flutter开发环境搭建这一篇足矣_第3张图片

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

Win10下Flutter开发环境搭建这一篇足矣_第4张图片

我们编写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' }
    }
}

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

Win10下Flutter开发环境搭建这一篇足矣_第5张图片

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

不会Dart? 请点这里,快速入门!

你可能感兴趣的:(Flutter,Flutter探索之旅)