美文网首页Flutter圈子Flutter学习日记Flutter
学习笔记:FLUTTER+VSCODE环境搭建

学习笔记:FLUTTER+VSCODE环境搭建

作者: ky007 | 来源:发表于2019-01-06 16:29 被阅读7次

    最近开始学习APP开发,大学期间写过一点点东西,但是算不上什么程序。毕业后编程之类的东西也忘得差不多了,希望后续学习顺利。
    以下均为初学者个人笔记
    整个过程大概装了以下东西:
    1、ANDROID STUDIO(IDE,开发工具,但是非常吃资源,于是后来换成使用VSCODE)
    2、ANDROID SDK
    3、JDK
    4、FLUTTER插件
    5、DART插件
    6、GITHUB

    直接开始:
    1、安装JDK(JAVA环境,个人理解是系统运行JAVA语言需要的东西吧)
    参考:http://www.runoob.com/w3cnote/android-tutorial-development-environment-build.html
    到官网下载JDK:https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
    下载的是

    QQ截图20190106154611.png
    安装后参考上面的网址进行环境变量配置。
    最后通过cmd输入javac确认配置是否成功。

    2、安装AS
    发现目前的AS都是只有IDE,并非自带SDK的,我是在这里下载的:
    https://dl.google.com/dl/android/studio/install/2.3.3.0/android-studio-bundle-162.4069837-windows.exe
    (自带SDK)
    安装好后,打开AS基本就可以直接开始开发了。
    但是电脑跑不动,启动模拟器要20分钟,所以改用VSCODE开发,见下面。

    3、安装VSCODE
    这个不介绍了

    4、安装GITHUB
    由于在找FLUTTER时,大多推荐通过GITHUB下载,所以也搞下GITHUB,这个东西据说是编程必备?
    整个过程参考:https://blog.csdn.net/Hanani_Jia/article/details/77950594
    里面已经非常详细,但是在文中获取密钥时,原文是
    ssh-keygen-t rsa-C "your_email@youremail.com” 发现不行,看了下面评论才知道现在应改为: ssh-keygen.exe -t rsa -C "你的邮箱地址"
    其他的都没问题,照做即可。

    5、安装FLUTTER
    参考:https://www.jianshu.com/p/7cbf82b4854e
    过程中没出现问题,到执行FLUTTER DOCTOR为止,照做即可。

    6、VSCODE上安装插件


    QQ截图20190106160454.png

    打开VSCODE,在图中的为止找到FLUTTER和DART插件进行安装。
    然后在VSCODE中通过“查看-终端”调出终端命令输入框,输入flutter doctor进行检测。
    遇到过一下问题:
    提示没安装安卓SDK(flutter doctot会进行4项检查,第二项是SDK检测)。
    后来通过环境变量配置SDK修复:
    (1)新建一个系统环境变量,变量名为ANDROID_SDK_HOME,变量值为你的SDK安装路径
    (2)把%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools添加到Path环境变量(下面那个框,系统变量中的PATH)中。
    最后在CMD中输入adb检查是否配置正确。

    7、最后连接上手机
    需要打开开发者模式和USB调试,再FLUTTER DOCTOR一遍,4项正常即可:


    QQ截图20190106161519.png

    8、新建项目
    shift+ctrl+p调出命令框,通过flutter:new project新建项目。
    最后直接在终端命令中输入flutter run即可在手机中查看APP效果。
    其中的问题,我在run之后,卡在Initializing gradle 很久很久,解决方案如下(不知道哪个是要因,反正我每一步都做了):
    一、参考:https://blog.csdn.net/qq_16071655/article/details/84106853
    改了下镜像,但是效果不是很好。
    二、然后后来又配置了下gradle的环境变量(不知道是不是没配好导致)
    gradle在安卓studio中自带了,找出其中的目录进行配置即可:
    (1)新增系统变量GRADLE_HOME,变量值:D:\Program Files\Android\Android Studio\gradle\gradle-3.2
    (2)系统变量中的path变量值中增加;%GRADLE_HOME%\bin
    最后在CMD中输入gradle -v测试。
    三、在项目的gradle\wrapper\gradle-wrapper.properties中,把distributionUrl的值改为:
    https://services.gradle.org/distributions/gradle-4.6-all.zip

    QQ截图20190106162624.png

    搞定之后,重新flutter run,貌似由于VSCODE要下载新的gradle,结果等了好久,终于成功运行APP。


    Screenshot_20190106-162754.jpg

    最后,如果不方便用手机调试程序,可以单独启动安卓模拟器,首先在AS中创建一次模拟器后关掉。
    然后参考:https://blog.csdn.net/Baykermr/article/details/83065574
    中的 第四点: 单独启动Android Studio 模拟器(AVM),即可单独启动。

    整个过程缺乏对原因的挖掘和理解,算了,后面再在实践中研究。

    相关文章

      网友评论

        本文标题:学习笔记:FLUTTER+VSCODE环境搭建

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