mp_chart 0.0.9

  • Readme
  • Changelog
  • Example
  • Installing
  • new84

MPFlutterChart #

flutter charts just like MPAndroidChart

The minimum version currently supported is 1.7.3. If you use flutter with lower version, checkout and use 'localPosition-support' branch, this branch support for flutter version which XXXDetails and PointerXXXEvent not support wiget local postion

Thanks for MPAndroidChart, when translate this library to flutter I learned a lot about matrix use in animation.

todos #

1.potential bugs fix

More Examples #

LineCharts

















BarCharts

















PieCharts







OtherCharts











ScrollingCharts









EvenMoreCharts







License

Copyright 2019 SunPointed

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

[0.0.8] - TODO: Add release date.

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:mp_chart/mp/core/utils/color_utils.dart';
import 'package:example/demo/bar_chart/basic.dart';
import 'package:example/demo/bar_chart/basic2.dart';
import 'package:example/demo/bar_chart/horizontal.dart';
import 'package:example/demo/bar_chart/multiple.dart';
import 'package:example/demo/bar_chart/negative.dart';
import 'package:example/demo/bar_chart/sine.dart';
import 'package:example/demo/bar_chart/stacked.dart';
import 'package:example/demo/bar_chart/stacked2.dart';
import 'package:example/demo/even_more/dynamic.dart';
import 'package:example/demo/even_more/hourly.dart';
import 'package:example/demo/line_chart/basic.dart';
import 'package:example/demo/line_chart/colorful.dart';
import 'package:example/demo/line_chart/cubic.dart';
import 'package:example/demo/line_chart/dual_axis.dart';
import 'package:example/demo/line_chart/filled.dart';
import 'package:example/demo/line_chart/invert_axis.dart';
import 'package:example/demo/line_chart/multiple.dart';
import 'package:example/demo/line_chart/performance.dart';
import 'package:example/demo/other_chart/bubble.dart';
import 'package:example/demo/other_chart/candlestick.dart';
import 'package:example/demo/other_chart/combined.dart';
import 'package:example/demo/other_chart/radar.dart';
import 'package:example/demo/other_chart/scatter_plot.dart';
import 'package:example/demo/pie_chart/basic.dart';
import 'package:example/demo/pie_chart/half_pie.dart';
import 'package:example/demo/pie_chart/value_lines.dart';
import 'package:example/demo/res/styles.dart';
import 'package:example/demo/scrolling_chart/multiple.dart';
import 'package:example/demo/scrolling_chart/tall_bar.dart';
import 'package:example/demo/scrolling_chart/view_pager.dart';

