CODEWITHSUNDEEP
chartsflutterpackage
key
key

Reputation: 1402

Call multiple different charts in flutter - charts_flutter 0.5.0 Package

I have this Simple Bar chart from the package charts_flutter 0.5.0 and i want to call it in another page like this, or what my goal is, is to get more charts into it like pie charts and some other once.

 Widget build(BuildContext context) {

    List<Series> seriesList;

    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text(
          "Charts",
          style: TextStyle(color: Colors.blueGrey),
          textAlign: TextAlign.center,
        ),
        backgroundColor: Colors.transparent,
        iconTheme: IconThemeData(color: Colors.blueGrey),
      ),
      body: ListView(
        children: <Widget>[
          SimpleBarChart(seriesList), //<-- I've added this line
        ],
      ),
    );
  }

the code of the chart is this: find more here: https://google.github.io/charts/flutter/gallery.html

/// Bar chart example
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SimpleBarChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimpleBarChart(this.seriesList, {this.animate});

  /// Creates a [BarChart] with sample data and no transition.
  factory SimpleBarChart.withSampleData() {
    return new SimpleBarChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }


  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,
    );
  }

  /// Create one series with sample hard coded data.
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final data = [
      new OrdinalSales('2014', 5),
      new OrdinalSales('2015', 25),
      new OrdinalSales('2016', 100),
      new OrdinalSales('2017', 75),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

/// Sample ordinal data type.
class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

Currently I'm getting a white page, with this error

E/flutter (14450): [ERROR:flutter/shell/common/shell.cc(184)] Dart Error: Unhandled exception:

E/flutter (14450): Cannot hit test a render box that has never been laid out.

E/flutter (14450): The hitTest() method was called on this RenderBox:

E/flutter (14450): RenderErrorBox#20cd4 NEEDS-LAYOUT NEEDS-PAINT

E/flutter (14450): Unfortunately, this object's geometry is not known at this time, probably because it has never been laid out. This means it cannot be accurately hit-tested. If you are trying to perform a hit test during the layout phase itself, make sure you only hit test nodes that have completed layout (e.g. the node's children, after their layout() method has been called).

this is the Package: https://pub.dartlang.org/packages/charts_flutter#-readme-tab-

Upvotes: 2

Views: 6450

Answers (3)

Ricardo Almeida
Ricardo Almeida

Reputation: 51

To get multiple charts in one screen you can achieve that with Flexible() Widget which is better than hardcode sizes (in my opinion). With flexible you define for example flex:5 on both and it will automatically divide the space equally to both charts

  Column(
  children: [
    Flexible( flex: 5,
    child:
    Card(
      child:
        new charts.PieChart(
          seriesList,
          animate: animate,
            defaultRenderer: new charts.ArcRendererConfig(
                arcWidth: 30,
                arcRendererDecorators: [new charts.ArcLabelDecorator()])

        ),
    ),),
    Flexible(
      flex:5,
          child:
    Card(
      child:
      new charts.PieChart(
          seriesList,
          animate: animate,
          defaultRenderer: new charts.ArcRendererConfig(
              arcWidth: 30,
              arcRendererDecorators: [new charts.ArcLabelDecorator()])

      ),
    ),),
  ],
);

Upvotes: 1

key
key

Reputation: 1402

Just for other people that see this Question in the future and want to add Multiple different charts:

body: ListView(
        children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                      width: 200.0,
                      height: 200.0,
                      child: SimpleBarChart.withSampleData()
                  ),
                  Container(
                    height: 200.0,
                    width: 200.0,
                    child: PieOutsideLabelChart.withSampleData(),
                  ),
                ],
              ),
        ],
      )

Upvotes: 5

Jordan Davies
Jordan Davies

Reputation: 10881

The issue is because you're passing a null object (seriesList) into your BarChart constructor.

Try this:

Widget build(BuildContext context) {
  List<Series> seriesList;

  return Scaffold(
    appBar: AppBar(
      elevation: 0,
      title: Text(
        "Charts",
        style: TextStyle(color: Colors.blueGrey),
        textAlign: TextAlign.center,
      ),
      backgroundColor: Colors.transparent,
      iconTheme: IconThemeData(color: Colors.blueGrey),
    ),
    body: SimpleBarChart.withSampleData(), //<-- I've added this line
  );
}

Upvotes: 3

Related Questions