[Flutter跨平台]七、Flutter-环境搭建及创建工程

143 阅读2分钟

1. 搭建Flutter开发环境

  1. Dart(Flutter SDK直接就包括Dart,所以不用特意装)
  2. Android Studio
  3. Flutter SDK: 直接网上百度下载

1.1. 更换 下载依赖的链接 为国内镜像:

1.1.1. Windows添加环境变量:

  • Windows环境变量修改:点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
  • 新建 变量 PUB_HOSTED_URL,其值为pub.flutter-io.cn
  • 新建 变量 FLUTTER_STORAGE_BASE_URL, 其值为storage.flutter-io.cn

注意: 此镜像为临时镜像,并不能保证一直可用。

1.1.2. macOS或者Linux操作系统,依然是编辑~/.bash_profile 或者 ~/.zshenv文件

加上这两句

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1.2. Flutter起步

Flutter里面所有东西都是widget, widget就是相当于 组件;(不像安卓/ios/鸿蒙里面把界面分成很多个类)

Flutter中万物皆Widget (万物皆可盘) ;

1.2.1. 创建Flutter工程

创建项目可以用Android Studio, 也可以用命令行创建; 如果是用vscode开发flutter项目, 建议用命令行, 降低学习成本;

注意: 工程名多个单词链接需要用下划线_, 不能用中划线-;

  1. 在对应文件夹内打开cmd--输入命令创建工程名(也就是项目): flutter create 工程名
    1. 可以cd到项目目录内, 再flutter run运行; (在vscode里面时可以在终端里面使用flutter run)
    2. 也可以快捷手动运行

热更新:

这个热更新是局部的, 不像点网站上的刷新( 网站上的刷新是整个项目都刷新了)

1.2.2. git创建与远程连接

  1. git init
  2. git add .
  3. git commit -m '项目初始化'
  4. 远程创建仓库
  5. 使用命令连接远程仓库

1.2.3. 工程目录分析

.
├── android # Android项目目录
├── build # 存放的是各个平台对应的编译后的可执行文件,代码编译后才有的目录
├── ios # iOS项目目录
├── lib # 业务代码目录
│   └── main.dart # 程序启动文件
├── linux # Linux项目目录
├── macos # macOS项目目录
├── pubspec.yaml # 配置项目依赖:安装依赖插件、配置资源路径...
├── test # 编写测试代码目录
├── web # Web项目目录
└── windows # Windows项目目录

android、ios、linux、macos、web、windows 这几个目录存放的是对应平台的项目文件

对应平台的开发工具可以打开并进行编译、修改等操作

1.2.4. 页面结构说明