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.lightBlue800 |
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.lightBlue200 |
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:
x
simple sparklinex
custom line widthx
custom line colorx
optional rounded cornersx
fillx
embiggen individual points/change colorx
different points modesall/last/none
x
different fill modesabove/below/none
x
fix edge points overflowing by offsetting by lineWidthx
gradient shader on line paintx
gradient shader on fill paint
Libraries
Dart
- dart:ui
- Built-in types and core primitives for a Flutter application. [...]
- dart:async
- Support for asynchronous programming, with classes such as Future and Stream. [...]
- dart:collection
- Classes and utilities that supplement the collection support in dart:core. [...]
- dart:convert
- Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
- dart:core
- Built-in types, collections, and other core functionality for every Dart program. [...]
- dart:developer
- Interact with developer tools such as the debugger and inspector. [...]
- dart:math
- Mathematical constants and functions, plus a random number generator. [...]
- dart:typed_data
- Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]
- dart:io
- File, socket, HTTP, and other I/O support for non-web applications. [...]
- dart:isolate
- Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]