Flutter 学习 (一)搭建 Flutter 开发环境

Flutter 官方网
Flutter 中文网

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

搭建Flutter开发环境

  • 由于我使用 Mac 开发 Android ,所以下面重点介绍 在 macOS 上搭建 Flutter 开发环境
  • 其他操作系统推荐 https://flutterchina.club/get-started/install/ 帮助文档进行安装

在 macOS 上搭建 Flutter 开发环境

1 获取Flutter SDK

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

2 配置环境变量
  • 解压包(Flutter SDK)的目录记为 “FLUTTER_PATH”
  • 打开(或创建) $HOME/.bash_profile 如下图,该文件为隐藏文件,可以使用快捷键** ⌘⇧. (Command + Shift + .)** 显示隐藏文件
    • 图片.png
  • 打开 .bash_profile 文件后, 添加如下
FLUTTER_PATH=/Users/zhangxiaowu/soft/flutter //目录为下载的 Flutter SDK 解压包所在的目录
export PATH=$PATH:$FLUTTER_PATH/bin
  • 验证是否配置成功,启动终端(Command + 空格,输入 terminal.app)输入
echo $PATH

在 Android Studio 上配置与使用

  • 配置方法同样适用 IntelliJ IDEA
1 安装 Flutter 和 Dart 插件
  • 启动Android Studio。
  • 打开插件首选项 Preferences > Plugins
    选择 Browse repositories…,选择 flutter 插件并点击 install。
  • 重启Android Studio 即可
2 用Android Studio创建一个Flutter项目

使用默认即可

  • 图片.png

运行新建项目出现的问题

运行项目时卡在 Initializing gradle…

可以在项目中的android/gradle/wrapper/gradle-wrapper.properties中查看gradle版本号以及地址, 手动下载然后解压到~/.gradle/wrapper/dists/中。

运行时会卡在 Running 'gradle assembleDebug,
  • 因为Gradle 的 Maven 仓库在国外, 可以使用阿里云的镜像地址。
  • 修改项目中 android/build.gradle 文件
    • 图片.png
  • 修改 Flutter 的配置文件, 该文件在FlutterSDK 安装目录/packages/flutter_tools/gradle/flutter.gradle
    • 图片.png
  • 重启 AndroidStudio 即可
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值