Day01环境配置以及第一个简单应用

一、环境安装配置

1、安装的前置条件

本机环境:Windows 11,安装了java环境,已经安装了AndroidStdio 2024.1.2.10

注意:AndroidStdio的版本不能太老,Flutter对AndroidStdio的版本要求:Android Studio 2023.3.1 (Jellyfish)

开发工具

#

下载并安装以下软件包的 Windows 版本:

  • Git for Windows 2.27 或更高的版本来管理源代码。
  • Android Studio 2023.3.1 (Jellyfish) 或更高版本来调试和编译 Android 的 Java 或 Kotlin 代码。 Flutter 需要完整版本的 Android Studio。

上述软件的开发商为这些产品提供支持。如果需要排查安装的问题,请查阅该产品的文档。

Flutter的官网推荐使用Visual Studio Code,但我主要的目标平台是Android,并且有过原生Android的开发经验,所以选择使用Android Studio

2、安装Flutter SDK

如果电脑上已经有Visual Studio Code,可以直接使用 VS Code 安装 Flutter,这样安装比较简单,不用手动去配置环境变量。

(1)使用 VS Code 安装 Flutter

#

在使用以下流程来安装 Flutter 前,请确保你已经安装 Visual Studio Code 1.77 或更高版本,以及 Flutter extension for VS Code

根据 VS Code 的提示,安装 Flutter

#

  1. 启动 VS Code。

  2. 打开 命令面板 (Command Palette),按下快捷键 Control + Shift + P。

  3. 命令面板 (Command Palette) 中输入 flutter

  4. 选择 Flutter: New Project

  5. VS Code 会提示你在计算机上找到 Flutter SDK。

    1. 如果你已经安装 Flutter SDK,请单击 Locate SDK

    2. 如果你没有安装 Flutter SDK, 请单击 Download SDK

      如果你没有按照 开发工具的必要条件 安装 Git for Windows ,单击该按钮后会导航至 Flutter 安装页面。

  6. 当提示 Which Flutter template? 的时候,请忽略它。可以按下 Esc。你可以在检查完开发配置后创建初始测试项目。

下载 Flutter SDK

#

  1. 当对话框 Select Folder for Flutter SDK 显示时,选择你想要安装 Flutter 的位置。

    VS Code 会打开你默认的位置。你可以选择其他位置。

    请考虑 %USERPROFILE%C:\dev 这样的位置。

    warning请注意

    不要将 Flutter 安装到以下情况的目录或路径中:

    • 路径包含特殊字符或空格。
    • 路径需要较高的权限。

    例如,C:\Program Files 路径就是以上情况。

  2. 单击 Clone Flutter

    在下载 Flutter 时,VS Code 会弹出该通知:

    Downloading the Flutter SDK. This may take a few minutes.
    

    content_copy

    下载需要一些时间。如果你怀疑下载被挂起,请单击 Cancel 取消下载后,再重新尝试安装。

  3. Flutter 一旦完成下载, 输出 (Output) 面板就会显示。

    Checking Dart SDK version...
    Downloading Dart SDK from the Flutter engine ...
    Expanding downloaded archive...
    

    content_copy

    成功后,VS Code 会弹出该通知:

    Initializing the Flutter SDK. This may take a few minutes.
    

    content_copy

    初始化时,输出 (Output) 面板会显示下面的内容:

    Building flutter tool...
    Running pub upgrade...
    Resolving dependencies...
    Got dependencies.
    Downloading Material fonts...
    Downloading Gradle Wrapper...
    Downloading package sky_engine...
    Downloading flutter_patched_sdk tools...
    Downloading flutter_patched_sdk_product tools...
    Downloading windows-x64 tools...
    Downloading windows-x64/font-subset tools...
    

    content_copy

    该进程还会运行 flutter doctor -v。此时,请忽略该输出。因为 Flutter Doctor 可能会显示与本次快速启动无关的错误。

    Flutter 安装成功后,VS Code 会弹出该通知:

    Do you want to add the Flutter SDK to PATH so it's accessible
    in external terminals?
    

    content_copy

  4. 单击 Add SDK to PATH

    成功后会显示通知:

    The Flutter SDK was added to your PATH
    

    content_copy

  5. VS Code 可能会显示一则 Google Analytics 的通知。

    如果你同意,请单击 OK

  6. 在所有 PowerShell 窗口中启用 flutter

    1. 关闭,然后重新打开所有 PowerShell 窗口。
    2. 重新启动 VS Code。

