flutter 学习指南

简介

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

  • 具有跨平台开发特性，支持IOS、Android、Web三端。
  • 热重载特性大大提高了开发效率。
  • 自绘UI引擎和编译成原生代码的方式，保证了运行时的高性能。
  • 使用Dart语言，目前已经支持同时编译成Web端代码。

环境配置

安装flutterSDK

  1. 到官网下载flutterSDK压缩包
  2. 解压缩
  3. 配置环境变量
    • 在任务栏搜索“环境变量”，选择“编辑系统环境变量”
    • 在“用户变量”列表中找到 Path 变量，选中并点击“编辑”
    • 点击“新建”，然后输入 Flutter SDK 中 bin 文件夹的完整路径。例如我这里解压到D盘就是 D:\flutter\bin
    • 点击“确定”保存所有更改。
  4. 验证安装
    • 打开cmd
    • 输入以下命令 
      1
      flutter --version [citation:2]
    • 如果配置成功会显示当前安装的 Flutter 版本信息

vscode配置

  1. 打开 VS Code 安装 Flutter 扩展
  2. 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入并选择 Flutter: New Project
  3. 如果提示找不到SDK，就手动选择刚才配置的SDK路径
  4. 选择 application 创建新工程

项目结构

在创建的新工程中，可以看到已经自带了Android，IOS相关的运行环境。其中入口主文件是 lib 下的 main.dart，项目的配置文件是 pubspec.yaml。

调试平台

在 vscode 右下角可以选择项目调试的平台。默认是 Windows。如果要选择Android平台就按以下进行操作。

  1. 安装java，安装完成后，在终端运行 java –version 验证是否成功
  2. 下载并配置 Android 命令行工具，到官网找到 “Command line tools only”，下载对应你操作系统的压缩包。解压后进入 cmdline-tools 文件夹，新建一个名为 latest 的文件夹，然后将原来 cmdline-tools 里面的所有内容都移动到 latest 文件夹。
  3. 配置环境变量，在系统 PATH 变量中添加以下几个路径D:\AndroidSDK\cmdline-tools\latest\bin，
  4. 我不行了，安卓虚拟机配置环境纯纯一坨狗屎， 直接用 USB 连接物理手机进行开发和调试