美文网首页
Flutter 基础之环境集成与搭建-MAC篇

Flutter 基础之环境集成与搭建-MAC篇

作者: 耗子_wo | 来源:发表于2021-08-22 00:08 被阅读0次

最近有了些许时间,是时候来看看最近大火的Flutter框架了,老实说我最近也接触了一段时间了发现无论从Dart语言再到Flutter框架,我感觉Google在设计这两个的时候大量借鉴了JavaScript与ReactNative的设计思路,上一篇我写的《聊一聊Flutter中的future,await,事件队列,微任务》 文章里面也对这方面了做了些对比,如果再有时间我会再更新几篇这些对比的文章,把他们之间的相同与不同的东西写一写,好了话说回来,咋们今天的内容是基础也就是环境搭建,好的让我们轻松愉快的开始吧:

提前给大家一个好的消息,目前高版本的Flutter的环境搭建比ReactNative框架的搭建要简单了些,这个是一个好的事情,框架搭建都很复杂的话可以劝退不少想接触的工程师呢

1. 我们首先要做的事获取Flutter的SDK

点击Flutter官网 去进行下载即可,我目前下载的是flutter_macos_2.2.3-stable.zip,面安装解压即可

2. 添加flutter SDK到path中,也就是添加环境变量

$ cd ~
$ vim .bash_profile

然后添加:

export PATH=/Users/91001191/flutter/flutter/bin:/$PATH

之后记得保存文件。

可以运行 echo $PATH 去查看环境变量是否成功添加

3. 上面path配置完成之后,需要检查目前安装的情况,运行:

$ flutter doctor

该命令检查你的环境并在终端窗口中显示报告,如下图:

image.png

如图全部是绿色的勾勾说明你的环境搭建OK了。

给大家插一句,肯定有小伙要问刚刚只是下载了Flutter的SDK,那Dart的SDK呢怎么没见你搭建啊,因为从 Flutter 1.21 版本开始,Flutter SDK 会同时包含完整的 Dart SDK 因此如果你已经安装了 Flutter,可能就无需再专门下载 Dart SDK 了。那么Dart SDK在Flutter SDK的哪个文件目录里呢?打开Flutter SDK跟文件夹在子文件夹/bin/cache/下就能看到Dart SDK的文件夹,MAC上面的完整路径:flutter/bin/cache/dart-sdk,这个我们在Android Studio开发的时候需要配置用到哦,如下图:

image.png

你不配置的话你的Flutter项目源码会无法索引,所以还是要配置的

好了,我们环境搭建好了现在创建一个HelloWorld项目运行试试效果:

通过如下命令创建一个Flutter项目:

$ flutter create my_app

成功创建的项目结构是这个样子的:


image.png

里面有Flutter的dart源文件,以及包含了Android,IOS的宿主目录,是的你没有看错这个项目架构简直与ReactNative是一模一样的,也就是说Flutter是依赖原生宿主的,所以必须要有原生的项目结构

好了,现在我们通过以下命令可以运行它:

$ cd my_app
$ flutter run

在这个运行命令前需要你启动一个模拟器或者真机,如果你什么都没有那么他会打开一个Chrome 网页去运行,我一开始就遇到了半天没反应过来,不过说明高版本的Flutter是支持Web了的😁

flutter devices 可以用这个命令去查看当前的设备如下:

image.png

上面显示了我的真机,我的虚拟机,还有一个就是上面提到的Chrome设备

你可以使用该命令去指定一个具体的设备运行:

flutter run -d B6FF08D6-33DD-424B-8D90-DCE098339589

另外我测试了高版本的Flutter不需要做什么额外的配置就可以在真机去调试运行,这一点对比ReactNative要好不少,除了刚才说的命令运行以外,还有一种运行方式就是打开他们的宿主工程也就是里面的IOS,Android文件夹用Xcode或者AndroidStudio去打开编译运行也是可以的,这一点与ReactNative也是一模一样的

好了,咋们的环境搭建基础篇就到这里了,非常的简单容易上手,推荐小伙伴多动手去试试吧···

相关文章

网友评论

      本文标题:Flutter 基础之环境集成与搭建-MAC篇

      本文链接:https://www.haomeiwen.com/subject/hvbnbltx.html