创建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 来添加依赖包。

相关推荐
renke336427 分钟前
Flutter for OpenHarmony:构建一个 Flutter 色彩调和师游戏,RGB 空间探索、感知色差计算与视觉认知训练的工程实现
flutter·游戏
王码码203535 分钟前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
ujainu2 小时前
Flutter + OpenHarmony 实现经典打砖块游戏开发实战—— 物理反弹、碰撞检测与关卡系统
flutter·游戏·openharmony·arkanoid·breakout
微祎_2 小时前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
王码码20352 小时前
Flutter for OpenHarmony 实战之基础组件:第二十七篇 BottomSheet — 动态底部弹窗与底部栏菜单
android·flutter·harmonyos
ZH15455891313 小时前
Flutter for OpenHarmony Python学习助手实战:Web开发框架应用的实现
python·学习·flutter
晚霞的不甘3 小时前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙
百锦再3 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
廖松洋(Alina)4 小时前
【收尾以及复盘】flutter开发鸿蒙APP之成就徽章页面
flutter·华为·开源·harmonyos·鸿蒙
ZH15455891314 小时前
Flutter for OpenHarmony Python学习助手实战:机器学习算法实现的实现
python·学习·flutter