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

1,759 阅读3分钟

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

📒【评论有奖】 「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」!

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

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

1. 终端命令行新建项目

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

flutter doctor命令检查环境是否有问题

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

新建项目报错

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

flutterDemo" 不是有效的 Dart 包名称

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

换个名称试试

新建项目成功

新建flutter项目成功

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

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

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

flutter run

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

image.png

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

网易 mumu安卓模拟器

  • flutter 工程文件结构如下:

image.png

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

3. xcode 打开 flutter 工程

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

image.png

打开 iOS 工程如下所示:

image.png

Xcode运行iOS 工程如下所示:

image.png

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

查看帮助

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

OC 工程

提示

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

4. Android Studio 新建项目

Android Studio 新建项目

image.png

Android Studio 新建flutter项目

image.png

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

image.png

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

Android Studio中 flutter 项目结构

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

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

Android Studio中下拉选择模拟器

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

如果有多个模拟器会提示选择一个来运行项目

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

选择一个模拟器项目运行

5. 写在后面

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

📒【评论有奖】 「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」!

🌹 喜欢就点个赞吧👍🌹

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

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