Flutter的开发思路非常"风骚",不使用平台原生控件,一切基于Widget.它会把所有的UI,数据等通过flutter的引擎和框架绘制成widget.
下图所示:通过android开发者模式开启边界布局,我们可以清楚的看到,整个应用的界面并没有我们熟悉的布局边界辅助线.(顶部的是手机状态栏的,并非app的)
官方演示demo下载
show_1.gif
Flutter的特点:
-
高性能的系统框架
由框架和引擎直接编译成arm机器码,界面通过widget进行展示,不会出现原生UI控件的过度绘制的情况,在老旧手机上依然可以60帧的刷新频率.不会出现性能问题. -
优秀的开发体验与开发效率
可以使用主流的IDE进行开发,使用dart语言,了解java,kotlin,python,等语言,上手dart非常容易.热启动,编辑修改代码后,使用热启动,几乎1秒内就可以显示在调试设备上,极大的提高了开发效率. -
美观和可扩展组件
flutter提供有大多数 android 和 ios 的ui组件,可有轻松上手,也可以轻松的编辑扩展自定义组件 -
同时支持android 与 ios
同一套代码可以直接编译生成android 和 ios两个项目
看到以上这些优点,是不是有种心动的感觉
下面就开始我们的安装吧!
1.下载flutter SDK并安装
点击跳转下载
download_flutter.png
解压之后,配置环境变量如(path =D:\android_Flutter\flutter_windows_v0.5.1-beta\flutter\bin)
打开cmd.exe,输入命令 flutter doctor 安装flutter
C:\Program Files (x86)\PowerCmd>flutter doctor可能会出现以下警告
image.png
第一个因为需要android许可认证,直接执行后面提示的命令即可
flutter doctor --android-licenses如果出现以下提示,依然按要求输入命令
D:\micro_work\work\flutter_app>C:\Users\Administrator\AppData\Local\Android\sdk\tools\bin\sdkmanager --update以实际提示为主,如果遇到其他问题可以留言讨论
A newer version of the Android SDK is required. To update, run://
C:\Users\Administrator\AppData\Local\Android\sdk\tools\bin\sdkmanager --update
第二个是因为android studio没有安装flutter插件,下一步会做演示
注意:android studio的版本要大于3.0
2.插件安装与配置
打开settings ==>plugins搜索flutter和dart点击下载,重启android studio
配置dart SDK:打开settings搜索dart,进入以下界面,配置dart-sdk
注意路径是...flutter\bin\cache\dart-sdk
image.png
配置flutter SDK
image.png
至此flutter的环境就已经配置完成了!
下面就开始创建的我们的第一个hello flutter 应用吧
1.创建flutter 项目
image.png
选择创建flutter application,设置项目路径,包名一路下一步就ok了
第一次创建flutter项目会比较慢,耐心等待吧
...
...
...初始化完成!
可以看到一个示例界面的代码,不用管是什么意思,有什么用,跑起来看看再说...
代开模拟器,点击 run
报错了看下面的有没有解决的办法!!!
image.png
成功运行到模拟器上
点击下图的 热重启 ,可以看到,修改代码后,构建速度很快,不到1秒,就直接可以在模拟器上查看修改后的效果了
image.png
至此,flutter在windows系统的安装,android studio 上配置flutter插件及环境,以及运行第一个flutter应用已经搞定了.
可能遇到的问题
- 不建议使用Git直接fork Flutter_sdk到本地,因为速度比较慢,建议通过本文下载链接下载
- 确保android 开发环境ok,android studio升级到3.0以上,升级到最新的SDK build_tools
- 运行时,出现
Unable to download needed Android SDK components, as the following licenses have not been accepted: Android SDK Platform 27, Android SDK Build-Tools 26.0.2
可能是应为flutter默认使用的android_sdk路径与你配置的sdk路径不相同的问题
打开项目下的android/local.properties,修改sdk.dir路径与设置中的android sdk相同
image.png
image.png
