创建Flutter项目的两种方式

新建项目有两种方式:

方式一:通过Android Studio新建

如果是Mac电脑第一次使用Android Studio需要先安装Flutter插件

点击设置

找到 Plugins->再搜索 Flutter ,必需的组件 Flutter SDK ,Dart 插件,Android SDK

安装完成后重启 Android Studio

点击 "New Flutter Project" (左边带有 Flutter 图标的选项)来创建您的第一个 Flutter 项目
选择 Flutter并确认已经安装了flutter的sdk,然后点Next

需要修改的设置:

  1. 项目名称 (Project name)

  2. 组织名 (Organization)

遇到了Flutter SDK的可执行文件没有执行权限,点击 "Run Flutter Doctor" 按扭,看看能否自动解决问题。

如果无效

打开终端(Terminal)并执行以下命令

bash 复制代码
# 进入 Flutter SDK 目录
cd /Users/a77/Documents/flutter_sdk/flutter

# 给 Flutter 可执行文件添加执行权限
chmod +x bin/flutter

# 给整个 bin 目录的所有文件添加执行权限
chmod +x bin/*

# 运行 flutter doctor 检查配置
./bin/flutter doctor

设置正确后,项目创建成功

如果是正式项目建议用Android Studio来创建,使用Android Studio创建的优势是:可以配置安卓的应用包名

如果使用命令行工具创建包名是自动生成。

方法二:使用命令行工具创建项目

首先 cd到要创建工程的目录中输入

flutter create flutter02 其中flutter02是项目名称

接下来cd到项目中 cd flutter02

然后输入code .用vscode打开

如果code . 指令不生效,需要手动打开vscode 安装 VS Code 命令行工具

  • 打开 VS Code 应用程序
  • Command + Shift + P 打开命令面板
  • 输入 "Shell Command: Install 'code' command in PATH"
  • 选择这个选项并执行
  • 重新启动终端

项目创建成功

工程各目录说明:

android/ - Android 平台相关代码和配置

  • 包含 Android 原生代码、Gradle 构建文件、权限配置等
  • 当您需要添加 Android 特有功能时会用到

ios/ - iOS 平台相关代码和配置

  • 包含 Xcode 项目文件、iOS 原生代码、Info.plist 等
  • 发布到 App Store 或添加 iOS 特有功能时使用

linux/ , macos/ , windows/ - 桌面平台支持

  • 分别对应 Linux、macOS、Windows 桌面应用的原生代码

web/ - Web 平台支持

  • 包含将 Flutter 应用编译为 Web 应用所需的文件

核心开发目录

lib/ - 最重要的目录,包含您的 Dart 代码

  • main.dart 是应用的入口文件
  • 这里放置所有的应用逻辑、UI 组件、页面等

test/ - 单元测试和 Widget 测试代码

  • 用于编写自动化测试确保代码质量

配置文件

pubspec.yaml - 项目配置文件,类似于 package.json

  • 声明依赖包、资源文件、版本信息等

pubspec.lock - 锁定的依赖版本信息

  • 确保团队成员使用相同版本的依赖包

其他文件

.dart_tool/ , .idea/ - 开发工具生成的配置文件
.gitignore - Git 版本控制忽略文件配置
analysis_options.yaml - Dart 代码分析规则配置
.metadata - Flutter 项目元数据
README.md - 项目说明文档

开发时主要会在 lib/ 目录中编写代码,偶尔需要修改 pubspec.yaml 来添加依赖包。

相关推荐
RaidenLiu7 小时前
Riverpod 3:组合与参数化的进阶实践
前端·flutter
ideal树叶10 小时前
Provider中的watch、read、Consumer、ChangeNotifierProvider、ValueNotifierProvider
flutter
勤劳打代码13 小时前
独辟蹊径 —— NSIS 自定义 EXE 应用名称
windows·flutter
阿笑带你学前端13 小时前
当手机遇上电视:Flutter实现局域网遥控输入的奇妙之旅
前端·flutter
早起的年轻人13 小时前
Flutter 3.35.2 以上版本中 数字转字符串的方法指南
前端·flutter
tangweiguo030519871 天前
Flutter代码生成:告别重复劳动,效率飙升
flutter
AGG_Chan1 天前
flutter专栏--深入剖析你的第一个flutter应用
前端·flutter
hqiangtai1 天前
面试复习题-Flutter
flutter·面试·职场和发展