锐客网

  1. 首页 > it技术 > >

Flutter|Flutter 第一步: flutter 环境配置

前段时间 flutter 发布了1.0版本, 于是我也尝试一下这个前沿技术.
注: 万事开头难, 我用的是Mac, 所以配置环境为Mac 环境
1. 获取flutter代码

$ git clonehttps://github.com/flutter/flutter.git注1: 我下载到了/Users/zwz/Desktop/Demo/目录下, 等会要使用此目录

2. 配置Flutter环境
【Flutter|Flutter 第一步: flutter 环境配置】首页打开.bash_profile
open -e .bash_profile

在 .bash_profile 中添加
// export PATH=${PATH}:/Users/zwz/Desktop/Demo/flutter/bin:$PATH 注2: 路径使用(注1)的路径export PATH=${PATH}:/Users/zwz/Desktop/Demo/flutter/bin:$PATH export ANDROID_HOME="/Users/zwz/Library/Android/sdk" export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export PATH=`pwd`/flutter/bin:$PATH

Flutter|Flutter 第一步: flutter 环境配置
文章图片
配置.jpg 更新配置
source .bash_profile

3. 安装xcode 及 Android Studio (最好都是最新的版本)
4.安装 futter 剩余依赖项
flutter doctor

5. 配置IDE
官方推荐Android Studio及VS Code, 我暂时使用的是Android Studio
首先, 如图所示下载Flutter插件

Flutter|Flutter 第一步: flutter 环境配置
文章图片
andrio.png
安装好 Flutter插件后 重启Android Studio会多出一会创建Flutter工程的选项

Flutter|Flutter 第一步: flutter 环境配置
文章图片
a2.jpg
点击 start a new Flutter project 需要等待一会儿.....
Flutter|Flutter 第一步: flutter 环境配置
文章图片
a3.jpg
** 重点是选择SDK的目录 **

Flutter|Flutter 第一步: flutter 环境配置
文章图片
a4.jpg
又是漫长的等待....

Flutter|Flutter 第一步: flutter 环境配置
文章图片
a5.jpg 下一篇文章为: flutter 工程文件介绍
参考:
futter官网
futter中文网

    推荐阅读


    上一篇：Rent|Rent calculator-Leasing Expert

    下一篇：DAY02（03）（如何配置trunk中继链路（））