(一)flutter入门之环境安装

作者: 逐梦々少年 | 来源:发表于2019-03-13 03:30 被阅读0次
    前言:时隔快三年,又想到了写博客记录平日学习的点滴,还记得16年底的时候我还在小型外包企业哼哧哼
    哧的搬砖,每天加班到半夜,很辛苦,但是好不容易有休息的时间,总是想着逛逛博客,那时候我还是刚刚
    搬砖不到一年的菜鸟,虽然经历了外包高强度的压力和多个方向的技术的洗礼,但是随着项目接触越多越深
    入,发现自己实现的功能越多,自己不会的东西越多,从java web到安卓,再到c++,似乎都能写出来,但是
    基础都不扎实,于是对知识越来越渴望,对自己的搬砖行为越来越不齿,在逛了郭林,张洪洋,任玉刚等大
    佬的博客后,我鼓起勇气写了第一篇博客,第一次写很紧张,也不知道如何去排版,于是第一次花了两天时
    间撸了5000字左右,删了改改了删,最后发出去还是满满的一大堆文字,在写了几次博客并且被人喷了以
    后,心灰意冷,决定关博,然后从写博客慢慢转为写笔记,第二年跳槽到了上海一家自主研发的企业,终于
    没有那么多的加班,周末也有时间可以研究技术,我的技术开始逐步扎实,把外包接触到的技术栈从基础认
    真的研究了一遍,花费了很长时间,这过程中慢慢从一个只会搬砖的菜鸟逐步成长,写了很多笔记,最近在
    一些前辈的鼓励下,打算重新写博客,即使现在博客排版依然不咋样,但是我希望技术分享出去能帮助到其
    他有需要的人,哪怕只有一个,博客就是有意义的。由于这几年重心都在java深入部分,突然发现安卓技术我
    依然停留在EventBus的时代,但是新技术如雨后春笋,不停的出现,mui,react native,weex等跨平台框架
    崛起,近年我司也让我开始使用混合开发技术开发安卓,我便对主流的跨平台开发方案进行了学习,weex和
    rn的坑层出不穷,我司也只有我一个移动开发出身的人员,不得已之下,使用mui、h5+的方案跨平台开发
    app,当app上线的时候,flutter这个之前没任何声响的跨平台框架横空出世一般,席卷了我生活的圈子,国内
    大厂也开始选择flutter作为开发方案,一向对技术热衷的我不愿意放弃,也开始了研究flutter之旅
    

    flutter开发环境安装

    想要使用flutter,必须要先安装flutter的开发环境,下面记录一下flutter的开发配置的流程:

    1. 下载flutter的sdk:

      ​ 想要开发flutter,就需要下载flutter的sdk,推荐下载方式为github下载最新的环境,地址为:https://github.com/flutter/flutter/releases,或者访问https://flutter.dev/docs/development/tools/sdk/archive#windows,选择Stable channel选项下的稳定sdk版本下载作为开发环境

    1552415538913.png

    可以看到2019-2-27才更新了一个稳定的大版本,1.2.1版本,我们选择点击下载,网速可能有些慢,可以选择(本人)百度云下载flutterSDK版本(失效请回复),地址为:链接:https://pan.baidu.com/s/1xpc2cAFgaDJR_obeOkj6Ig 提取码:xefa

    1. 配置环境变量:

      由于国内访问的话会有墙的存在,受到不少限制,所以我们国内开发的时候需要配置两个环境变量提高访问速度,这个时候我们将刚刚下载的flutterSdk解压到指定目录(不要有中文路径,尽量也不要给敏感目录比如c盘下的用户目录下等),然后将当前sdk下的bin目录添加至环境变量中的path的最后一行,确认无误后保存path,然后我们需要在环境变量中新增两个flutter访问的环境变量,linux系统配置如下:

      export PUB_HOSTED_URL=https://pub.flutter-io.cn
      export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
      

      如果是window,需要在系统变量下添加两个,分别如下:

      变量
      PUB_HOSTED_URL https://pub.flutter-io.cn
      FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
    1. 下载开发工具:

      配置好环境以后,我们需要下载配置对应的开发环境,喜欢原生安卓开发的可以使用Android Stutio开发,前端开发的也可以选择安装vsCode,(只要有一个就可以,Android Stutio/vsCode只要安装了配置了就可以),安装完毕以后,我们需要下载AndroidSdk,一般情况下我们使用AndroidStutio开发的用户只要打开Android Stutio下载Sdk就可以,这里贴出快捷下载AndroidStutio以及其他安卓开发工具的网站,可以选择自行下载:

      https://www.androiddevtools.cn/

    2. 检测当前flutter开发环境问题:

      来到这一步,我们基本上前面的步骤已经全部完成,但是我们如何确认flutter环境可以开发了呢?flutterSdk给我们提供了一个cmd命令可以用来检测flutter开发必须的环境是否已经完全准备就绪,我们需要打开cmd窗口,或者PowerShell 窗口,输入:

      flutter doctor
      

      然后等待一段时间,就会出现类似如下的检测结果:

      [-] Android toolchain - develop for Android devices
          • Android SDK at D:\Android\sdk
          ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
          • Try re-installing or updating your Android SDK,
            visit https://flutter.io/setup/#android-setup for detailed instructions.
      

      这里我做过测试,检测出来的结果如果前面是x标志,说明你当前缺少该环境,你需要进行一次环境检查,如Adnroid Sdk前面是X,你就要确认你当前存在AndroidSdk,或者你确认你使用Android Stutio可以创建一个安卓项目,并且能运行,(vsCode开发的话,需要检查是不是配置了Android Sdk的环境变量),如果检测的结果有X,按照我多次测试的结果,一般开发工具没问题的话,Android Sdk和Android Stutio检测是X的情况下也可以开发flutter(可能和开发工具版本有关系,尽量是不要存在X),但是如果全部都是√说明当前所有环境都是符合条件,如果是!的话说明当前环境可能不符合或者版本不正确,一般情况下只要不是X存在,说明我们当前flutter的开发环境已经准备就绪了

    3. 配置开发flutter的插件

      到了当前这一步,我们就打开开发工具创建一个flutter项目吧,打开AndroidStutio,在插件那里查询flutter插件,然后选择下载,AndroidStutio就会默认下载Dart和flutter两个插件配置进来,然后重启当前编译器,再次打开的时候,我们就可以在创建项目的时候多一个选择创建flutter的选项了,具体步骤如下:

      选择 File>New Flutter Project
      选择 Flutter application 作为 project 类型, 然后点击 Next
      输入项目名称 (如 myapp), 然后点击 Next
      点击 Finish
      等待Android Studio安装SDK并创建项目.
      

      注意:这里创建项目的时候有可能出现创建了十分钟甚至更久的情况(我每次都能遇到卡住不动的情况,无论是公司的网络还是家中百兆电信,都是一样的结果,)我们的解决方案如下:

      任务管理器中强制关闭当前开发工具
      然后重启开发工具
      找到刚刚创建flutter工程的目录,导入当前工程,这个时候我们会发现界面报错很多
      可以根据控制台看看报错是什么,百度就可以找到对应的解决方案,也可以选择重新编译试下(我每次重新编译完毕以后就没问题了,可能这就是谷歌开发的框架遗留的问题,也可能是idea系列开发工具的通病,各种无缘无故抽风)
      

      好了,至此,flutter的开发环境就完全搭建好了

      另附flutter中文网站以及vsCode开发flutter的配置相关博客供用户参考

      flutter中文网

      Window Flutter 环境搭建(VSCode + 单独运行Android 虚拟机)

    相关文章

      网友评论

        本文标题:(一)flutter入门之环境安装

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