美文网首页
如何搭建你的Flutter环境

如何搭建你的Flutter环境

作者: 全世界最酷的李大厨 | 来源:发表于2019-07-24 16:54 被阅读0次

    Flutter是什么?

    Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。

    为什么要使用Flutter?

    Flutter有什么优势?它可以帮助你:

    • 提高开发效率
      1. 同一份代码开发iOS和Android
      2. 用更少的代码做更多的事情
      3. 轻松迭代
        - 在应用程序运行时更改代码并重新加载(通过热重载)
        - 修复崩溃并继续从应用程序停止的地方进行调试
    • 创建美观,高度定制的用户体验
      1. 受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
      2. 实现定制、美观、品牌驱动的设计,而不受原生控件的限制Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

    话不多说,这篇文章只聊如何从0到1开始flutter之旅。(本篇教程步骤都在Mac电脑下完成)

    使用镜像

    由于国内访问flutter有限制,Flutter官方为中国开发者搭建了临时镜像,所以我们需要在本机添加环境变量

    • 查看本机环境变量
    cat .bash_profile
    
    • 编辑本机环境变量
    vi .bash_profile
    
    • .bash_profile里添加以下两条
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
    • 应用.bash_profile
    source .bash_profile
    

    获取Flutter SDK

    你可以选择去官网下载(需要“科学上网”)或者像我一样直接在github下载,附上github地址:
    https://github.com/flutter/flutter
    下载flutter之后确定你的Flutter SDK的目录,打开 .bash_profile 添加以下行

    export PATH=your_flutter_location/flutter/bin:$PATH
    

    添加之后别忘了source .bash_profile

    运行 flutter doctor

    Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。运行以下命令查看是否需要安装其它依赖项来完成安装:

    flutter doctor
    

    一般来说有可能会遇到android sdk没安装或者版本太低或者没有添加ANDROID_HOME等问题,自行安装即可。
    附上我自己的.bash_profile供参考

    export JAVA_HOME=$(/usr/libexec/java_home -v1.8)
    export SCALA_HOME=/usr/local/share/scala
    export PATH=$PATH:$SCALA_HOME/bin
    export PATH=/usr/local/Cellar/python/2.7.13/bin:$PATH
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export PATH=/Users/xyli/IdeaProjects/flutter/flutter/bin:$PATH
    export ANDROID_HOME=/Users/xyli/Library/Android/sdk
    export PATH=${PATH}:${ANDROID_HOME}/tools
    export PATH=${PATH}:${ANDROID_HOME}/platform-tools
    

    在安装Android SDK之后遇到一个问题,运行flutter doctor时一直报错# Flutter.io Android License Status Unknown
    造成这个问题的原因是我的jdk版本太高,切换成jdk1.8之后再运行flutter doctor就没有问题了。之后运行flutter doctor --android-licenses一路y下去就可以了。
    最后再运行flutter doctor全绿就代表你的Flutter已经配置好了,可以愉快的开始hello world了。

    附上跟随官网写的flutter demo: https://github.com/lixueying/flutter-demo

    参考鸣谢: https://flutterchina.club/get-started/install/

    相关文章

      网友评论

          本文标题:如何搭建你的Flutter环境

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