Flutter介绍
官方介绍:
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
特点:
- 跨平台
- 原生用户界面
- 开源免费
- 热重载、快速开发
其他的介绍就不多说了,可以去官网看Flutter中文网。接下来我们重点介绍Flutter环境搭建。
Flutter环境搭建
Mac环境搭建
1. Flutter SDK下载
下载地址:https://flutter.io/setup-macos/ 点击图中的zip包下载即可
2. 解压安装包到某个目录,如解压到~/development目录
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
3. 配置环境变量
打开.bash_profile文件进行编辑
open ~/.bash_profile
在编辑器中加入下面一行,中间为你解压后flutter的目录,只是示例,根据自己的目录来写即可
export PATH=$PATH:/Users/xxx/development/flutter/bin
保存,退出编辑器,在终端中输入下面的命令来使环境变量生效
source ~/.bash_profile
接下来我们检查一下flutter是否安装完成,输入
flutter -h
如果出现以下结果,则说明我们flutter已经安装成功了
4. 检查开发环境
我们只是安装好了Flutter,但是还需要一些软件和插件的支持,在终端输入
flutter doctor
可以检测到哪些已经安装好了,哪些没有安装。
5. 在Android Studio中下载Flutter插件和Dart插件
打开Android Stuido 软件,然后找到Plugin的配置,点中间的Search in repositories,搜索Flutter插件,Flutter插件中已经携带Dart插件,安装并重启Studio
如果我们安装好了Flutter插件,第四步里面的环境检查应该不会有问题
Windows环境搭建
windows环境搭建很简单,和Mac类似,只有一些细微的区别,因为我手上只有Mac,不能实操,为了对读者负责任,这里就不写Windows的步骤了,大家可以自行上官网或Google。
到此为止,我们Flutter开发环境已经搭建成功,接下来我们写hello world demo来体验一下Flutter。
Hello World
1. 打开Android Studio,新建Flutter项目
会出现以下界面,点击next,最后finish,即可新建一个flutter项目,里面的代码暂时不用管,我们只需要能运行起来即可。
2. 打开Android Studio模拟器,如果没有,新建一个。当然如果手上有Android机器,可以使用真机调试,速度更快
3. 点击运行
如果不出意外我们会在模拟器上看到以下运行结果
4. 热重载
我们在代码里找到You have pushed the button this many times:这句文案,在后面加上“啦啦啦”三个字,点击右上角闪电符号
可以看到我们的模拟器界面已经发生了改变,这就是Flutter的热重载,不需要再次编译,开发效率非常高。
至此我们的hello world demo已经顺利运行起来,以后我们就可以一步步进行Flutter的学习了。