Hello Flutter !

Hello Flutter !

最近在google开发者平台 发布了Flutter beta 1,帮助开发者在IOS和andorid两个平台开发高质量原生应用的全新移动UI架构,故而想一探究竟。(这里不是单纯的个人理解,而且附上了详细的获取资料的途径,资源地址)


Windows 环境篇

因个人资源有限,目前只提供Windows 环境搭建流程;以下资料来源于flutter 的官方网站,https://flutter.io/

系统要求:
- Windows 7或 更高版本(64-bit)
- 除了Android studio等IDE 以外还需要有400M的硬盘空间
- 需要配置环境变量 flutter/bin
- 需要git for windows 客户端 https://git-scm.com/download/win

1,通过git指令获取flutter SDK,亦或者直接下载改地址资源
- $ git clone -b beta https://github.com/flutter/flutter.git
- 下载好之后将 …flutter/bin…目录配置为全局的PATH环境变量。(与jdk等环境变量配置一致,略)
2,通过flutter doctor 指令检查环境中缺少的部分,并自动安装。【Tips:这里一定不要开v*n,否则会一直检查失败】
- 会输入如下信息:
[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
3,下载并安装好android studio 运行所具备的基本条件
- jdk 1.8(我这里是1.8,版本限制没有说)
- andorid sdk 环境变量配置 tools platform-tools
- andorid studio 3.0 及以后版本 这里附上下载地址:http://blog.csdn.net/u011300633/article/details/51735206
- 需要一个真机或者模拟设备(AVD)
4,然后打开android stuido —》setting –》plugins –》 搜索flutter,点击install,会提示你是否先安装dart plugin,点击安装,这时就具备了使用dart 这门编程语言 , 基于flutter 这个UI框架,使用比如andorid studio 这样的IDE 开发的环境了。这里有一个网址关于 dart 语言https://pub.dartlang.org/

5,这时候就可以创建第一个app了。
在android studio中,new flutter project
Hello Flutter !
然后默认选择,下一步下一步。
会提示你填写flutter SDK地址 F:\flutterSDK\flutter 就是你git拉下来的flutter目录。
【Tips:这里可能会比较久,你也可以使用flutter create myapp 来创建你的项目,然后使用as导入你的项目】

6,这里你就可以直接运行该demo项目了,该项目是多平台的。
Hello Flutter !
如:ios
Hello Flutter !
android:
Hello Flutter !
Hello Flutter !

7,打开项目之后核心部分有四个文件目录分别是 ios ,andorid,lib,test,库类型的在lib中,平台的在前两个,test中是修改部分。如下图,很酷的一个热部署功能:
Hello Flutter !

8,这里附上官方提供的基于dart语言用法的官方库地址https://pub.dartlang.org/flutter
使用很简单,就像“叠积木一样”,基于底层lib 一个个装上去就好了。平时工作也有任务,这里的逻辑还没来得及具体看,语言组织不好,上几张图吧。
Hello Flutter !

Hello Flutter !
Hello Flutter !
Hello Flutter !
Hello Flutter !
Hello Flutter !
Hello Flutter !
Hello Flutter !
Hello Flutter !

【问题记录1】
如果遇到缺少文件之类的,请打开flutterSDK/flutter/bin/cache 目录,删除整个cache目录,并重新执行flutter doctor指令重新下载。
【问题记录2】
Hello Flutter !
可能需要手动选择sdk版本,我就是 ,选择了我的本地环境andorid SDK 25
【问题记录3】
Hello Flutter !
如果配置文件中有引入的不存在的dart_sdk中的plugin,请移除,否则会Resolving失败,并报出一大堆gradle 和 dl.google.com文件下载不下来的不想关错误。没用到的直接移除就好了。

其实这种模式国内也有很多不错的公司在做。希望越来越来好吧,取其精髓去其糟粕。加油!

【Tips:接下来会有,一个完整的入门项目,flutter 原理,架构,使用,插件开发,等等。。。更新中。】