介绍：我的Flutter版本是3.10.6，Flutter项目是在VSCode工具中运行调试的。
Flutter插件
pub.dev/ 这个网址有很多第三方库，需要什么插件去里面搜索就行。 安装插件有两种方法，命令行安装或者直接在pubspec.yaml文件中写插件名称和版本号。
方法1：
flutter pub add 插件名
flutter pub get
方法2：
到pub.dev上搜索想安装的插件，点击插件名和版本号右侧的复制按钮，就会直接复制好pubspec.yaml文件上需要的插件格式，直接粘贴即可，Ctrl+S保存该文件，VSCode就会自动执行flutter pub get把新添加的插件载入到项目中了。
接下来，用不同方法演示如何安装插件。
Logger
在VSCode中使用Flutter开发时，打印内容不能使用console.log，因为console.log是JavaScript中的一种打印方式，而Flutter是使用Dart语言开发的，因此需要使用Dart语言提供的打印方式来输出内容。 当然，是可以使用print输出语句的，就是会有蓝色波浪线的提示。使用print输出语句可以方便地在控制台中输出调试信息。但是，在生产环境中使用print输出语句可能会导致性能问题或者安全问题，因此Flutter会有下面的提示。
可以点击快速修复，把它ignore，就不会出现这个提示了，不修复其实也是会正常打印内容的。
在生产环境中，通常建议使用专业的日志框架来记录应用程序的运行信息。Dart语言中有许多日志框架可供选择，例如logging、logger等，这些日志框架可以提供更加丰富的功能，例如记录日志级别、输出到文件、格式化日志信息等。
所以下载logger插件用来打印数据。
直接在pub.dev中复制它的名称和版本号：
粘贴内容到pubspec.yaml文件的dependencies中，保存文件，这个插件就会载入到项目中了。
引入、使用插件：
运行项目，效果如下：
要在整个Flutter项目的任何页面中方便地调用logger插件，可以将其封装成一个全局的单例类。之后，哪个地方需要打印日志内容，把这个文件引入就可以使用了。
当我在页面点击按钮时，就会触发打印日志的方法。
图表插件
在pub.dev/中搜索图表插件，最终选择了下面这两个喜欢量多的插件。
syncfusion_flutter_charts：pub.dev/packages/sy…
fl_chart: pub.dev/packages/fl…
根据工作需求，在尝试了fl_chart和syncfusion_flutter_charts这两个插件，个人觉得syncfusion_flutter_charts相对好用一点，大家可以自行判断，根据需求选择合适的图表插件。
安装syncfusion_flutter_charts插件
在pubspec,yaml文件中就会出现这个插件的名称和版本号了，如下所示：
散点图
help.syncfusion.com/flutter/car…
效果如下：
封装公共组件，传递不同数据展示不同的散点图 新建一个文件scattter_page.dart文件，里面需要展示不同的散点图，所以，需要一个基础的图表组件，传入不同的值展示不同的图表数据。
在flutter中，如果要在不同的文件之间传递参数，可以通过构造函数的方式来实现。在这里，ScatterChart2 组件的构造函数用于接收外部传递的参数，并将它们保存到组件的属性中。当组件被创建时，这些属性将被用于绘制散点图表。
需要注意的是，如果希望在不同的文件之间传递参数，必须使用 const 关键字来声明构造函数。这是因为，只有使用 const 关键字声明的构造函数才能在不同的文件之间进行参数传递。如果没有使用 const 关键字，那么在不同的文件之间传递参数时，会出现编译错误。
效果如下：
散点图公共组件如下：
**import** 'dart:math';
**import** 'package:flutter/material.dart';
**import** 'package:syncfusion_flutter_charts/charts.dart';
**class** **ScatterChart2** **extends** **StatefulWidget** {
*// 注意：如果希望在不同的文件之间传递参数，必须使用 const 关键字来声明构造函数！*
*// 构造函数 接收参数*
**const** **ScatterChart2**({
**Key** **?** key,
**required** this.dataSource, *// 必传参数 散点数据*
**required** this.chartTitle, *// 图表的标题*
**required** this.color, *// 点的颜色*
}) **:** super(key **:** key);
**final** **List** **<** **Point** **>** dataSource;
**final** **String** **?** chartTitle;
**final** **Color** color;
**@override**
**State** **<** **ScatterChart2** **>** **createState**() **=>** **_ScatterChart2State**();
}
**class** **_ScatterChart2State** **extends** **State** **<** **ScatterChart2** **>** {
*// 这个函数是用来创建一个环形的点数据，并将它们传递给 ScatterChart 组件的 dataSource 属性*
**List** **<** **Point** **>** **createRingPoints**(**double** radius, **int** numPoints) {
**List** **<** **Point** **>** points **=** [];
**double** angle **=** **2** ***** pi **/** numPoints;
**for** (**int** i **=** **0**; i **<** numPoints; i **++** ) {
**double** x **=** radius ***** **cos**(i ***** angle);
**double** y **=** radius ***** **sin**(i ***** angle);
points.**add**(**Point**(x, y));
}
**return** points;
}
**@override**
**Widget** **build**(**BuildContext** context) {
**return** **SfCartesianChart**(
*// 设置散点图的标题*
title **:** widget.chartTitle **!=** null
**?** **ChartTitle**(
text **:** widget.chartTitle **!** ,
textStyle **:** **const** **TextStyle**(
color **:** **Colors**.white,
fontWeight **:** **FontWeight**.bold,
fontSize **:** **16**,
),
)
**:** null,
*// X 轴*
primaryXAxis **:** **NumericAxis**(
minimum **:** **-150**, *// 设置坐标轴最小的范围*
maximum **:** **150**, *// 设置坐标轴最大的范围*
interval **:** **50**, *// 设置坐标轴的间隔*
labelStyle **:** **const** **TextStyle**(color **:** **Colors**.white),
title **:** **AxisTitle**(
text **:** 'X 轴',
textStyle **:** **const** **TextStyle**(
color **:** **Colors**.white,
)),
primaryYAxis **:** **NumericAxis**(
minimum **:** **-150**,
maximum **:** **150**,
interval **:** **50**,
labelStyle **:** **const** **TextStyle**(color **:** **Colors**.white),
title **:** **AxisTitle**(
text **:** 'Y 轴',
textStyle **:** **const** **TextStyle**(
color **:** **Colors**.white,
),
),
),
series **:** **<** **ChartSeries** **>** [
**ScatterSeries** **<** **Point**, **double** **>** (
dataSource **:** widget.dataSource,
*// xValueMapper 将数据源中的 x 值映射到图表的 x 轴上*
xValueMapper **:** (**Point** point, _) **=>** point.x,
*// yValueMapper 将数据源中的 y 值映射到图表的 y 轴上*
yValueMapper **:** (**Point** point, _) **=>** point.y,
color **:** widget.color, *// 点的颜色*
*// 更改散点的大小*
markerSettings **:** **const** **MarkerSettings**(height **:** **6**, width **:** **6**)),
],
);
}
}
**class** **Point** {
**Point**(this.x, this.y);
**final** **double** x;
**final** **double** y;
}
