flutter_sparkline 0.0.4

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 84

pub package

flutter_sparkline

Beautiful sparkline charts for Flutter.

screenshot

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

base example screenshot

Customization

Sparkline

PropertyDefault
lineWidth2.0
lineColorColors.lightBlue
lineGradientnull

Example:

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

lineopts example screenshot

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

lineopts example screenshot


Points

PropertyDefault
pointsModePointsMode.none
pointSize4.0
pointColorColors.lightBlue[800]
PointsModeDescription
none (default)Do not draw individual points.
allDraw all the points in the data set.
lastDraw only the last point in the data set.

Example:

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

all points example screenshot

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

last point example screenshot


Fill

PropertyDefault
fillModeFillMode.none
fillColorColors.lightBlue[200]
fillGradientnull
FillModeDescription
none (default)Do not fill, draw only the sparkline.
aboveFill the area above the sparkline.
belowFill the area below the sparkline.

Example:

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

fill below example screenshot

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

fill above example screenshot

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

fill above example screenshot


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

[0.0.4] - 2018-04-27

  • Add lineGradient and fillGradient options.

[0.0.3] - 2018-04-17

  • Add basic example

[0.0.2] - 2018-04-16

  • Fix readme screenshots for pub.

[0.0.1] - 2018-04-16

  • Customizable fillMode and fillColor.
  • Cuztomizable pointsMode, pointSize, and pointColor.
  • Customizable lineWidth and lineColor.
  • Basic Sparkline.

example/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,
            ),
          ),
        ),
      ),
    ),
  );
}

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_sparkline: "^0.0.4"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_sparkline/flutter_sparkline.dart';
        
Version Uploaded Documentation Archive
0.0.4 Mar 27, 2018 Go to the documentation of flutter_sparkline 0.0.4 Download flutter_sparkline 0.0.4 archive
0.0.3 Mar 20, 2018 Go to the documentation of flutter_sparkline 0.0.3 Download flutter_sparkline 0.0.3 archive
0.0.2 Mar 16, 2018 Go to the documentation of flutter_sparkline 0.0.2 Download flutter_sparkline 0.0.2 archive
0.0.1 Mar 16, 2018 Go to the documentation of flutter_sparkline 0.0.1 Download flutter_sparkline 0.0.1 archive

Analysis

We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6
  • Flutter: 0.3.2

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
68 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
84
Learn more about scoring.

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <2.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.9
meta 1.1.2
sky_engine 0.0.99
typed_data 1.1.5
vector_math 2.0.6
Dev dependencies
flutter_test