美文网首页
flutter入坑指南 开发环境搭建 创建第一个flutter项

flutter入坑指南 开发环境搭建 创建第一个flutter项

作者: 风中的猴子 | 来源:发表于2018-07-06 14:36 被阅读0次

本文全程开了ss
官网(中文网看了一下更新要比官网慢很多):https://flutter.io/

image.png

GET STARTED 跳转到教程

MAC

image.png

这里下载SDK压缩包
解压,我是解压到Library,进入Library文件夹

unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

国内有墙
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

添加到path

export PATH=`pwd`/flutter/bin:$PATH

打开$HOME/.bash_profile,如果没有就新建一个

vim $HOME/.bash_profile

下边这一行添加到.bash_profile,PATH_TO_FLUTTER_GIT_DIRECTORY替换成自己flutter SDK解压的路径

export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

保存

source $HOME/.bash_profile
echo $PATH

flutter自带doctor检查环境

flutter doctor

image.png

每个人电脑装的开发环境可能不一样, 所以缺少的环境也会不同, 这里根据自己情况安装

✗ Android license status unknown.

这个是安卓的许可证
运行

flutter doctor --android-licenses

image.png

是安卓sdk需要更新,给了提示
运行


image.png

一路点y,然后是十几分钟的等待
再运行一次

flutter doctor

image.png

发现虽然更新了SDK, 但还是有问题

flutter doctor --android-licenses

一路y, 这个问题解决了。
把有提示的都安装好,有的时间会长一点

接下来是这个

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

打开android studio => Configure => Plugins


image.png

搜索flutter


image.png
点install 安装
再次运行flutter doctor 发现刚才装的没什卵用。。。

重启android studio


image.png
发现报错了
点开plugin manager
image.png
重新安装发现依然没用,更新了android studio版本到最新
重新安装flutter

flutter doctor

image.png

环境搭建完毕

第一个flutter

android studio

image.png
image.png

选择 Flutter Application,next


image.png

Flutter SDK path是最开始下载的SDK压缩包解压的路径, 我的在Library里
Project location是新建项目路径


image.png
然后finish,创建完成
image.png

选择一个模拟器打开,点绿色的三角跑起来

image.png

命令行

flutter create myapp


image.png

打开模拟器

open -a Simulator

进到项目目录

cd myapp
flutter run

image.png
image.png

相关文章

网友评论

      本文标题:flutter入坑指南 开发环境搭建 创建第一个flutter项

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