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
| 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]],
),
);
Todo:
- simple sparkline
- custom line width
- custom line color
- optional rounded corners
- fill
- embiggen individual points/change color
- different points modes [all/last/none]
- animate between two sparklines
- animate drawing a single sparkline
- gesture detector to select closest point to tap
- baseline
- different fill modes [above/below/none]
- fix edge points overflowing by offsetting by lineWidth
- better corner rounding
- axis labels
- gradient shader on line paint
- gradient shader on fill paint
- multiple overlapping sparklines on a shared axis
- tests
![[Feature Request] Allow to set fixed boundaries for data parameters](https://avatars.githubusercontent.com/u/16387264?v=4)
323 Dec 21, 2022
225 Dec 25, 2022
387 Dec 26, 2022
402 Dec 21, 2022
6 Jun 24, 2022
259 Dec 30, 2022
28 Nov 9, 2022
68 Nov 4, 2022
25 Jan 1, 2023
2.8k Dec 31, 2022
49 Oct 21, 2022
36k Dec 28, 2022
10 Oct 25, 2022
428 Dec 21, 2022
5.2k Dec 27, 2022
629 Dec 29, 2022
69 Nov 20, 2022
26 Oct 28, 2022