flutter_sparkline

Beautiful sparkline charts for Flutter.

Installation

Install the latest version from pub.

Quick Start

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

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

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

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]],
  ),
);

Todo:

• x simple sparkline
• x custom line width
• x custom line color
• x optional rounded corners
• x fill
• x embiggen individual points/change color
• x different points modes all/last/none
• animate between two sparklines
• animate drawing a single sparkline
• gesture detector to select closest point to tap
• baseline
• x different fill modes above/below/none
• x fix edge points overflowing by offsetting by lineWidth
• better corner rounding
• axis labels
• x gradient shader on line paint
• x gradient shader on fill paint
• multiple overlapping sparklines on a shared axis
• tests