前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 系列 - 开始你的第一个应用

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

作者头像
Jimmy_is_jimmy
发布2022-05-09 15:04:29
3370
发布2022-05-09 15:04:29
举报
文章被收录于专栏:call_me_Rcall_me_R

我们很早就开始了 Flutter 系列知识点的讲解了,第一篇内容见 Flutter 系列 - 环境搭建。因为非抵抗因素,我们停更了好久,今天我们又开始记录起来了。

本文,我们开始初始化你的第一个应用~

新建项目

Flutter 系列 - 环境搭建中我们已经讲解了使用 IDE - VSCode 来新建一个项目。现在,我们通过命令行来创建。

代码语言:javascript
复制
# flutter create <project_name>
# 这里 project_name 为 flutter_demo
$ flutter create flutter_demo
复制代码

创建项目有些缓慢,您可以去喝杯咖啡再回来 💨

然后进入创建的项目并运行:

代码语言:javascript
复制
# 进入项目
$ 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 包管理器是 npmflutter的包管理器是 pub
  • npm 安装包 npm install package_namepub 安装包 flutter pub get package_name
  • node 包管理的地址:www.npmjs.com/flutter 包管理地址 pub.dev/

敬请期待下一篇~

【完】✅

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 新建项目
  • 目录结构
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档