fl_animated_linechart 1.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 92

fl_animated_linechart #

Codemagic build status

Animations

An animated chart library for flutter.

  • Support for datetime axis
  • Multiple y axis, supporting different units
  • Highlight selection
  • Animation of the chart
  • Tested with more than 3000 points and still performing

There are currently two different charts:

  • line chart
  • area chart

Getting Started #

Try the sample project or include in your project.

Highlight for the line chart: Chart example with highlight

Area chart: Area Chart example Area Chart example

Example code:

LineChart lineChart = LineChart.fromDateTimeMaps([line1, line2], [Colors.green, Colors.blue]);

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Container(
    child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(child: AnimatedLineChart(lineChart)),
        ]
    ),
  ),
);

The example app, can toggle between line chart and area chart. Example app

[1.1.3] #

  • Fix to support any lines
  • Make the pattern for date/time configurable

[1.1.2] #

  • Expose parameter to configure the FontWeight of the highlighted text in charts

[1.1.1] #

  • Refactor mouse over text to TapText typedef and expose it on factory method

[1.1.0] #

  • Make mouse over text configurable

[1.0.2] #

  • Updated pub.dev health recommendations

[1.0.1] #

  • Upgrade intl package

[1.0.0] #

  • We consider the library as stable

[0.1.9] #

  • Fixed small offset issue between yaxis and line/point drawing

[0.1.8] #

  • Added gradient option to the area chart

[0.1.7] #

  • More detailed description

[0.1.6] #

  • Updated readme

[0.1.5] #

  • Updated readme

[0.1.4] #

  • Adding support for area chart

[0.1.3] #

  • Formatting axis values dynamic depending on the tick size

[0.1.2] #

  • Improve performance

[0.1.1] #

  • Calculate axis width, to make the chart paint full width

[0.1.0] #

  • fix drawing series with all values being the same

[0.0.8] #

  • reduce margins

[0.0.7] #

  • show tooltip on tap
  • coverage back to 100

[0.0.6] #

  • Change animations, to be really cool, now the animations draws the chart lines.
  • secondary Y axis support, to support 1-2 units.

[0.0.5] #

  • Restyled tooltip
  • Finish testing

[0.0.4] #

  • Style tooltip
  • Paint unit
  • Make sure tooltip paints within chart area
  • Formatted dynamic datetime axisvalues

[0.0.3] #

  • Added codemagic CI

[0.0.2] #

  • Added screenshots
  • Fixed warnings

[0.0.1] #

  • Very initial release, to include the library in our project

example/lib/main.dart

import 'package:example/fake_chart_series.dart';
import 'package:fl_animated_linechart/chart/area_line_chart.dart';
import 'package:fl_animated_linechart/common/pair.dart';
import 'package:fl_animated_linechart/fl_animated_linechart.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'fl_animated_chart demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with FakeChartSeries {
  int chartIndex = 0;

  @override
  Widget build(BuildContext context) {
    Map<DateTime, double> line1 = createLine2();
    Map<DateTime, double> line2 = createLine2_2();

    LineChart chart;

    if (chartIndex == 0) {
      chart = LineChart.fromDateTimeMaps(
          [line1, line2], [Colors.green, Colors.blue], ['C', 'C'],
          tapTextFontWeight: FontWeight.w400);
    } else if (chartIndex == 1) {
      chart = LineChart.fromDateTimeMaps(
          [createLineAlmostSaveValues()], [Colors.green], ['C'],
          tapTextFontWeight: FontWeight.w400);
    } else {
      chart = AreaLineChart.fromDateTimeMaps(
          [line1], [Colors.red.shade900], ['C'],
          gradients: [Pair(Colors.yellow.shade400, Colors.red.shade700)]);
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    FlatButton(
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.black45),
                          borderRadius: BorderRadius.all(Radius.circular(3))),
                      child: Text(
                        'LineChart',
                        style: TextStyle(
                            color: chartIndex == 0
                                ? Colors.black
                                : Colors.black12),
                      ),
                      onPressed: () {
                        setState(() {
                          chartIndex = 0;
                        });
                      },
                    ),
                    FlatButton(
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.black45),
                          borderRadius: BorderRadius.all(Radius.circular(3))),
                      child: Text('LineChart2',
                          style: TextStyle(
                              color: chartIndex == 1
                                  ? Colors.black
                                  : Colors.black12)),
                      onPressed: () {
                        setState(() {
                          chartIndex = 1;
                        });
                      },
                    ),
                    FlatButton(
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.black45),
                          borderRadius: BorderRadius.all(Radius.circular(3))),
                      child: Text('AreaChart',
                          style: TextStyle(
                              color: chartIndex == 2
                                  ? Colors.black
                                  : Colors.black12)),
                      onPressed: () {
                        setState(() {
                          chartIndex = 2;
                        });
                      },
                    ),
                  ],
                ),
              ),
              Expanded(
                  child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: AnimatedLineChart(
                  chart,
                  key: UniqueKey(),
                ), //Unique key to force animations
              )),
              SizedBox(width: 200, height: 50, child: Text('')),
            ]),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  fl_animated_linechart: ^1.1.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


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

We analyzed this package on Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [fl_animated_linechart] that is in a package requiring null.

Health issues and suggestions

Document public APIs. (-0.16 points)

101 out of 104 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
intl ^0.16.0 0.16.1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
path 1.7.0
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test