首页 > 其他 > 详细

第一个flutter应用程序--vs code 搭建flutter运行环境

时间:2019-03-29 12:12:09      阅读:653      评论:0      收藏:0      [点我收藏+]

之前开发过hybrid app,用的是webview渲染,由于webview的体验会没有原生的体验好,所以对跨端原生开发燃起了学习的兴趣,在react-native和flutter之间纠结,

看了网上的一些对比,虽然flutter比较新,用的又是新的dart语言, 但貌似在兼容性上要优于reactive-native, 闲鱼团队就用了flutter,于是就决定从flutter入手。

作为一名前端开发,在flutter支持的几种编辑器中还是用vs code比较顺手,于是打算用vs code来配置flutter开发环境

先跟着官网进行前几步基础安装程序,前几步官网上有的基础配置,最好跟着官网来,博客会过时,官网会更新。。

1. 安装flutter

 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
 git clone -b dev https://github.com/flutter/flutter.git

如果要更新环境变量

vim ~/.bash_profile 进入文件添加系统变量路径

export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH  //注意:PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径,比如“~/document/code”

运行 source $HOME/.bash_profile 刷新当前终端窗口.

查看环境变量是否在已经在PATH中:

echo $PATH

 

2. 安装dart sdk

brew tap dart-lang/dart
brew install dart

如果没有安装Homebrew的,需要先安装 https://brew.sh/

 

3. vs code 配置

vs安装dart和flutter扩展

技术分享图片

查看是否安装成功

command+shift+p

Flutter: Run Flutter Doctor

新建项目demo

Flutter:New Project

技术分享图片

如果新建项目出现了这样的项目目录,说明已经新建成功了,如果没有,那需要检查一下jdk、android-sdk,jdk的版本一定要是1.8的。

添加系统变量等操作,完成之后运行 Flutter:Launch emulater 就可以看到模拟器, 最后执行flutter run 就可以看到项目已经在模拟器里运行起来了。

至此,demo才算跑起来,然后按照提示改lib/main.dart文件的东西,按r键热加载,就可以看到改动之后的效果了。

 

4. 一些坑

在vs插件安好了以及flutter sdk, dart sdk安装完成之后,准备新建一个项目,新建项目之前先运行flutter doctor。。不行。。貌似在安装什么插件。。等了好久,没有成功。这个时候flutter create myapp显然是没有成功的。

于是才知道要安装jdk, android sdk。。安完之后添加到系统变量。。嗯。然后新建项目,这次成功了,项目目录出来了,然而准备跑起来的时候flutter run的时候报错

Unable to locate a development device; please run ‘flutter doctor‘ for information about
installing additional components.

额,好吧,那运行flutter doctor ...出现一堆错误

技术分享图片

根据上面的报错提示,更新了安卓sdk, 然后出现 android licenses status报错,

根据提示 update sdkmanager

还是报错 Exception in thread “main” java.lang.UnsupportedClassVersionError ,这个错误是因为jdk版本不对,java --version 查看版本

jdk 版本要是1.8的,其他版本不行。。先开始安装的是12,就一直报错换成1.8之后,flutter doctor --android-licenses 然后就成功了 这个错误解决

还有一个错误是需要安装xcode。android studio ,这些可以暂时先不安装,用模拟器开发,总算是把demo跑起来了。

 

第一个flutter应用程序--vs code 搭建flutter运行环境

原文:https://www.cnblogs.com/leiting/p/10608418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!