Flutter介绍

官方介绍:

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

特点:

  • 跨平台
  • 原生用户界面
  • 开源免费
  • 热重载、快速开发

flutter 配置 ios 应用图标 flutter macos桌面应用_开发环境

其他的介绍就不多说了,可以去官网看Flutter中文网。接下来我们重点介绍Flutter环境搭建。

Flutter环境搭建

Mac环境搭建

1. Flutter SDK下载
下载地址:https://flutter.io/setup-macos/ 点击图中的zip包下载即可

flutter 配置 ios 应用图标 flutter macos桌面应用_开发环境_02

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已经安装成功了

flutter 配置 ios 应用图标 flutter macos桌面应用_flutter 配置 ios 应用图标_03

4. 检查开发环境
我们只是安装好了Flutter,但是还需要一些软件和插件的支持,在终端输入

flutter doctor

可以检测到哪些已经安装好了,哪些没有安装。
5. 在Android Studio中下载Flutter插件和Dart插件
打开Android Stuido 软件,然后找到Plugin的配置,点中间的Search in repositories,搜索Flutter插件,Flutter插件中已经携带Dart插件,安装并重启Studio

flutter 配置 ios 应用图标 flutter macos桌面应用_flutter 配置 ios 应用图标_04

如果我们安装好了Flutter插件,第四步里面的环境检查应该不会有问题

Windows环境搭建

windows环境搭建很简单,和Mac类似,只有一些细微的区别,因为我手上只有Mac,不能实操,为了对读者负责任,这里就不写Windows的步骤了,大家可以自行上官网或Google。

到此为止,我们Flutter开发环境已经搭建成功,接下来我们写hello world demo来体验一下Flutter。

Hello World

1. 打开Android Studio,新建Flutter项目

flutter 配置 ios 应用图标 flutter macos桌面应用_Flutter_05

会出现以下界面,点击next,最后finish,即可新建一个flutter项目,里面的代码暂时不用管,我们只需要能运行起来即可。

flutter 配置 ios 应用图标 flutter macos桌面应用_flutter 配置 ios 应用图标_06

flutter 配置 ios 应用图标 flutter macos桌面应用_Flutter_07

2. 打开Android Studio模拟器,如果没有,新建一个。当然如果手上有Android机器,可以使用真机调试,速度更快
3. 点击运行

flutter 配置 ios 应用图标 flutter macos桌面应用_Android_08

如果不出意外我们会在模拟器上看到以下运行结果

flutter 配置 ios 应用图标 flutter macos桌面应用_flutter_09

4. 热重载
我们在代码里找到You have pushed the button this many times:这句文案,在后面加上“啦啦啦”三个字,点击右上角闪电符号

flutter 配置 ios 应用图标 flutter macos桌面应用_开发环境_10

可以看到我们的模拟器界面已经发生了改变,这就是Flutter的热重载,不需要再次编译,开发效率非常高。

flutter 配置 ios 应用图标 flutter macos桌面应用_Flutter_11

至此我们的hello world demo已经顺利运行起来,以后我们就可以一步步进行Flutter的学习了。