(2)自行下载安装

从归档列表中下载 Flutter SDK 压缩包,将压缩包移动到你想要的位置,然后解压 SDK,以此来安装 Flutter。

  1. 下载以下 Flutter SDK 最新 stable 版本的压缩包。

    flutter_windows_3.24.3-stable.zip

    关于其他发布渠道和旧版本,请查阅 Flutter SDK 归档列表

    Flutter SDK 应该会下载至 Windows 默认下载目录: %USERPROFILE%\Downloads

    如果你自行更改了下载目录的位置,那么请将之后步骤中解压指令 (Expand-Archive) 的路径 (-Path) 改为你更改后的路径。如果你需要查找当前计算机下载目录的位置,请查阅 Microsoft Community post

  2. 创建一个文件夹,用于安装 Flutter。

    Consider creating a directory at %USERPROFILE% (C:\Users\{username}) 或者 %LOCALAPPDATA% (C:\Users\{username}\AppData\Local).

    可以考虑在 %USERPROFILE% (C:\Users\{username}) 或者 %LOCALAPPDATA% (C:\Users\{username}\AppData\Local) 中创建一个目录。

    warning请注意

    不要将 Flutter 安装到以下情况的目录或路径中:

    • 路径包含特殊字符或空格。
    • 路径需要较高的权限。

    例如,C:\Program Files 路径就是以上情况。

  3. 将 Flutter SDK 压缩文件 (zip) 解压到你想要存储的目录中。可以使用以下指令进行解压。

      PS C:\> Expand-Archive `
          –Path $env:USERPROFILE\Downloads\flutter_windows_3.24.3-stable.zip `
          -Destination $env:USERPROFILE\dev\
    

    content_copy

    完成后,Flutter SDK 应该会位于 C:\user\{username}\dev\flutter 目录中。

更新 Windows PATH 环境变量

#

help帮助

将 Flutter 添加到 PATH 环境变量后,才能在 PowerShell 中运行 Flutter 指令。本节假定你在 %USERPROFILE%\dev\flutter 中安装了 Flutter SDK。

  1. 按下快捷键 Windows + Pause。

    如果你的键盘上没有 Pause 键,请尝试 Windows + Fn + B。

    这将会显示 系统 > 系统信息 的窗口。

  2. 单击 高级系统设置 > 高级 > 环境变量…

    这将会显示 环境变量 的窗口。

  3. username 用户变量 的部分中,找到 Path 条目。

    1. 如果存在该条目,请双击它。

      这将会显示 编辑环境变量 的窗口。

      1. 双击空白行。
      2. 输入 %USERPROFILE%\dev\flutter\bin
      3. 单击选中 %USERPROFILE%\dev\flutter\bin 条目。
      4. 单击 上移,直到 Flutter 条目位于列表顶部。
      5. 顺着打开的窗口依次点击 确认(三次)。
    2. 如果条目不存在,请单击 新建…

      这将会显示 新建用户变量 的窗口。

      1. 变量名 框中,输入 Path
      2. 变量值 框中,输入 %USERPROFILE%\dev\flutter\bin
      3. 顺着打开的窗口依次点击 确认(三次)。
  4. 为了启用这些更改,请关闭并重新打开所有现有命令提示符和 PowerShell 实例。

二、使用Android Studio创建第一个Flutter应用

1、安装Flutter插件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里已经安装好了,刚安装的时候需要重启一下Android Studio

2、新建Flutter项目

安装好Flutter插件后,新建项目的时候会比以往多出一个New Flutter Project
在这里插入图片描述

点击后进入下一个页面,选择Flutter,然后还要找到刚才安装的Flutter的目录
在这里插入图片描述

然后点击Next,给项目命名,选择目标平台,选择语言,我自己使用的是java
在这里插入图片描述

然后直接Create就行

后面的代码编写就直接参考官网的新手教程,Flutter有中文的官网,教程很详细

构建您的第一个 Flutter 应用 (google.cn)

75083995)]

然后点击Next,给项目命名,选择目标平台,选择语言,我自己使用的是java

[外链图片转存中…(img-jb9DTmiS-1727175083996)]

然后直接Create就行

后面的代码编写就直接参考官网的新手教程,Flutter有中文的官网,教程很详细

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值