最近发现有不少的公司已经跳出 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
下载之后进行解压,然后去配置 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 插件
- 打开 VS Code。
- 选择 查看 > 命令面板。
- 输入「install」,然后选择 Extensions: Install Extensions。
- 在扩展搜索输入框中输入「flutter」,然后在列表中选择 FlutterInstall。此过程中会自动安装必需的 Dart 插件。
- 点击 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 选择我们需要运行的设备类型。项目运行成功后如图所示: