flutter学习-day1-环境搭建和启动第一个项目

目录

1. SDK 下载
2. 配置环境变量
3. 安装 flutter
4. 搭建 Android 环境
5. SDK 和依赖升级
6. IDE 配置与使用
   1. Android Studio 配置与使用
   2. VS Code 配置与使用
7. 真机调试

---

本文学习和引用自《Flutter实战·第二版》：作者：杜文

1. SDK下载

前置需要操作系统 window 7 或更高版本，且安装了 Git 命令行工具

• 首先去 flutter 官网下载其最新可用的安装包，下载地址：传送门
• 将安装包 zip 解压到你想安装 flutter SDK 的路径（如：D:\flutter。注意，不要将 flutter 安装到需要一些高权限的路径如 C:\Program Files\）

2. 配置环境变量

如果你想在 Windows 系统自带命令行运行 flutter 命令，需要添加以下环境变量到用户 PATH

• 在开始菜单的搜索功能键入env，然后选择编辑系统环境变量
• 在用户变量下检查是否有名为Path的条目
• 在Path中添加flutter\bin的全路径，使用;作为分隔符，比如：D:\flutter\bin
• 保存更改

3. 安装flutter

• 打开命令行，执行flutter doctor命令，查看是否还需要安装其他依赖，如果需要，安装它们
• 第一次运行 flutter 命令时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多

4. 搭建Android环境

flutter 依赖于 Android Studio 的全量安装。Android Studio 不仅可以管理 Android 平台依赖、SDK 版本等，而且它也是 flutter 开发推荐的 IDE 之一

• 下载安装 Android Studio，下载地址：传送门
• 启动 Android Studio，然后跟着安装向导操作。勾选安装最新的 Android SDK、Android SDK 平台工具和 Android SDK 构建工具

5. SDK和依赖升级

• flutter SDK 有多个分支，如 beta、dev、master、stable，一般都是使用 stable。查看分支可以运行：

flutter channel

• 要升级 flutter sdk，只需在命令行运行：

flutter upgrade

• 如果你只想更新项目依赖包，可以使用：

flutter pub get

注意：flutter2.0 请使用：flutter packages get

6. IDE配置与使用

flutter 官方建议使用 Android Studio 或者 VS Code 进行开发，以获得更好的开发体验。

6-1. AndroidStudio配置与使用

• 首先下载好 Android Studio，然后按照如下步骤进行配置：

  • 启动 Android Studio
  • 点击左上角：file > Settings > Plugins > Browse repositories…，搜索 flutter 插件并点击 install
  • 重启 Android Studio 后插件生效

• Android Studio 可以直接创建一个 flutter 项目，步骤如下：

  • 点击左上角：file > new > new flutter project
  • 选择 flutter 项目模板，然后点击 next
  • 输入项目名称，然后点击 finish
  • 等待 Android Studio 安装 SDK 并创建项目
  • 到 Android Studio 工具栏，点击绿色的 Run 图标
  • 显示出模拟器则启动完成

6-2. VSCode配置与使用

• 首先下载好 VS Code，然后按照如下步骤进行配置：
  • 点击左上角：View > Command Palette…
  • 在搜索框输入 flutter，然后点击 Install
  • 点击左上角：View > Command Palette…，输入 flutter, 然后选择 Flutter: New Project，按步骤确定
  • 等待项目创建继续，并显示 main.dart 文件
  • 按下 F5，显示出模拟器则启动完成

7. 真机调试

想要在真机上运行项目，步骤如下：

• 使用 USB 将手机插入电脑，在 Android 手机上启用开发人员选项和 USB 调试
• 如果设备出现调试授权提示，请授权你的电脑可以访问该设备
• 到 Android Studio 工具栏，点击 Device Selection，选择真机设备名
• 点击绿色 Run 图标
• 手机会自动安装项目，点同意即可

---

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金