H5前端学习flutter系列1 - 安装和初始项目

236 阅读2分钟

依赖链接

  1. 开发文档 flutter.cn/docs
  2. Dart文档 dart.cn/overview
  3. pub.dev pub.flutter-io.cn/

注意: 以上均为中文网站,如有需要可直接访问英文原网站

安装

  1. 下载flutter sdk(包含dart sdk),并解压到本地
  2. 配置PATH环境变量将 ...\flutter\bin 添加到path中

注意:开发安卓项目需要 Android Studio、Android SDK、模拟器或连接真机(ios类似) 注意:如未安装可通过浏览器显示界面查询效果

编辑工具

  1. vs code
  2. vs code插件: flutterdart
  3. View > Command Palette… (也可Ctrl + Shift + P快捷键)输入doctor选择 flutter: Flutter Run Doctor命令,验证安装和检查环境成功与否

注意:vs code相等Android Studio较轻量,但涉及系统功能、权限、打包相关等,推荐在Android Studio中开发

其他vs code 插件

  1. Flutter Widget Snippets 可快捷生产widget基础代码
  2. Code Runner 可执行选中的代码,如dart

注意:安装插件后需重启vs code

初始项目

  1. View > Command Palette… (也可Ctrl + Shift + P快捷键)输入flutter: New Project
  2. 选择Application选项
  3. 弹窗中选择项目存放的文件夹地址
  4. 输入项目名
  5. 创建,成功后等待依赖加载

项目目录结构

android
  |-xxx
build
  |-xxx
ios
  |-xxx
lib
  |-main.dart
linux
  |-xxx
macos
  |-xxx
test
  |-xxx
web
  |-xxx
windows
  |-xxx
.gitigore
.metadata
analysis_options.yaml
pubspec.lock
pubspec.yaml
README.md

注意:1. pubspec.yaml 类似package.json,管理依赖包和媒体内容如图片 注意:2. lib/main.dart 是开发文件入口 注意:3. android、ios、linux、macos、web、windows 分别对应flutter开发的六个平台

项目运行

  1. 查看设备连接,vs code工具栏底部(右下角),初始可以选择Chrome(web应用)
  2. 运行项目,Run > State Debugging(或在main.dart中点击void mian()上的run按钮)运行

常用命令和功能(ctrl + shift + P)

  1. flutter doctor 检查环境依赖
  2. 创建新项目 flutter new project
  3. 检查修改sdk,flutter change sdk
  4. 检查设备 flutter devices(adb devices ...)
  5. flutter clean 清除缓存(解决sdk、packages升级后无效问题)
  6. flutter pub get 依赖获取
  7. flutter run 编译执行(flutter run --profile解决真机无法打印log问题)