Вызывать несколько разных графиков во флаттере - пакет charts_flutter 0.5.0

Question

У меня есть эта простая гистограмма из пакета charts_flutter 0.5.0, и я хочу назвать ее на другой странице, подобной этой, или моя цель в том, чтобы добавить в нее больше диаграмм, таких как круговые диаграммы и некоторые другие.

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

код диаграммы: найти больше здесь: 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);
}

В настоящее время я получаю белую страницу с этой ошибкой

E / flutter (14450): [ОШИБКА: flutter / shell / common / shell.cc (184)] Ошибка дротика: необработанное исключение:

E / flutter (14450): невозможно выполнить проверку окна рендеринга, которое имеетникогда не выкладывался.

E / flutter (14450): метод hitTest () был вызван для этого RenderBox:

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

E / flutter (14450): К сожалению, геометрия этого объекта в настоящее время неизвестна, возможно потому, что она никогда не была размечена.Это означает, что он не может быть точно проверен на попадание.Если вы пытаетесь выполнить тест на попадание во время самой фазы макета, убедитесь, что вы нажимаете только на тестовые узлы, которые завершили макет (например, дочерние узлы, после вызова их метода layout ()).

thisэто пакет: https://pub.dartlang.org/packages/charts_flutter#-readme-tab-

Answer 1

Просто для других людей, которые видят этот Вопрос в будущем и хотят добавить несколько разных графиков:

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(),
                  ),
                ],
              ),
        ],
      )

Answer 2

Чтобы получить несколько графиков на одном экране, вы можете добиться этого с помощью гибкого () виджета, который лучше, чем размеры жесткого кода (на мой взгляд).С помощью Flexible вы определяете, например, flex: 5 на обоих, и он автоматически поделит пространство одинаково на обе диаграммы

  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()])

      ),
    ),),
  ],
);

Answer 3

Проблема в том, что вы передаете нулевой объект (seriesList) в ваш BarChart конструктор.

Попробуйте это:

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