美文网首页
配置 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