本文同步本人掘金平台:https://juejin.cn/post/7092045110514286605
我们很早就开始了 Flutter 系列知识点的讲解了,第一篇内容见 Flutter 系列 - 环境搭建。因为非抵抗因素,我们停更了好久,今天我们又开始记录起来了。
本文,我们开始初始化你的第一个应用~
新建项目
Flutter 系列 - 环境搭建中我们已经讲解了使用 IDE - VSCode 来新建一个项目。现在,我们通过命令行来创建。
# flutter create <project_name>
# 这里 project_name 为 flutter_demo
$ flutter create flutter_demo
创建项目有些缓慢,您可以去喝杯咖啡再回来
然后进入创建的项目并运行:
# 进入项目
$ cd flutter_demo
# 运行项目
$ flutter run
flutter run 默认跑的是 web 端。运行成功后,默认调起浏览器。你会看到熟悉的页面,如下
每次的端口号不一定一样
目录结构
我们生成了 flutter_demo 项目,得到下面的目录结构。
我们先来了解项目结构重要内容都代表了啥意思,做到项目心中有数先。
Flutter 是一个跨平台的手机应用开发框架,所以会有针对各个平台的配置。
关键文件/文件夹 | 代表意义 |
android | 安卓配置信息存放,在这里你可以找到 Gradle 等文件 |
ios | 苹果端配置信息存放,在这里你可以找到 xCode 项目相关文件 |
lib | 项目代码主要文件,项目的入口文件 main.dart 存放在这里 |
web | 网页端配置信息存放,在这里你可以找到入口文件 index.html |
windows | windows 桌面应用的配置信息存放 |
pubspec.yaml | 项目的名称,描述,依赖等说明 |
我们来更改下 lib/main.dart 文件内容,然后在控制台上按下 r 或者 R,浏览器就会自动刷新页面。熟称热加载
类比 node
- node 包管理器是 npm;flutter的包管理器是 pub
- npm 安装包 npm install package_name;pub 安装包 flutter pub get package_name
- node 包管理的地址:www.npmjs.com/;flutter 包管理地址 pub.dev/
敬请期待下一篇~
【完】?
本文暂时没有评论,来添加一个吧(●'◡'●)