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

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

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

 

一、环境配置

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:打开控制面板

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

 

选择 “系统和安全”

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

 

选择“系统”

 

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

 

选择 “高级系统设置”

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

 

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

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

 

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

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

 

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

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

 

1.4、检查 flutter 配置

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

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

 

如:

[✗] 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

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

 

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

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

 

  • 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 学习笔记(01)__从 0 开始创建一个 flutter 项目_Flutter_13

 

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

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

 

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

flutter run -d chrome

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

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