Flutter爬坑之路window环境(一)

2,452 阅读4分钟

部署

系统环境

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: Windows 7 或更高版本 (64-bit)。
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间)。

使用Flutter所需要的依赖程式(Git for Windows,Flutter,Android Studio)

  • Git for Windows:
    • 如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令。否则后续操作会出现错误。
    • Git for Windows(Git命令行工具),国内开发者可以使用 淘宝镜像选取你需要的版本进行安装。
  • Flutter:
    • 获取安装包:
      • Flutter官网下载其最新可用的安装包
      • Flutter github项目获取安装包
    • 将安装包zip解压到你想安装Flutter SDK的路径(如:C:\flutter;注意,不要将Flutter安装到需要一些高权限的路径如 C:\Program Files\ ),之后所有需要指定Flutter SDK路径都是指向解压的路径C:\flutter。
    • 在Flutter安装目录(C:\flutter)的flutter文件下找到flutter_console.bat,双击运行并启动Flutter命令行,你就可以在Flutter命令行运行flutter命令了。
    • 配置环境变量要在终端运行 flutter 命令, 你需要添加以下环境变量到系统PATH:
      • 打开“控制面板”>“系统和安全”>“系统”>左侧侧边栏“高级系统设置”>“环境变量”
      • 在系统变量(用户变量也可以)的列表中找到Path(如果不存在就新建一个),点击编辑,新建C:\fultter\bin保存并重新启动计算机。
      • 重启完成,在任何目录(文件夹)打开Powershell
      flutter doctor
      
      该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)
      [-] 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.
      
  • Android Studio:
    • 安装Android Studio中文社区链接
    • 启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具,这是Flutter为Android开发时所必需的
    • 配置安卓模拟器,要准备在Android模拟器上运行并测试您的Flutter应用,请按照以下步骤操作:
      • 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
      • 选择一个设备并选择 Next。
      • 为要模拟的Android版本选择一个或多个系统映像,然后选择 Next. 建议使用 x86 或 x86_64 image .
      • 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
      • 配置环境变量(缺失该步骤会导致找不到模拟设备)
        • 打开“控制面板”>“系统和安全”>“系统”>左侧侧边栏“高级系统设置”>“环境变量”
        • 在系统变量(用户变量也可以)的列表中添加ANDROID_HOME,变量值:C:\Users\……\AppData\Local\Android\Sdk(此处输入Android Sdk路径)。

部署完成

如果一切顺利,我们打开Powershell再次执行'flutter doctor'能看到如下信息。

PS C:\flutter> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.720], locale zh-CN)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[!] Connected device
    ! No devices available

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/5/1714876e977bd25f~tplv-t2oaga2asx-image.image)
! Doctor found issues in 1 category.

配置编辑器 Android Studio

Android Studio: 为Flutter提供完整的IDE体验

  • 前面我们已经安装了Android Studio,此步骤略过。
  • 安装Flutter和Dart插件
    • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
    • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).
  • 安装步骤:
    1. 启动Android Studio.
    2. 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
    3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
    4. 重启Android Studio后插件生效.
  • 也可以:
    1. 启动Android Studio.
    2. 点击File>setting>plugins 搜索Flutter/Dart,选择并点击install。
    3. 重启Android Studio后插件生效.

创建一个新的项目

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

运行该项目

定位到Android Studio 工具栏:

  1. 在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用,请选择 Tools>Android>AVD Manager 并在那里创建一个(如果该步骤出现错误,应检查是否配置ANDROID_HOME的环境变量).

  2. 在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.(如果Running Gradle task 'assembleDebug'...卡在这一步则需要修改为国内阿里镜像)

    1. 在新建的项目内找到buid.gradle文件
      buildscript {
          ext.kotlin_version = '1.3.50'
          repositories {
              //修改此处
              // google()
              // jcenter()
              maven { url 'https://maven.aliyun.com/repository/google' }
              maven { url 'https://maven.aliyun.com/repository/jcenter' }
              maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
          }
      
          dependencies {
              classpath 'com.android.tools.build:gradle:3.5.0'
              classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
          }
      }
      allprojects {
          repositories {
              //修改此处
              // google()
              // jcenter()
              maven { url 'https://maven.aliyun.com/repository/google' }
              maven { url 'https://maven.aliyun.com/repository/jcenter' }
              maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
          }
      }
      

    2. 找到Flutter Sdk所在路径C:\flutter\packages\flutter_tools\gradle\flutter.gradle文件。

     buildscript {
         repositories {
             //修改此处
             // google()
             // jcenter()
             maven { url 'https://maven.aliyun.com/repository/google' }
             maven { url 'https://maven.aliyun.com/repository/jcenter' }
             maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
         }
         dependencies {
             classpath 'com.android.tools.build:gradle:3.5.0'
         }
     }
    

  3. 如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序: