最近在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:这里一定不要开VPN,否则会一直检查失败】 - 会输入如下信息:
[-] 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
然后默认选择,下一步下一步。
会提示你填写flutter SDK地址 F:\flutterSDK\flutter 就是你git拉下来的flutter目录。
【Tips:这里可能会比较久,你也可以使用flutter create myapp 来创建你的项目,然后使用as导入你的项目】
6,这里你就可以直接运行该demo项目了,该项目是多平台的。
如:ios
android:
7,打开项目之后核心部分有四个文件目录分别是 ios ,andorid,lib,test,库类型的在lib中,平台的在前两个,test中是修改部分。如下图,很酷的一个热部署功能:
8,这里附上官方提供的基于dart语言用法的官方库地址https://pub.dartlang.org/flutter
使用很简单,就像“叠积木一样”,基于底层lib 一个个装上去就好了。平时工作也有任务,这里的逻辑还没来得及具体看,语言组织不好,上几张图吧。
【问题记录1】
如果遇到缺少文件之类的,请打开flutterSDK/flutter/bin/cache 目录,删除整个cache目录,并重新执行flutter doctor指令重新下载。
【问题记录2】
可能需要手动选择sdk版本,我就是 ,选择了我的本地环境andorid SDK 25
【问题记录3】
如果配置文件中有引入的不存在的dart_sdk中的plugin,请移除,否则会Resolving失败,并报出一大堆gradle 和 dl.google.com文件下载不下来的不想关错误。没用到的直接移除就好了。
其实这种模式国内也有很多不错的公司在做。希望越来越来好吧,取其精髓去其糟粕。加油!
【问题记录4】
时间太久的 android studio 要升级 flutter 和 dart 插件哦,不然 new flutter project 会消失的。
【问题记录5】
使用andorid studio 导入一个flutter project 之前,需要先check 这个 flutter 项目的合法性,可行办法是先在该目录下 flutter run 一下项目,根据错误信息,进行相应修改后,再以 open project profile 的形式打开 flutter project 所在目录。
【问题记录6】
错误日志
* Error running Gradle:
ProcessException: Process
"/Users/lihongl/flutterSDK/samples/jsonexample/android/gradlew" exited
abnormally:
FAILURE: Build failed with an exception.
* Where:
Build file
'/Users/lihongl/flutterSDK/samples/jsonexample/android/app/build.gradle' line:
14
* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
> Minimum supported Gradle version is 4.6. Current version is 4.1. If using
the gradle wrapper, try editing the distributionUrl in
/Users/lihongl/flutterSDK/samples/jsonexample/android/gradle/wrapper/gradle-w
rapper.properties to gradle-4.6-all.zip
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.
* Get more help at https://help.gradle.org
BUILD FAILED in 0s
Command: /Users/lihongl/flutterSDK/samples/jsonexample/android/gradlew
app:properties
Please review your Gradle project setup in the android/ folder.
说明,你本地的gradle 版本和导入的flutter sample 版本不一致,找到目录/Users/lihongl/flutterSDK/samples/jsonexample/android/gradlew 对应的gradle.properties 进行一个版本替换即可。
【Tips:接下来会有,一个完整的入门项目,flutter 原理,架构,使用,插件开发,等等。。。更新中。】