Flutter 学习笔记(01)__从 0 开始创建一个 flutter 项目

最近发现有不少的公司已经跳出 uniapp 的坑坑，开始使用 flutter 开发app了，为了让自己不失业，赶紧卷起来！此篇文章教你从 0 基础开发一个 简单页面，文章篇幅较长，建议收藏！也可以直接参考官方中文文档：
https://flutter.cn/community/china

 

一、环境配置

1.1、系统配置要求

要想安装和运行 Flutter，你的开发环境至少应该满足如下的需求：

• 操作系统：Windows 10 或更高的版本（基于 x86-64 的 64 位操作系统）。
• 磁盘空间：除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。
• 设置: 必须在 Windows 10/11 上启用开发者模式。
• 工具：要让 Flutter 在你的开发环境中正常使用，依赖于以下的工具：

• Windows PowerShell 5.0 或者更高的版本（Windows 10 中已预装）
• Git for Windows 2.x，并且勾选从 Windows 命令提示符使用 Git 选项。
• 如果 Windows 版的 Git 已经安装过了，那么请确保能从命令提示符或者 PowerShell 中直接执行 git 命令。

1.2、安装 flutter SDK

SDK下载地址：
https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.10.5-stable.zip

下载之后进行解压，然后去配置 path 环境变量。

1.3、配置 path

方式1：打开 win10 开始菜单的搜索框输入 “编辑系统环境变量”，或进行方式2查找。

方式2：打开控制面板

 

选择 “系统和安全”

 

选择“系统”

 

 

选择 “高级系统设置”

 

打开环境变量，选择 path,点击 “编辑”

 

新建一个变量，将下载解压 的 flutter/bin 目录加进来。

 

检查一下 flutter 是否安装成功，可打开命令行提示符窗口，执行 where flutter dart

 

1.4、检查 flutter 配置

运行 flutter doctor 命令会检查你的现有环境，并将检测结果以报告形式呈现出来。仔细阅读它显示的内容，检查是否有尚未安装的软件或是有其他的步骤需要完成（通常会以粗体呈现）。运行结果如下：

 

如：

[✗] 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.cn/docs/setup/#android-setup for detailed instructions.

表示 Android 环境配置缺失，下边是具体配置方式

二、VScode 如何安装插件

VS Code 是一个可以运行和调试 Flutter 的轻量级编辑器。

• VS Code，最新稳定版本

安装 Flutter 和 Dart 插件

1. 打开 VS Code。
2. 选择 查看 > 命令面板。
3. 输入「install」，然后选择 Extensions: Install Extensions。
4. 在扩展搜索输入框中输入「flutter」，然后在列表中选择 FlutterInstall。此过程中会自动安装必需的 Dart 插件。
5. 点击 Reload to Activate 以重新启动 VS Code。

三、如何创建你的第一个项目？

方式1：在 VSCode 中直接创建

选择查看 > 打开命令面板 > 输入 flutter:New Project

 

选择你需要创建项目的类型，分别由 5 种类型，它们分别为：

 

• Applaction 一个 flutter 应用程序
• Module 生成一个项目，将Flutter模块添加到现有的Android或iOS应用程序中。
• Package 生成一个包含模块化Dart代码的可共享Flutter项目。
• Plugin 生成一个可共享的插件
• Skeleton 生成遵循社区最佳实践的列表视图/详细视图Flutter应用程序。

我们选择创建一个普通的 flutter 项目，选择 Applaction ，然后选择创建项目所在的文件夹，点击确定就会自动创建啦！

方式2：使用命令创建

打开创建项目存放的文件夹，输入cmd ，打开终端，或先打开终端，cd 打开方式进入存放的文件夹，然后执行：

flutter create my_first_app

注：项目名称只能出现小写字母、下划线以及0-9的数字，如果出现其他特殊字符会出现 "xxx项目名" is not a valid Dart package name.错误提示。

项目目录：

 

使用 flutter run 运行项目，运行项目提示我们需要选择运行的设备

 

由于我配置的环境较少，还是选择运行到前端都有的浏览器吧！

flutter run -d chrome

-d 表示 device 选择我们需要运行的设备类型。项目运行成功后如图所示：