美文网首页Flutter圈子让前端飞Flutter中文社区
Flutter搭建开发环境和工具安装配置

Flutter搭建开发环境和工具安装配置

作者: Miaoz0070 | 来源:发表于2020-04-23 15:50 被阅读0次
    Flutter

    开始Flutter之前,必须先把开发Flutter所需的环境和工具等配置完成,本章讲下Mac系统下安装配置Flutter环境。

    1.Flutter镜像安装,Flutter官方为中国开发者搭建了临时镜像,大家可以不用VPN就可以快速安装,建议安装到根目录下,方面查找和对应。
    //依次执行命令
    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
    export PATH="$PWD/flutter/bin:$PATH"
    cd ./flutter
    flutter doctor 
    
    演示
    • flutter doctor :这个是检查flutter环境是否有问题,如果有问题需要一一解决。
      如图:


      flutter doctor
    • 上边两次错误是Android Studio 和 VSCode IDE IDE配置不对未完成(因为我本地有Xcode、Android Studio、VSCode)所以检测出来是没有配置Flutter插件。
      如果以上你都很顺利基本上环境是在你的系统上了,但是你可能发现你的环境变量只能在根目录能找到flutter命令。或者每次执行export PATH="$PWD/flutter/bin:$PATH",才能使用flutter命令。不着急我们接下来修改下环境变量。
    2.更新环境变量

    (1). 需要打开/.bash_profile,如果没有需要创建。
    (2).添加路径到文件中。

    更新变量
    其中PATH就是你自己安装FlutterSDK的路径,如果不知道路径可以执行 which flutter来查看具体安装的路径。
    (3).运行source $HOME/.bash_profile 刷新当前终端窗口
    注意:如果你的系统是10.15的系统可能不起作用,因为10.15系统终端是zsh,终端启动时 ~/.bash_profile将不会被加载,解决办法就是修改 ~/.zshrc,在其中添加:source ~/.bash_profile
    3.升级Flutter SDK和依赖包

    升级flutter sdk命令

    flutter upgrade
    

    该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包(不包括Flutter SDK),可以使用如下命令:

    flutter packages get获取项目所有的依赖包。
    flutter packages upgrade 获取项目所有依赖包的最新版本。
    
    4.安装Xcode、Android Studio

    为iOS开发Flutter程序,需要安装iOS开发工具Xcode,一般安装开发工具后所需要的命令行工具也会一并安装。
    为Android开发Flutter程序,需要安装Android开发工具Android Studio。

    5.IDE配置和使用

    我们可以选择Android Studio和VScode两种工具进行开发flutter。
    需要安装俩个插件:

    • Flutter插件,支持Flutter开发工作流 (运行、调试、热重载等)。
    • Dart插件,提供代码分析 (输入代码时进行验证、代码补全等)。
    Android Studio

    1.打开启动Android Studio
    2.打开插件首选项(macOS:Preferences>Plugins或者快捷键Command+,
    3.选择Plugins,搜索Flutter、Dart插件下载,并重新启动Android Studio后插件生效。
    4.创建App,如下。

    Android Studo new Flutter
    项目中创建
    VS Code

    1.打开启动VS Code
    2.顶部选择栏选择查看>扩展选项(macOS快捷键:Command+Shift+X
    3.搜索框搜索flutter、dart并下载,并重新启动VS Code。
    4.验证配置和创建App,使用命令Command+Shift+P,输入框输入flutter会出现

    //检测vscode当前flutter环境
    Flutter:Run Flutter Doctor
    //快捷键创建flutter项目
    Flutter:New Project
    //更新fluttersdk
    Flutter:Run Flutter Upgrage
    
    vscode验证和创建

    以上基本上就是全部的环境和工具的配置。
    当然中间也会碰到各种各样的问题,特别是对原生iOS和Android不懂得开发,可能会碰到很多坑,如有疑问可以私信留言。
    参考:
    Using Flutter in China
    搭建Flutter开发环境

    相关文章

      网友评论

        本文标题:Flutter搭建开发环境和工具安装配置

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