美文网首页
配置 Flutter 环境

配置 Flutter 环境

作者: 打碟的DJ | 来源:发表于2020-05-16 16:04 被阅读0次

    Flutter 环境配置

    配置环境变量

    • 1、打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同
    • 2、加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径
    # 国内用户需要设置
    export PUB_HOSTED_URL=https://pub.flutter-io.cn 
    
    # 国内用户需要设置
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
    
    # 设置flutter的路径
    export PATH=~/Documents/flutter/bin:$PATH
    

    注意:PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径,比如“~/Documents/flutter”

    export PATH=~~/Documents/flutter/bin:$PATH
    
    • 3、运行 source $HOME/.bash_profile 刷新当前终端窗口
    • 4、通过运行flutter/bin命令验证目录是否在已经在PATH中:
    echo $PATH
    
    • 5、运行 flutter doctor 命令查看是否需要安装其它依赖项来完成安装:
    [✗] Android toolchain - develop for Android devices
        ✗ Unable to locate Android SDK.
          Install Android Studio from:
          https://developer.android.com/studio/index.html
          On first launch it will assist you in installing the Android SDK
          components.
          (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
          for detailed instructions).
          If the Android SDK has been installed to a custom location, set
          ANDROID_SDK_ROOT to that location.
          You may also want to add it to your PATH environment variable.
    

    该情况是未安装 Android Studio,请先安装 Android Studio

    [!] Android Studio (version 3.6)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
    

    该情况是因为 android studio 里还少了两个插件。我们打开 andriod studio。

    • 5.1、打开 preferences
    • 5.2、找到 Plugins,搜索 flutter
    • 5.3、有弹框提示要安装dart,同意。等安装好后重启andriod studio。
    [!] VS Code (version 1.45.1)
        ✗ Flutter extension not installed; install from
          https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
    

    该情况是在 vscode 中未配置 flutter 插件,搜索 flutter 和 Dart 插件安装

    配置编辑器

    一般编写 Flutter 可以使用 Android Studio 和 Visual Studio Code,Flutter官网配置编辑器教程

    配置 Android Studio

    • 1、安装Android Studio

      下载Android Studio
    • 2、配置SDK
      下载安装好 Android Studio 后,首次打开会提醒你安装 SDK。当我们安装好 SDK 后,打开 Android Studio

    • 3、【command + ,】,进入偏好设置,如下图:


      偏好设置
    • 4、安装 Android Studio 的 Flutter 插件,安装的时候会跳出安装 Dart 的插件,点击 YES 进行安装,如下图:


      安装 Flutter 插件
    • 5、安装好插件后,重启 Android Studio,然后创建 Flutter 项目,如下图
      ![创建 Flutter 项目](https://img.haomeiwen.com/i1428991/a2aa858bcdd4e9c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/340

    • 6、如果遇到许可证问题,在终端输入 flutter doctor --android-licenses 命令,输入 y 回车即可


      许可证问题
    • 7、配置安卓模拟器

      • 7.1、打开 Android Virtual Devices Manager


        配置安卓模拟器
      • 7.2、选择模拟器型号,点击next


        选择模拟器
      • 7.3、选中一个点击 next 进行下载


      • 7.4、点击 finnish 完成模拟器安装


    7.5、点击红色框内的按钮运行模拟器


    配置 VS Code

    1、下载安装 VS Code

    下载 VS Code

    2、安装 Flutter 插件


    安装 Flutter插件

    3、通过 Flutter Doctor 验证您的设置


    验证设置

    运行项目

    Flutter 官方运行项目

    Android Studio 运行项目

    • 1、创建 Flutter 项目
    创建项目
    • 2、选择 Flutter Application,点击 next,如下图:


    • 3、设置项目名称(例如:flutter_demo,不要使用驼峰命名,使用下划线命名)


    • 4、配置包名


    • 5、运行项目


    • 6、运行效果


      安卓运行效果图
    iOS运行效果

    VS Code 运行项目

    • 1、启动 VS Code
    • 2、调用 View -> Command Palette,或者按快捷键 command + shift + P


    • 3、输入 flutter,然后选择“Flutter: New Project” 选项


    • 4、输入项目名称(如:hello_word),然后按回车键


    • 5、指定项目的目录,然后点击蓝色确定按钮


    • 6、等待项目创建,并显示 main.dart 文件
    • 7、选择模拟器


      选择模拟器
    • 8、运行项目,选择菜单栏中的 Run -> Start Debugging,或者按 F5,如下图


    以上就是 Flutter 配置环境的整个流程,下面开始我们的 Flutter 编程之旅吧!!!

    相关文章

      网友评论

          本文标题:配置 Flutter 环境

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