1. Import dependencies

fl_chart: ^0.122.
Copy the code

If you want to learn more about this plug-in, you can take a look at its source code.Framework to addressThe steps for importing dependencies are as follows:Pubspec. yaml file -> Add dependencies under Dependencies -> click pub get

2. Line charts

1. A line chart

1. The rendering

2. Main code

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(
              'Traffic',
              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()+'month';
            }
            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]; }}Copy the code

3. Code parsing

Properties of LineChartData:

attribute function
gridData Gridline customization (gridData attributes explained in detail below)
titlesData Customize the title of the x and y coordinates (see titlesData attribute below)
borderData FlBorderData sets the size and color of the border
minX The starting point of the X-axis
maxX The end of the X-axis
minY The starting point of the Y-axis
maxY The end of the Y-axis
lineBarsData Use LineChartBarData to customize polylines

GridData attributes:

attribute function
show Whether to display grid lines
drawVerticalLine Whether vertical grid lines are displayed
getDrawingHorizontalLine Use FlLine to customize the color, size, and so on of horizontal lines
getDrawingVerticalLine Use FlLine to customize the color, size, and so on of a vertical line

Attributes of titilesData:

attribute function
show Whether to display the title of the x and y coordinates
bottomTitles Define the title of the X-axis
leftTitles Define the title of the Y-axis

Properties of LineChartBarData:

attribute function
spots Set the horizontal and vertical coordinates of each point
isCurved Whether lines are drawn as curves
colors Color of curves
barWidth The thickness of the curve
isStrokeCapRound Determine the shape of the wire cap
dotData According to node
belowBarData The line chart fills down with colors

2. Multiple line charts

The effect is as follows:

The implementation is relatively simple, the code is as follows:

 List<LineChartBarData> linesBarData1(a) {
    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];
Copy the code

I’m just going to add another LineChartBarData curve to the original one.