import 'demo/scrolling_chart/many_bar_chart.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'example Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'example example'),
      routes: <String, WidgetBuilder>{
        '/line_chart/basic': (_) => LineChartBasic(),
        '/line_chart/multiple': (_) => LineChartMultiple(),
        '/line_chart/dual_axis': (_) => LineChartDualAxis(),
        '/line_chart/invert_axis': (_) => LineChartInvertAxis(),
        '/line_chart/cubic': (_) => LineChartCubic(),
        '/line_chart/colorful': (_) => LineChartColorful(),
        '/line_chart/performance': (_) => LineChartPerformance(),
        '/line_chart/filled': (_) => LineChartFilled(),
        '/bar_chart/basic': (_) => BarChartBasic(),
        '/bar_chart/basic2': (_) => BarChartBasic2(),
        '/bar_chart/multiple': (_) => BarChartMultiple(),
        '/bar_chart/horizontal': (_) => BarChartHorizontal(),
        '/bar_chart/stacked': (_) => BarChartStacked(),
        '/bar_chart/negative': (_) => BarChartNegative(),
        '/bar_chart/stacked2': (_) => BarChartStacked2(),
        '/bar_chart/sine': (_) => BarChartSine(),
        '/pie_chart/basic': (_) => PieChartBasic(),
        '/pie_chart/value_lines': (_) => PieChartValueLines(),
        '/pie_chart/half_pie': (_) => PieChartHalfPie(),
        '/other_chart/combined_chart': (_) => OtherChartCombined(),
        '/other_chart/scatter_plot': (_) => OtherChartScatterPlot(),
        '/other_chart/bubble_chart': (_) => OtherChartBubble(),
        '/other_chart/candlestick': (_) => OtherChartCandlestick(),
        '/other_chart/redar_chart': (_) => OtherChartRadar(),
        '/scrolling_chart/multiple': (_) => ScrollingChartMultiple(),
        '/scrolling_chart/view_pager': (_) => ScrollingChartViewPager(),
        '/scrolling_chart/tall_bar_chart': (_) => ScrollingChartTallBar(),
        '/scrolling_chart/many_bar_charts': (_) => ScrollingChartManyBar(),
        '/even_more_line_chart/dynamic': (_) => EvenMoreDynamic(),
        '/even_more_line_chart/realtime': (_) => BarChartBasic2(),
        '/even_more_line_chart/hourly': (_) => EvenMoreHourly(),
      },
    );
  }
}

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  PopupMenuItem _item(String text, String id) {
    return PopupMenuItem<String>(
        value: id,
        child: Container(
            padding: EdgeInsets.only(top: 15.0),
            child: Center(
                child: Text(
              text,
              textDirection: TextDirection.ltr,
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: ColorUtils.BLACK,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ))));
  }

  void _itemClick(String action) {
    switch (action) {
      case 'A':
        break;
      case 'B':
        break;
      case 'C':
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
        actions: <Widget>[
          PopupMenuButton<String>(
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              _item('View on GitHub', 'A'),
              _item('Problem Report', 'B'),
              _item('Developer Website', 'C'),
            ],
            onSelected: (String action) {
              _itemClick(action);
            },
          ),
        ],
      ),
      body: CustomScrollView(shrinkWrap: false, slivers: [
        SliverPadding(
          padding: const EdgeInsets.fromLTRB(0, 0, 0, 5),
          sliver: SliverList(
            delegate: SliverChildListDelegate(
              <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          padding: EdgeInsets.all(15.0),
                          child: Center(
                              child: Text(
                            "Line Charts",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: ColorUtils.BLACK,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),
                          ))),
                      Gaps.line
                    ],
                  ),
                ),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/line_chart/basic'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Basic",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple line chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/line_chart/multiple'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Multiple",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Show mutiple data sets.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/line_chart/dual_axis'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Dual Axis",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Line chart with dual y-axes.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/line_chart/invert_axis'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Inverted Axis",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Inverted y-axis.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/line_chart/cubic'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Cubic",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Line chart with a cubic line shape.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/line_chart/colorful'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Colorful",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Colorful line chart",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/line_chart/performance'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Performance",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Render 30.000 data points smoothly.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/line_chart/filled'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Filled",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Colored area between two lines.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          padding: EdgeInsets.all(15.0),
                          child: Center(
                              child: Text(
                            "Bar Charts",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: ColorUtils.BLACK,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),
                          ))),
                      Gaps.line
                    ],
                  ),
                ),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/basic'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Basic",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple bar chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/basic2'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Basic 2",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Variation of the simple bar chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/multiple'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Multiple",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Show multiple data sets.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/bar_chart/horizontal'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Horizontal",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Render bar chart horizontally.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/stacked'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Stacked",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Stacked bar chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/negative'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Negative",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Positive and negative values with unique colors.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/stacked2'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Stacked 2",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Stacked bar chart with negative values.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/bar_chart/sine'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Sine",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Sine function in bar chart format.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          padding: EdgeInsets.all(15.0),
                          child: Center(
                              child: Text(
                            "Pie Charts",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: ColorUtils.BLACK,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),
                          ))),
                      Gaps.line
                    ],
                  ),
                ),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/pie_chart/basic'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Basic",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple pie chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/pie_chart/value_lines'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Value lines",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Stylish lines drawn outward from slices.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () =>
                        Navigator.of(context).pushNamed('/pie_chart/half_pie'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Half Pie",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "180° (half) pie chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          padding: EdgeInsets.all(15.0),
                          child: Center(
                              child: Text(
                            "Other Charts",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: ColorUtils.BLACK,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),
                          ))),
                      Gaps.line
                    ],
                  ),
                ),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/other_chart/combined_chart'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Combined Chart",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Bar and line chart together.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/other_chart/scatter_plot'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Scatter Plot",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple scatter plot.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/other_chart/bubble_chart'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Bubble Chart",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple Bubble chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/other_chart/candlestick'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Candlestick",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple financial chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/other_chart/redar_chart'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Redar Chart",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Simple web chart.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          padding: EdgeInsets.all(15.0),
                          child: Center(
                              child: Text(
                            "Scrolling Charts",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: ColorUtils.BLACK,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),
                          ))),
                      Gaps.line
                    ],
                  ),
                ),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/scrolling_chart/multiple'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Multiple",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Various types of charts.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/scrolling_chart/view_pager'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "View Pager",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Swipe through different charts.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/scrolling_chart/tall_bar_chart'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Tall Bar Chart",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Bars bigger than your screen.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/scrolling_chart/many_bar_charts'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Many Bar Charts",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "More bars than your screen can handle!.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          padding: EdgeInsets.all(15.0),
                          child: Center(
                              child: Text(
                            "Even More Line Charts",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: ColorUtils.BLACK,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),
                          ))),
                      Gaps.line
                    ],
                  ),
                ),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/even_more_line_chart/dynamic'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Dynamic",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Build a line chart by adding points and sets.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/even_more_line_chart/realtime'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Realtime",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Add data points in realtime.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
                InkWell(
                    onTap: () => Navigator.of(context)
                        .pushNamed('/even_more_line_chart/hourly'),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.0),
                      child: Container(
                        padding: EdgeInsets.only(top: 15),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Hourly",
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorUtils.BLACK,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                "Uses the current time to add a data point for each hour.",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: ColorUtils.BLACK, fontSize: 12),
                              ),
                            ),
                            Gaps.line
                          ],
                        ),
                      ),
                    )),
              ],
            ),
          ),
        )
      ]),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  mp_chart: ^0.0.9

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:mp_chart/mp_chart.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
73
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
84
Learn more about scoring.

We analyzed this package on Dec 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.4

Health suggestions

Fix lib/mp/core/utils/painter_utils.dart. (-0.50 points)

Analysis of lib/mp/core/utils/painter_utils.dart reported 1 hint:

line 15 col 34: 'text' is deprecated and shouldn't be used. InlineSpan does not innately have text. Use TextSpan.text instead. This feature was deprecated after v1.7.3..

Format lib/mp/chart/bar_line_scatter_candle_bubble_chart.dart.

Run flutter format to format lib/mp/chart/bar_line_scatter_candle_bubble_chart.dart.

Format lib/mp/controller/bar_line_scatter_candle_bubble_controller.dart.

Run flutter format to format lib/mp/controller/bar_line_scatter_candle_bubble_controller.dart.

Format lib/mp/painter/bar_line_chart_painter.dart.

Run flutter format to format lib/mp/painter/bar_line_chart_painter.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
image_gallery_saver ^1.2.2 1.2.2
intl ^0.16.0 0.16.0
path_drawing ^0.4.1 0.4.1
path_provider ^1.1.0 1.5.1
screenshot ^0.1.1 0.1.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path 1.6.4
path_parsing 0.1.4
platform 2.2.1
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test