手把手教你安装 flutter 并在手机上运行 Demo

安装步骤

1、下载安装 git、flutter sdk、android studio (关键是 Android SDK 组件)

在首次打开 android studio 时,会提示本机没有 Android SDK,点击取消,然后一直点下一步,它会帮你安装好 Android SDK

2、在Flutter安装目录的flutter文件夹下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

如果希望能在 powershell、cmd 里使用 flutter 命令,需要添加环境变量到本机:

  • 转到 “控制面板>用户帐户>更改我的环境变量”
  • 在“用户变量”下检查是否有名为“Path”的条目:
  • 如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
  • 如果条目不存在, 创建一个新用户变量 Path ,然后将 flutter\bin的全路径作为它的值.
  • 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。
PUB\_HOSTED\_URL https://pub.flutter-io.cn 

FLUTTER\_STORAGE\_BASE\_URL https://storage.flutter-io.cn

然后,重启 Windows

3、如果用的 vscode 编辑器,搜索安装 flutter 插件

4、在命令行工具中,运行

flutter doctor

根据其提示,安装所需的插件

5、用 USB 线将手机连接到电脑,打开 USB 调试,手机上确认连接此电脑。

这一步可以换成使用安卓模拟器而不是手机来调试,看第 9 点

观察 vscode 右下角是否出现了自己手机的型号,是,则连接成功

6、创建一个应用。

ctrl + shift + p ,输入 flutter,选择 Flutter: New Project ,输入项目名称,回车。指定放置项目的位置,确定。等待编辑器自动打开 main.dart 文件

7、安装 demo 应用

按 F5 或者 调用 Debug -> start Debugging ,vscode 开始尝试将应用安装到手机上,需要等待它完成,手机要一直亮屏。如果出错,在外部命令行工具使用 flutter doctor 查看问题并解决

8、手机提示是否安装应用,点击确定,即可打开应用。

注意,如果不点击确定,有的手机会在 n 秒后自动拒绝,需要重新尝试

9、或者使用安卓模拟器运行应用

首先安装安卓模拟器。打开 Android studio,点击右上角图标

image

image

image

选择一个安卓版本下载

image

下载完毕后,到了

image

回到 vscode,ctrl + shift + p, 点击右下角 No Device ,顶部会弹出模拟器选项,点击初始化

image.png

在模拟器初始化完毕后,点击void main() => runApp(MyApp()); 上面的 'Run' ,模拟器即可热加载代码

刚开始可能要等几分钟以启动模拟器和安装并打开 flutter 项目。直到模拟器显示当前 flutter 的界面前,不要做其他操作。
后面再次从 vscode 运行模拟器,就不用打开 Android studio ,直接可用

可能出现的问题

Android license status unknown.Try re-installing or updating your Android SDK Manager.

未安装安卓证书

解决方法:

打开 Android studio,tools - sdk manager - SDK tools , 取消底部 hide 0bsolete packages ,列表就会出现 Android SDK Tools (Obsolete) ,打勾,然后点击底部 apply,按照提示进行安装。

安装好后,在命令行运行 flutter doctor --android-licenses,会提示还有多少 SDK package license 未安装,都选 y 就行:

Warning: File C:\Users\ASUS\.android\repositories.cfg could not be loaded.

6 of 7 SDK package licenses not accepted. 100% Computing updates...

Review licenses that have not been accepted (y/N)?

输入 y,然后给每个出现的 license 都输入 y.

再次输入 flutter doctor --android-licenses,检查是否有未安装成功的 license,重复上一步


启动项目时,卡在 running gradle task 'assembledebug'

因为Gradle的Maven仓库在国外, 容易撞墙。可以使用阿里云的镜像地址进行下载

打开 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'
    }
}

使用 vscode 调试,提示

VSCode editor showing Could not find a Flutter SDK. Please ensure flutter is installed and in your PATH

此处是因为 vscode 没有检测到 flutter,重启 vscode 或者 电脑 即可

[!] Android Studio (version 3.6)

X Flutter plugin not installed; this adds Flutter specific functionality.

X Dart plugin not installed; this adds Dart specific functionality.

提示 Android studio 软件需要安装 flutter 插件和 Dart 插件。如果是用 vscode,可以不必不理会

用 vscode 的 flutter 插件的运行安卓模拟器命令 flutter: Launch Emulator

提示 No suitable Android AVD system images are available.You may need to install these using sdkmanager, for example: sdkmanager "system-images;android-27;google_apis_playstore;x86"

即未安装安卓模拟器,需要在 Android Studio 安装。
参考上面第 9 点内容

vscode 运行安卓模拟器,提示

Failed to launch emulator: RegGetValueW ... emulator: ERROR: x86 emulation currently requires hardware acceleration! Please ensure Windows Hypervisor Platform (WHPX) is properly installed and usable. CPU acceleration status: VT feature disabled in BIOS/UEFI

电脑没开启虚拟化技术,所以无法运行模拟器

百度搜索当前电脑主板的进入 BIOS 的快捷键,华硕的是 F2 或者 del。然后重启电脑,在出现 Windows 图标时,一直按快捷键,进入 BIOS。点击 “高级设置” 或 “advanced setting” -> 高级 -> cpu 设置 -> Intel 虚拟技术 (或 Intel Virtual Technology)-> 设置为 Enabled

不同主板,它的位置可能不同,名字是一样的 Intel Virtual Technology

image

你可能感兴趣的:(flutter,调试,编辑器)