MacBook-Pro:~ xun$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale
zh-Hans)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[!] Xcode - develop for iOS and macOS
! CocoaPods 1.9.1 out of date (1.10.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side’s plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (2 available)

一 基本集成

折线图是一个 Widget，和普通 Widget一样声明即可：

LineChart(
sampleData(),
),

LineChart的构造参数是一个LineChartData，其属性如下：

/// 配置文件
LineChartData sampleData() {
return LineChartData(
//? 是否可以点击
lineTouchData: LineTouchData(
enabled: enableLineTouchData,
),
//? 网格线配置
gridData: FlGridData(
show: showGridData,
),
axisTitleData: _buildFlAxisTitleData(),
//? 标题
titlesData: _buildTitles(),
//? 边框
borderData: _buildBorderData(),
minX: 0,
maxX: 14,
maxY: 6,
minY: 0,
//? 线条数据
lineBarsData: linesBarDatas(),
);
}

二 线条配置

配置了三条线，所以lineBarsData对应的数组有三个元素。

//? 绿线的配置
LineChartBarData(
//? 取样点
spots: [
FlSpot(1, 1),
FlSpot(3, 4),
FlSpot(5, 1.8),
FlSpot(7, 5),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
//? 是否是曲线
isCurved: isCurved1,
// curveSmoothness: 0,
colors: const [
Color(0x444af699),
],
//? 线的宽度
barWidth: 4,
//? 线头是否是圆形
isStrokeCapRound: true,
//? 是否显示数据点
dotData: FlDotData(
show: false,
),
//? 是否显示线上区域
aboveBarData: BarAreaData(show: showAboveBarData, colors: [
const Color(0x444af699),
]),
)

看下LineChartBarData属性：

三 边框配置

图表四个方向的边框，有总显示开关，决定是否显示和隐藏所有，如果开启，又想隐藏个别边框，需要设置透明色。

//? 边框信息
FlBorderData _buildBorderData() {
return FlBorderData(
show: showBorderData,
border: Border(
bottom: showBottomBorder
? BorderSide(
color: Color(0xff4e4965),
width: 4,
)
: BorderSide(
color: Colors.transparent,
),
left: showLeftBorder
? BorderSide(
color: Color(0xff4e4965),
width: 2,
)
: BorderSide(
color: Colors.transparent,

总结

现在新技术层出不穷，如果每次出新的技术，我们都深入的研究的话，很容易分散精力。新的技术可能很久之后我们才会在工作中用得上，当学的新技术无法学以致用，很容易被我们遗忘，到最后真的需要使用的时候，又要从头来过（虽然上手会更快）。

我觉得身为技术人，针对新技术应该是持拥抱态度的，入了这一行你就应该知道这是一个活到老学到老的行业，所以面对新技术，不要抵触，拥抱变化就好了。

Flutter 明显是一种全新的技术，而对于这个新技术在发布之初，花一个月的时间学习它，成本确实过高。但是周末花一天时间体验一下它的开发流程，了解一下它的优缺点、能干什么或者不能干什么。这个时间，并不是我们不能接受的。

如果有时间，其实通读一遍 Flutter 的文档，是最全面的一次对 Flutter 的了解过程。但是如果我们只有 8 小时的时间，我希望能关注一些最值得关注的点。

附

Android学习PDF+架构视频+面试文档+源码笔记

（跨平台开发(Flutter)、java基础与原理，自定义view、NDK、架构设计、性能优化、完整商业项目开发等）

%82%E4%BD%95%E9%9D%A2%E8%AF%95%E6%8B%BF%E9%AB%98%E8%96%AA%EF%BC%81.md)

（跨平台开发(Flutter)、java基础与原理，自定义view、NDK、架构设计、性能优化、完整商业项目开发等）

[外链图片转存中…(img-yXWxQ6mL-1644916208910)]