Flutter开发艺术之旅 一 flutter环境的搭建、运行

时间:2023-01-21 04:43:10

开篇:

  • Flutter简介:
  • 2018年2月27日,谷歌发布了flutter,官方的解释:“Build beautiful native apps in record time”:以最短的时间构建优质的原生App,也就是说可以通过一套代码生成android和ios两个平台的app, 有点类似于RN? 下面我们跟随官方文档一探究竟:

  • Flutter官方网站(英文): flutter官网

    安装开发环境

    支持平台:mac、windows、linux

  • flutter是基于dart语言,如果不熟悉的可以看一下官方文档 Dart官方文档,其实语法和Java很类似,有java开发经验的很容易上手,SDK可以在文档的Get Started下载
    Flutter开发艺术之旅 一 flutter环境的搭建、运行
  • 我的系统是mac ,下载完成后是一个压缩包,大约600mb,直接解压即可,然后将bin目录加入到环境变量:
    touch ~/.bash_profile
    open -t ~/.bash_profile
    然后xxx/flutter/bin加入保存即可!
    打开终端:输入flutter doctor,不提示找不到命令,即表示环境配置完成,此命令是检测你本机的环境是否安装完整,比如 android环境 ios环境等。

安装插件

支持平台:Android & vscode
下面以AndroidStudio为例:
1. 安装 : 打开设置->插件,搜索flutter,点击安装,首次安装会提示安装dart,点击确定即可,如果安装不上,多试几次,也可能需要*,这里不做介绍。
2. 创建 : 安装之后重启as,发现以下界面说明安装成功,选择start new flutter project->Flutter Application接下来就是和创建Android项目类似,下一步然后等待创建完成。
Flutter开发艺术之旅 一 flutter环境的搭建、运行
3. 运行: 创建完成后,如果一切正常将会看到main.dart文件已被打开,然后我们选择设备,这里如果安装了xcode,将会看到ios设备,还会看到创建过的avd,这里我们选择ios模拟器,然后点击绿色的按钮运行,如果控制台报错,应该就是某些环境没有配置好,控制台会给出相应的安装方式, 安装后重新运行即可,成功后如下图:

Flutter开发艺术之旅 一 flutter环境的搭建、运行

下面是Android和ios的共同显示效果

Flutter开发艺术之旅 一 flutter环境的搭建、运行
4. 热更新: 可以看出两者在UI方面还是遵循谷歌Material设计语言,可以看到在安卓上常见的Toolbar、FloatingActionButton等组件,从运行情况上来看,两者并没有什么差别,flutter一个非常重要的特性就是热更新,更改代码后,模拟器会立即做出反应,下面我们简单修改一下代码,在屏幕中显示一个对话框,来体验一下这种热更新:
Flutter开发艺术之旅 一 flutter环境的搭建、运行

可以看到两个模拟器立即更新了页面,体验上还是Nice的,特别是对于原生开发者来说,不用再去频繁的install,这种既改即现的模式,还是极大地提升了我们开发的效率。

总结

环境搭建还是挺简单的,没有RN这么多坑,总体运行效率还是挺不错的,从代码层面上来看,有一些杂乱,全是括号… 我不是很喜欢这种语言风格,不过上手并不困难,我也没有看过dart的文档,界面绘制全是通过代码控制,项目大了可能会导致代码量过多,不过就目前来看,前景还是很好的。毕竟是Google出品,值得我们去期待flutter的未来,希望flutter越走越远!