Flutter学习笔记:开发环境搭建

本文更新于2024-12-15,使用Flutter 3.3.3,操作系统为Windows 10。

安装Flutter

  1. 下载Flutter。官网下载页面为:https://docs.flutter.dev/get-started/install/windows

    本文使用的版本的下载地址为:https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.3-stable.zip

  2. 解压zip文件。

    生成的默认目录名为flutter_windows_3.3.3-stable,下文记为$FLUTTER。

  3. 设置环境变量Path

    将$FLUTTER/flutter/bin的绝对路径加入环境变量Path。此目录下有可执行程序dart和flutter,可以运行以下命令查看环境变量是否正确设置:

    dart --version
    flutter --version [--verbose]
  4. 进行自检。

    如配置不正确或缺少组件,则会有相应提示。还会为运行做首次配置。这一过程耗时较长。

    flutter doctor

环境变量

  • FLUTTER_STORAGE_BASE_URL

Flutter命令

  • flutter analyze:运行代码分析器。
  • flutter build apk|ios:编译Android/iOS的APK。
  • flutter create [-a kotlin] [-i swift] PROJECT:创建项目。
  • flutter doctor:自检。
  • flutter doctor --android-license:同意Android SDK的许可协议。
  • flutter drive --target=FILENAME:运行集成测试。如为相对路径,则以项目目录为根。
  • flutter logs:查看日志。
  • flutter packages get:获取项目的依赖库。
  • flutter packages upgrade:升级项目的依赖库至最新版本。
  • flutter run [-d chrome --web-renderer html|canvaskit] [--trace-startup --profile]:运行项目。输入r可进行热修复。--trace-startup --profile用于启动时间分析,但不能使用虚拟设备。
  • flutter test [FILENAME]:运行单元测试和组件测试。如为相对路径,则以项目目录为根;若不指定文件,则运行所有测试。
  • flutter upgrade:升级。升级完后自动执行自检。

使用Android Studio开发

本文使用Android Studio 2021.3.1。

安装Android Studio

  1. 下载Android Studio。官网下载页面为:https://developer.android.google.cn/studio/

    本文使用的版本的下载地址为:https://redirector.gvt1.com/edgedl/android/studio/install/2021.3.1.16/android-studio-2021.3.1.16-windows.exe

  2. 安装Android Studio。

  3. 启动Android Studio。第一次启动时会进行一些配置,并下载一些文件。

    “Verify Settings”界面会列出所有的配置项,“SDK Components to Download”项如为空,则可能需修改host文件,增加一行:

    203.208.40.97 dl.google.com

Android Studio安装插件

  1. 安装Flutter插件,会自动安装Dart插件。

    安装完成需要重启Android Studio,会出现“New Flutter Project”选项。

Android Studio运行项目

  1. 创建虚拟设备。

    在虚拟设备管理器“Virtual Device Manager”中创建虚拟设备。

  2. 创建Flutter项目。

    使用“New Flutter Project”创建项目,选择“Flutter”并填写“Flutter SDK path”(即$FLUTTER/flutter的绝对路径),创建的时候可能耗时较长。“Project Name”必需以小写开头,且不可有空格。如“Platforms”勾选了“Web”,则可以使用浏览器作为虚拟设备。

  3. 运行项目。

    选择一个虚拟设备,入口点默认为main.dart文件,点击绿色三角形按钮,编译并在虚拟设备上运行。这一过程耗时较长。默认的程序是一个点击计数器。

使用VSCode开发

本文使用VSCode 1.71.2。

安装VSCode

VSCode安装插件

  1. 在VSCode扩展中安装Flutter插件,会自动安装Dart插件。

VSCode运行项目

  1. 创建Flutter项目。

    使用快捷键Ctrl+Shift+P,选择“Flutter: New Project”创建项目。

    “Application”为创建应用程序项目。

  2. 选择设备。

    使用快捷键Ctrl+Shift+P,选择“Flutter: Select Device”,再选择对应的设备。

  3. 运行项目。

    点击VSCode右上方的三角形图标,选择“Start Debugging”开始调试,或选择“Run Without Debugging”直接运行不调试。这一过程耗时较长,默认的应用程序是一个点击计数器。

    可使用快捷键Ctrl+Shift+D打开“运行和调试”面板,选择对应的配置。

  4. 热重载。

    点击黄色闪电图标或快捷键Ctrl+F5,可进行热重载。

配置.vscode/launch.json

如需对VSCode项目进行配置,则在项目目录下创建.vscode/launch.json(或在“运行和调试”面板快速创建)。文件内容示例如下:

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "testdemo",
"request": "launch",
"type": "dart",
// "args": ["--web-renderer html"]
}
]
}
posted @   garvenc  阅读(47)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目
历史上的今天:
2022-12-24 FreeSWITCH学习笔记:EventSocket
点击右上角即可分享
微信分享提示