likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 6

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

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

1. 终端命令行新建项目

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

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

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

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

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

flutterDemo" 不是有效的 Dart 包名称

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

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

新建项目成功

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

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

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

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

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

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

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

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

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

  • flutter 工程文件结构如下:

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

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

3. xcode 打开 flutter 工程

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

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

打开 iOS 工程如下所示:

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

Xcode运行iOS 工程如下所示:

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

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

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

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

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

提示

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

4. Android Studio 新建项目

Android Studio 新建项目

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

Android Studio 新建flutter项目

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

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

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

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

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

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

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

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

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

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

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

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

5. 写在后面

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

🌹 喜欢就点个赞吧👍🌹

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

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