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

转载 作者：我是一只小鸟 更新时间：2023-08-11 22:31:51 26 4

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

  。

1、环境配置

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 环境配置缺失，下边是具体配置方式 。

2、VScode 如何安装插件

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

• VS Code，最新稳定版本

安装 Flutter 和 Dart 插件 。

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

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

方式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 选择我们需要运行的设备类型。项目运行成功后如图所示:

最后此篇关于Flutter学习笔记(01)__从0开始创建一个flutter项目的文章就讲到这里了,如果你想了解更多关于Flutter学习笔记(01)__从0开始创建一个flutter项目的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0

• java - WebService 项目 Java on Gradle 项目

  我正在使用 NetBeans 开发 Java 中的 WebService，并使用 gradle 作为依赖管理。 我找到了this article关于使用 gradle 开发 Web 项目。它使用 Gr

• java - Gradle 生成 Eclipse 项目 EAR 项目

  我正在将旧项目从 ant 迁移到 gradle(以使用其依赖项管理和构建功能)，并且在生成 时遇到问题>eclipse 项目。今天的大问题是因为该项目有一些子项目被拆分成 war 和 jar 包部署到

• c - *** 检测到 glibc *** 项目/调试/项目 : free():

  我已经为这个错误苦苦挣扎了很长时间。如果有帮助的话，我会提供一些问题的快照。请指导我该怎么办？？？？在我看来，它看起来一团糟。 *** glibc detected *** /home/shivam/

• java - Netbeans 不会在“项目”选项卡中显示 Web 项目

  我在 Ubuntu 12.10 上运行 NetBeans 7.3。我正在学习 Java Web 开发类(class)，因此我有一个名为 jsage8 的项目，其中包含我为该类(class)所做的工作。

• c# - 具有单元测试和模拟的开源 C# 项目(不是 MVC 项目)

  我想知道 Codeplex、GitHub 等中是否有任何突出的项目是 C# 和 ASP.NET，甚至只是 C# API 与功能测试 (NUnit) 和模拟(RhinoMocks、NMock 等)。 重

• java - 项目 'X' 缺少必需的 Java 项目 : 'Y'

  我创建了一个 Maven 项目，包装类型为“jar”，名为“Y”我已经完成了“Maven 安装”，并且可以在我的本地存储库中找到它.. 然后，我创建了另一个项目，包装类型为“war”，称为“X”。在这

• android - 项目 'HelloFacebookSample' 缺少必需的 Java 项目 'facebook'

  我一直在关注the instructions用于将 facebook SDK 集成到我的应用程序中。除了“helloFacebookSample”之外，我已经成功地编译并运行了所有给定的示例应用程序。

• java - 既然已经有了 OpenJDK 项目，为什么我们还需要 Apache Harmony 项目

  我想知道，为什么我们(Java 社区)需要 Apache Harmony 项目，而已经有了 OpenJDK 项目。两者不是都是在开源许可下发布的吗？ 最佳答案 事实恰恰相反。 Harmony 的成立是

• java - Jsoup 中的正则表达式适用于 java 项目，不适用于 Android 项目

  我正在尝试使用 Jsoup HTML Parser 从网站获取缩略图 URL我需要提取所有以 60x60.jpg(或 png)结尾的 URL(所有缩略图 URL 都以此 URL 结尾) 问题是我让它在

• android - 无法构建 android gradle 项目 - 对于 cordova 项目

  我无法构建 gradle 项目，即使我编辑 gradle 属性，我也会收到以下错误: Error:(22, 1) A problem occurred evaluating root project

• object - Swift - 在 NSArray 中插入对象/项目/添加对象/项目

  我有这个代码: var NToDel:NSArray = [] var addInNToDelArray = "Test1 \ Test2" 如何在 NToDel:NSArray 中添加 addInN

• javascript - 单击显示更多(按钮)后如何将主题列表限制为 5(项目)仅显示 3(项目)

  如何在单击显示更多(按钮)后将主题列表限制为 5 个(项目)。 还有 3(项目)，依此类推到列表末尾，然后它会显示显示更少(按钮)。 例如:在 Udemy 过滤器选项中，当您点击查看更多按钮时，它仅显

• android-studio - Flutter:如何导入现有的 Flutter 项目，作为 gradle 项目

  如何将现有的 Flutter 项目导入为 gradle 项目？ “导入项目”向导要求 Gradle 主路径。 我有 gradle，安装在我的系统中。但是这里需要设置什么(哪条路径)。 这是我正在尝试的

• java - IntelliJ - 将 Java 项目/模块转换为 Maven 项目/模块

  我有一个关于 Bitbucket 的项目。只有源被提交。为了将项目检索到新机器上，我在 IntelliJ 中使用了 Version Control > Checkout from Ve

• java - 设置一个 maven-web 项目(来自现有的 netbeans-maven-web 项目)

  所以，我想更改我公司的一个项目，以使用一些与 IDE 无关的设置。我在使用 Tomcat 设置 Java 应用程序方面有非常少的经验(我几乎不记得它是如何工作的)。 因此，为了帮助制作独立于 IDE

• ios - 在 Swift 项目 (XCode 6.3) 中集成 Cocos2dx 项目

  我有 2 个独立的项目，一个在 Cocos2dx v3.6 中，一个在 Swift 中。我想从 Swift 项目开始游戏。我该怎么做？ 我已经将整个 cocos2dx 项目复制到我的 Swift 项目

• ios - 无法使用 CLI 构建 Cordova iOS 项目，但可以构建/运行 Xcode 项目

  Cordova 绝对是新手。这些是我完成的步骤: checkout 现有项目 运行cordova build ios 以上生成此构建错误: (node:10242) UnhandledPromiseR

• javascript - 如何在单击特定 li 时隐藏所有 li 项目，并使用 jquery 在鼠标悬停时再次显示该项目下方的剩余 li 项目

  我正在使用 JQuery 隐藏/显示 li。我的要求是，当我点击任何 li 时，它应该显示但隐藏所有其他 li 项目。当我将鼠标悬停在文本上时 'show all list item but don

• java - 将 Eclipse java 项目(带有 java 源文件夹)转换为 gradle 项目

  我想将我所有的java 项目(223 个项目)迁移到gradle 项目。我正在使用由 SpringSource STS 团队开发的 Gradle Eclipse 插件。 目前，我所有的 java 项目

• java - 我无法在 eclipse luna IDE 中创建新的 Web 项目(找不到创建新的 Web 项目)

  我下载this Eclipse Luna ，对于 Java EE 开发人员，如描述中所见，它支持 Web 应用程序。我找不到 file -> new -> other -> web projects