1.导入依赖

fl_chart: ^0.12.2

如果你想进一步了解这个插件的话，可以去看一下它的源码。框架地址 关于如何导入依赖步骤如图所示： pubspec.yaml文件->在dependencies下面添加依赖->点击pub get

2.折线图

1.一条折线图

1.效果图

2.主要代码

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(home: LineChartSample2(),)
  );
}

class LineChartSample2 extends StatefulWidget {
  @override
  _LineChartSample2State createState() => _LineChartSample2State();
}

class _LineChartSample2State extends State<LineChartSample2> {
  List<Color> gradientColors = [
    const Color(0xff23b6e6),
    const Color(0xff02d39a),
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: <Widget>[
          Container(
            decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(18),
                ),
                color: Color(0xff232d37)),
            child: Padding(
              padding: const EdgeInsets.only(right: 12.0, left: 12.0, top: 24, bottom: 12),
              child: LineChart(
                mainData(),
              ),
            ),
          ),
          Positioned(
            top: 5,
            left: 5,
            child: Text(
              '访问量',
              style: TextStyle(
                  fontSize: 12, color: Colors.white,decoration: TextDecoration.none),
            ),
          )
        ],
      ),
    );
  }

  LineChartData mainData() {
    return LineChartData(
      gridData: FlGridData(
        show: true,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          getTextStyles: (value) =>
          const TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 16),
          getTitles: (value) {
            if(value.toInt()%2==0){
              return value.toInt().toString()+'月';
            }
            return '';
          },
          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => const TextStyle(
            color: Color(0xff67727d),
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData:
      FlBorderData(show: true, border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      lineBarsData:linesBarData1(),
    );
  }




  List<LineChartBarData> linesBarData1() {
    final LineChartBarData lineChartBarData1 = LineChartBarData(
      spots: [
        FlSpot(0, 3),
        FlSpot(2.6, 2),
        FlSpot(4.9, 5),
        FlSpot(6.8, 3.1),
        FlSpot(8, 4),
        FlSpot(9.5, 3),
        FlSpot(11, 4),
      ],
      isCurved: true,
      colors: gradientColors,
      barWidth: 5,
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
      belowBarData: BarAreaData(
        show: true,
        colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
      ),
    );
    return [lineChartBarData1];
  }
}

3.代码解析

LineChartData的属性：

属性	功能
gridData	网格线的自定义（下面对gridData属性的详细解释）
titlesData	自定义x,y轴的坐标的标题（下面有对titlesData属性的详细解释）
borderData	FlBorderData来设置边框的大小和颜色
minX	x轴的起点
maxX	x轴的终点
minY	y轴的起点
maxY	y轴的终点
lineBarsData	通过LineChartBarData对折线进行自定义

gridData的属性：

属性	功能
show	是否显示网格线
drawVerticalLine	是否显示垂直方向的网格线
getDrawingHorizontalLine	通过FlLine来自定义水平方向线的颜色、大小等
getDrawingVerticalLine	通过FlLine来自定义垂直方向线的颜色、大小等

titilesData的属性：

属性	功能
show	是否显示x,y轴的坐标的标题
bottomTitles	定义X轴的标题
leftTitles	定义y轴的标题

LineChartBarData的属性：

属性	功能
spots	设置各点的横纵坐标
isCurved	是否线绘制成曲线
colors	曲线的颜色
barWidth	曲线的粗细
isStrokeCapRound	确定线帽的形状
dotData	显示结点
belowBarData	折线图向下填满的颜色

2.多条折线图

效果如图所示：

实现起来比较简单，代码如下：

 List<LineChartBarData> linesBarData1() {
    final LineChartBarData lineChartBarData1 = LineChartBarData(
      spots: [
        FlSpot(0, 3),
        FlSpot(2.6, 2),
        FlSpot(4.9, 5),
        FlSpot(6.8, 3.1),
        FlSpot(8, 4),
        FlSpot(9.5, 3),
        FlSpot(11, 4),
      ],
      isCurved: true,
      colors: gradientColors,
      barWidth: 5,
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
      belowBarData: BarAreaData(
        show: true,
        colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
      ),
    );
    final LineChartBarData lineChartBarData2 = LineChartBarData(
      spots: [
        FlSpot(0, 1),
        FlSpot(2.6, 2.8),
        FlSpot(4.9, 1.2),
        FlSpot(6.8, 2.8),
        FlSpot(8, 2.6),
        FlSpot(9.5, 3.9),
        FlSpot(11, 3),
      ],
      isCurved: true,
      colors: [
        const Color(0xffaa4cfc),
      ],
      barWidth: 5,
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
      belowBarData: BarAreaData(show: true,
          colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
      ),
    );
    return [lineChartBarData1,lineChartBarData2];

就是在原来的基础上，多添加一个LineChartBarData曲线。