学习地址1：https://pan.baidu.com/s/1iOH2xMvdMyBAJla5PeHuUg 提取码：hjhi 学习地址2：https://pan.baidu.com/s/1Iwj10AL7jdum19WQ_z1jdA 提取码：0n8x

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。

我将在本文中结合了最新版的Flutter、Dart、主流插件技术进行企业级项目开发，并融入了大量Flutter版本更新问题的解决方案，以及与H5混合开发和通信、多屏适配等高频技能，我会根据我在一线开发几年工作中积累的大量开发、避坑等经验传授给大家，让各位小伙伴在实际开发中能更好的运用Flutter技术。

首先我们先来安装flutter： 首先按照官网地址安装flutter（flutter中文官网）遇到问题查看下面步骤 步骤一：设置国内镜像环境变量及添加变量方法

添加国内镜像环境变量： PUB_HOSTED_URL = https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn 重启电脑。

步骤二：获取Flutter SDK Flutter SDK下载地址，稳定和测试版本选择一个 下载下来之后解压到你想安装的磁盘目录下 要在终端运行 flutter 命令， 你需要添加以下环境变量到系统PATH： 按照步骤一打开更改环境变量界面，在“用户变量”下检查是否有名为“Path”的条目: 如果该条目存在, 追加 flutter\bin的全路径； 如果条目不存在, 创建一个新用户变量 Path ，然后将 flutter\bin的全路径作为它的值。

接下来我们开始测试 Flutter sdk安装成功，环境变量配置成功。在任意路径下执行 flutter version 应能看到版本号

运行 flutter doctor 打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装： flutter doctor

该命令检查您的环境并在终端窗口中显示报告。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示），例如： [-] Android toolchain - develop for Android devices • Android SDK at D:\Android\sdk ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ • Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions.

下面我们开始代码实战： 在 src/api/chart.js 中创建数据获取方法： /**

• 指定日期的时段柱形数据
• / export const getChartTimeAmount = date => { return request({ url: '/chart/time/amount', params: {

  date

  } }) }

在 src/views/chart/components/horizontal-bar/index.vue 中获取接口数据：

根据数据绘制图表，同时处理国际化内容：

创建 src/views/chart/components/table-sheet/components/s2.vue 作为图表渲染组件