Flutter前序篇《一》——环境搭建,创建自己的小项目

flutter

应于公司的需求,后期打算用Flutter开发移动端,不管怎么样,我们都需要对新的技术进行了解和研究。

Flutter是Google推出的开发UI框架,目前支持Android、ios、 web、React Native等

特点
  • Flutter的跨平台开发,在MacOs、Windows、Linux、Android、IOS,甚至可以在谷歌最新的操作系统上Fuchsia进行运行,良好的跨平台开发,可以减少开发成本。Flutter还有一个开发利器‘热刷新’,Hot Reload,在AndroidStudio中编辑Dart代码后,只需要点击保存或者“Hot Reload”按钮,就可以立即更新到正在运行的设备上,不需要重新编译App,甚至不需要重启App,立即就可以看到更新后的样式。

  • 原生用户界面,带给用户的体验更好,性能更好。flutter渲染引擎依靠跨平台的Skia图形库来实现,依赖系统的只有图形绘制相关的接口,可以在最大程度上保证不同平台、不同设备的体验一致性,逻辑处理使用支持AOT的Dart语言,执行效率也比JavaScript高得多

  • 开源、免费、跨平台

网上介绍的很多,今天我就不一一列举了。

废话少讲,今天重点

1、AndroidStudio+win10的环境搭建

2、运行我的第一个Flutter项目

参考

Flutter中文开发文档

https://flutterchina.club/setup-windows/

补充说明:

开发文档是最好的工具,比看书或者看视频教程效果要好得多。建议大家一定要多看文档,毕竟看会文档,走遍天下嘛

配置环境步骤

第一步,下载FlutterSDK

由于需要翻墙,建议大家在git上面下载

下载链接:

https://github.com/flutter/flutter

或者用git命令下载:

git clone -b beta https://github.com/flutter/flutter.git

下载到指定的文件夹下面,然后进行解压

第二步, 添加插件支持

在AndroidStudio里面,file–>settings–>Flugins下载,并重启AS

第三步,配置环境变量

开始->控制面板->用户账户->更改我的环境变量->新建 配置环境变量,如下:

1.png

2.png

3.png

官方上说需要重启电脑才能生效,根据个人测试,无需重启

运行flutter doctor 命令以查看是否需要安装任何依赖项来完成安装:

  • 1、可以在cmd中进行输入 flutter doctor

  • 2、或者双击你flutterSDK目录下的flutter_console.bat 输入flutter doctor

  • 3、在develop for Android devices显示如下:


因为扫描到我电脑上安装的有InteliJ IDEA ,需要安装相应的插件。这里暂时先用as进行开发FL。

两个重要的命令

flutter doctor 检查flutter sdk等环境是否初完成
flutter doctor --android-licenses 一路输入y同意flutter协议的安装

新建项目进行测试

创建写demo创建文件夹了

image

image

之后开始真机调试了,用数据线将电脑与你的手机连接,手机开启USB调试

点击绿色三角形按钮,开启运行

image

然后在真机上会看到如下图:

image

此时环境搭建完成!

最后完成自己的main.dart文件,第一个Flutter项目

github地址:

https://github.com/yuerLoveCoding/myflutterapp

阅读更多

2018年技术文章汇总

江湖再见!技术文章集合+福利

(Android)面试题级答案(精选版)

阿里内部的那个牛逼带闪电的Java诊断工具终于开源了

相信自己,没有做不到的,只有想不到的

在这里获得的不仅仅是技术!

猜你喜欢

转载自blog.csdn.net/androidstarjack/article/details/87720925