【Flutter】如何新建项目，运行你的第一个 flutter 工程项目

flutter.jpeg

📝【Flutter】学习养成记，【程序员必备小知识】

📔 今日小知识—— flutter 运行项目实战！

1. 终端命令行新建项目

在flutter 新建项目之前，我们先来运行一下flutter doctor命令来检查一下自己的flutter环境是否有问题。

检查环境.png

从命令的运行来看，是没有任何的错误❌，说明flutter 的环境是 OK 的，那么我们使用flutter create flutterDemo命令来新建一个项目工程吧！

新建 flutter 工程.png

从报错信息来看，是我们的项目名称出了问题，

flutterDemo" 不是有效的 Dart 包名称

why ? 大大的问号，这个名称没有问题啊，为什么就不支持呢？因为我们习惯了驼峰命名，但是 Dart是不支持驼峰命名的！既然不支持驼峰命名，那么就换个名称吧！

新建项目过程.png

新建项目成功

新建项目成功.png

那么就按照提示，cd first_flutterdemo打开项目目录，flutter run把项目跑起来看看吧！

2. 运行你的第一个 flutter 项目

第一次运行有点慢，会对环境进行一下检查，之后运行就会快很多了。

运行项目第二次很快，就运行在模拟器了.png

• 第一次运行完成之后，会有如下提示：有一下运行的时候，还有一些快捷键的使用！

常用快捷键.png

• 在模拟器中运行的界面如下：

运行项目在模拟器成功.png

• flutter 工程文件结构如下：

flutter工程文件结构.png

目录里面安卓和 iOS 工程都有，一份代码，多端使用👍🏻！

3. xcode 打开 flutter 工程

因为 flutter 是跨平台的，里面包含了安卓和 iOS 工程，我们双击打开iOS 工程就可以了，默认生成的是 Swift 的工程。

默认生成的是 Swift 的工程.png

打开 iOS 工程如下所示：

打开工程.png

Xcode运行iOS 工程如下所示：

Xcode运行 iOS 工程.png

默认ios 是 Swift 的工程，安卓是kotlin，我们也是可以去修改创建的工程语言的，使用flutter create --help命令就可以查看

flutter create --help.png

那么现在就去创建一个 OC 的工程吧，使用flutter create -i objc flutter_objcdemo命令。

创建 OC 工程.png

提示：

我们都是使用 Xcode 去签名/真机调试，不会使用 Xcode 去写 flutter，它也不支持 dart 语言啊！

4. Android Studio 新建项目

Android Studio 新建项目

Android Studio 新建项目 .png

Android Studio 新建flutter项目

新建flutter项目.png

点击➕创建 flutter 项目，进入如下界面

创建flutter项目.png

填写项目名称，项目的语言，支持的平台等！(这里我就不新建了，我就直接打开之前的项目了！)

flutter项目结构.png

目录结果和文件夹中的是一样的，顺序几乎都是一样的，我们在 lib文件夹下面写 dart代码。

可以下拉选择模拟器运行项目

下拉选择模拟器.png

在终端中也是打开模拟器open -a Simulatoer,如果有多个模拟器会提示选择一个来运行项目，如下图所示：

终端打开模拟器.png

选择其中一个模拟器来运行 flutter 项目

运行项目.png

5. 写在后面

关注我，更多内容持续输出

• CSDN
• 掘金
• 简书

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