【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
掘金

喜欢就点个赞吧

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

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