欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Mac下搭建Flutter开发环境

发表日期:2018-12 文章编辑:小灯 浏览次数:5154

由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Flutter时也需要安装响应平台的构建工具和
SDK。

1、获取Flutter SDK

去Flutter官网下载其最新可用的安装包,官网地址:https://flutter.io/sdk-archive/#macos

官网下载SDK.png

下载之后解压,存放到一个目录之下,我存放的目录是/Users/xietao/Documents

2、使用镜像和配置环境变量

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

使用命令:vi ~/.bash_profile

export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export PATH=/Users/xietao/Documents/flutter/bin:$PATH 

最后一个环境变量是flutter sdk的目录

然后保存:wq退出vi环境

运行 source $HOME/.bash_profile 刷新当前终端窗口。这时候新增加的环境变量就生效了

可以使用echo $PATH来验证flutter/bin是否已在PATH中。

3、运行flutter doctor来查看是否还需要安装其它依赖

运行后会发现缺少一些其他依赖,就按照提示一个个安装好就行


运行doctor检查.png

安装好之后如下显示就可以了,我这里没有管IntelliJ IDEA


安装依赖完成.png

4、更新flutter

查看Flutter各个分支,使用命令Flutter channel

图片.png

*号的分支即你本地的Flutter SDK 跟踪的分支,要切换分支,可以使用flutter channel betaflutter channel master,Flutter官方建议跟踪稳定分支,但你也可以跟踪master分支,这样可以查看最新的变化,但这样稳定性要低的多。

要升级flutter sdk,只需一句命令:flutter upgrade

该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包(不包括Flutter SDK),可以使用如下命令:

flutter packages get 获取项目所有的依赖包。 flutter packages upgrade 获取项目所有依赖包 

的最新版本。

5、IDE配置与使用

理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序,比如上边没有配置的IntelliJ IDEA也可以。 不过,Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件,通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能,可以帮助我们极大的提高开发效率。下边介绍一下Android Studio的配置

安装两个插件:Dart和Flutter

  • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等)。
  • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等)

安装步骤:

  • 启动Android Studio。
  • 打开插件首选项 (Preferences>Plugins)。
  • 选择 Browse repositories…,选择 flutter 插件并点击 install。
  • 重启Android Studio后插件生效。

接下来,让我们用Android Studio创建一个Flutter项目,然后运行它,并体验“热重载”。

6、创建Flutter项目

安装好插件之后,重启Android Studio在面板上就会多了一个创建Flutter的选项,点击创建一个Flutter项目

  • 选择 File>New Flutter Project 。
  • 选择 Flutter application 作为 project 类型, 然后点击 Next。
  • 输入项目名称 (如 first_flutter_app),然后点击 Next。
    点击 Finish。
  • 等待Android Studio安装SDK并创建项目。

上述命令创建一个Flutter项目,项目名为first_flutter_app,其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中,您应用程序的代码位于 lib/main.dart。


创建Flutter项目.png 创建应用.png

一步一步进行


创建应用2.png 代码部分.png

iPhone上运行效果


iPhone上效果.png

Android上运行效果


Android上效果.png
本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:https://dengtar.com/18387.html
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.