flutter_sparkline

Beautiful sparkline charts for Flutter.

Here is a screenshot of the sparkline chart created with this plugin:

Step 1: Installation

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_sparkline

copied to clipboard

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_sparkline: ^0.1.0

copied to clipboard

Alternatively, your editor might support flutter pub get.

Step 2: Create Sparkline

Import the package, create a Sparkline, and pass it your data.

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/flutter_sparkline.dart';
void main() {
  var data = [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0];
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 100.0,
            child: new Sparkline(
              data: data,
            ),
          ),
        ),
      ),
    ),
  );
}

Customization

Sparkline

Property	Default
lineWidth	2.0
lineColor	Colors.lightBlue
lineGradient	null

Example:

new Sparkline(
  data: data,
  lineWidth: 5.0,
  lineColor: Colors.purple,
);

new Sparkline(
  data: data,
  lineWidth: 10.0,
  lineGradient: new LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.purple[800], Colors.purple[200]],
  ),
);

---

Points

Property	Default
pointsMode	PointsMode.none
pointSize	4.0
pointColor	Colors.lightBlue[800]

PointsMode	Description
none (default)	Do not draw individual points.
all	Draw all the points in the data set.
last	Draw only the last point in the data set.

Example:

new Sparkline(
  data: data,
  pointsMode: PointsMode.all,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

new Sparkline(
  data: data,
  pointsMode: PointsMode.last,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

---

Fill

Property	Default
fillMode	FillMode.none
fillColor	Colors.lightBlue[200]
fillGradient	null

FillMode	Description
none (default)	Do not fill, draw only the sparkline.
above	Fill the area above the sparkline.
below	Fill the area below the sparkline.

Example:

new Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillColor: Colors.red[200],
);

new Sparkline(
  data: data,
  fillMode: FillMode.above,
  fillColor: Colors.red[200],
);

new Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillGradient: new LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.red[800], Colors.red[200]],
  ),
);

---

Full Example

Here is a full but the simplets of examples:

example.dart

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter_sparkline/flutter_sparkline.dart';
math.Random random = new math.Random();
List<double> _generateRandomData(int count) {
  List<double> result = <double>[];
  for (int i = 0; i < count; i++) {
    result.add(random.nextDouble() * 100);
  }
  return result;
}
void main() {
  var data = _generateRandomData(100);
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 100.0,
            child: new Sparkline(
              data: data,
              lineColor: Colors.lightGreen[500],
              fillMode: FillMode.below,
              fillColor: Colors.lightGreen[200],
              pointsMode: PointsMode.all,
              pointSize: 5.0,
              pointColor: Colors.amber,
            ),
          ),
        ),
      ),
    ),
  );
}

Reference

Read more here.
Downoad code [here](https://github.com/xqwzts/flutter_sparkline/archive/refs/heads/master.zip.
Follow code author here.