flutter で棒グラフに値を表示させたい。

前提・実現したいこと

以下の記事のようにflutterでchartsを使用して、
棒グラフ上に値を表示させたいです。あと一歩な感じがするのですが、原因わかる方いらしたら是非ご協力のほどよろしくお願いいたします。
https://google.github.io/charts/flutter/example/bar_charts/vertical_bar_label.html

発生している問題・エラーメッセージ

上記の記事を参考に書いてみましたが、表示されません。

該当のソースコード

dart
1List<charts.Series<DailyStepRecord, String>> _createSampleData() {
2    final dailyStepRecords = [
3      new DailyStepRecord('2020-05-11', 1000),
4      new DailyStepRecord('2020-05-12', 1100),
5      new DailyStepRecord('2020-05-13', 1200),
6      new DailyStepRecord('2020-05-14', 1300),
7      new DailyStepRecord('2020-05-15', 1400),
8      new DailyStepRecord('2020-05-16', 1500),
9      new DailyStepRecord('2020-05-17', 1600),
10    ];
11
12    return [
13      new charts.Series<DailyStepRecord, String>(
14        id: 'WalkRecord',
15        domainFn: (DailyStepRecord record, _) => record.walkDate,
16        measureFn: (DailyStepRecord record, _) => record.step,
17        data: dailyStepRecords,
18        labelAccessorFn: (DailyStepRecord record, _) => record.step.toString(),
19      )
20    ];
21  }
22
23  Widget _buildChart() {
24    return Container(
25        height: 200,
26        padding: EdgeInsets.only(left: 30),
27        child: ShaderMask(
28          child: charts.BarChart(
29            _createSampleData(),
30            animate: true,
31            barRendererDecorator: new charts.BarLabelDecorator<String>(
32                      insideLabelStyleSpec: new charts.TextStyleSpec(fontFamily: 'Quicksand-Medium', color: charts.Color.white, fontSize: 12),
33                      outsideLabelStyleSpec: new charts.TextStyleSpec(fontFamily: 'Quicksand-Medium', color: charts.Color.black, fontSize: 12)),
34            primaryMeasureAxis: new charts.NumericAxisSpec(
35                showAxisLine: true),
36            domainAxis: new charts.OrdinalAxisSpec(
37                showAxisLine: true, renderSpec: new charts.NoneRenderSpec()),
38            layoutConfig: new charts.LayoutConfig(
39                leftMarginSpec: new charts.MarginSpec.fixedPixel(0),
40                topMarginSpec: new charts.MarginSpec.fixedPixel(30),
41                rightMarginSpec: new charts.MarginSpec.fixedPixel(0),
42                bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)),
43            defaultRenderer: new charts.BarRendererConfig(
44                cornerStrategy: const charts.ConstCornerStrategy(10)),
45          ),
46          shaderCallback: (Rect bounds) {
47            return LinearGradient(
48              begin: Alignment.bottomCenter,
49              end: Alignment.topCenter,
50              colors: [AppColors.headerGradationTopGreen, AppColors.headerGradationBottomGreen],
51              stops: [
52                0.0,
53                1.0,
54              ],
55            ).createShader(bounds);
56          },
57          blendMode: BlendMode.srcATop,
58        )
59    );
60  }
61
62// 別途以下を定義
63
64class DailyStepRecord {
65  final String walkDate;
66  int step;
67
68  DailyStepRecord(this.walkDate, this.step);
69}

行動規範の内容に同意します

回答1件

自己解決

以下の記事にあるように、
https://github.com/google/charts/issues/200

グラフの角丸用のコードと labelAccessorFnは同居できないようです。

dart
1 　　　　　　　　defaultRenderer: new charts.BarRendererConfig(
2                cornerStrategy: const charts.ConstCornerStrategy(10)),

また、私の場合グラデーション化のためにShaderMaskも利用していたので、以下のような実装で対応しました。

dart
1List<charts.Series<DailyStepRecord, String>> _createSampleData() {
2    final dailyStepRecords = [
3      new DailyStepRecord('2020-05-11', 10),
4      new DailyStepRecord('2020-05-12', 1100),
5      new DailyStepRecord('2020-05-13', 1200),
6      new DailyStepRecord('2020-05-14', 1300),
7      new DailyStepRecord('2020-05-15', 1400),
8      new DailyStepRecord('2020-05-16', 1500),
9      new DailyStepRecord('2020-05-17', 1600),
10    ];
11
12    return [
13      new charts.Series<DailyStepRecord, String>(
14        id: 'WalkRecord',
15        domainFn: (DailyStepRecord record, _) => record.walkDate,
16        measureFn: (DailyStepRecord record, _) => record.step,
17        data: dailyStepRecords,
18        labelAccessorFn: (DailyStepRecord record, _) => record.step.toString(),
19      )
20    ];
21  }
22
23  Widget _buildChart() {
24    return Container(
25        height: 200,
26        padding: EdgeInsets.only(left: 30),
27        child: ShaderMask(
28          child: charts.BarChart(
29            _createSampleData(),
30            animate: true,
31            barRendererDecorator: new charts.BarLabelDecorator<String>(
32              labelPosition: charts.BarLabelPosition.outside,
33            ),
34            primaryMeasureAxis: new charts.NumericAxisSpec(
35                showAxisLine: true),
36            domainAxis: new charts.OrdinalAxisSpec(
37                showAxisLine: true, renderSpec: new charts.NoneRenderSpec()),
38            layoutConfig: new charts.LayoutConfig(
39                leftMarginSpec: new charts.MarginSpec.fixedPixel(0),
40                topMarginSpec: new charts.MarginSpec.fixedPixel(30),
41                rightMarginSpec: new charts.MarginSpec.fixedPixel(0),
42                bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)),
43          ),
44          shaderCallback: (Rect bounds) {
45            return LinearGradient(
46              begin: Alignment.bottomCenter,
47              end: Alignment.topCenter,
48              colors: [AppColors.headerGradationTopGreen, AppColors.headerGradationBottomGreen],
49              stops: [
50                0.0,
51                1.0,
52              ],
53            ).createShader(bounds);
54          },
55          blendMode: BlendMode.srcATop,
56        )
57    );
58  }