一同养成写作习惯！这是我参与「日新方案 4 月更文挑战」的第29天，点击查看活动详情

咱们很早就开端了 Flutter 系列知识点的讲解了，第一篇内容见 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 系列 - 开始你的第一个应用

每次的端口号不一定一样

目录结构

咱们生成了 flutter_demo 项目，得到下面的目录结构。

Flutter 系列 - 开始你的第一个应用

咱们先来了解项目结构重要内容都代表了啥意思，做到项目心中有数先。

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/

敬请期待下一篇～

【完】✅