在flutter中调用多个不同的图表-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）] Dart错误：未处理的异常：

E / flutter（14450）：无法命中测试从未布置过的渲染框。

E / flutter（14450）：在此RenderBox上调用了hitTest（）方法：

E / flutter（14450）：RenderErrorBox＃20cd4 NEEDS-LAYOUT NEEDS-PAINT

E / flutter（14450）：不幸的是，目前尚不知道该对象的几何形状，可能是因为它从未布置过。这意味着无法对其进行准确的命中测试。如果您试图在布局阶段本身执行一次命中测试，请确保仅命中已完成布局的测试节点（例如，在调用节点的子节点的layout（）方法之后）。

这是程序包：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(),
                  ),
                ],
              ),
        ],
      )