如何在颤振图表中应用线性渐变？

Question

如何在颤振图表中应用线性渐变？

我尝试过颜色类，但我只能应用纯色，无法找到在图形栏中使用渐变的方法。

chart.Series<Person,String>(
    id:"Person3",
    colorFn:(_,__)=>chart.MaterialPalette.red.shadeDefault,
    domainFn: (Person dataPoint, _)=>dataPoint.name,
    measureFn: (Person dataPoint, _)=>dataPoint.no,
    data:data2,
  )

为我提供一些应用线性渐变的方法

Answer 1

显然还没有这样的功能。我设法让它与以下代码一起工作：

Widget _buildChart() {
  return Container(
    height: 300,
    child: ShaderMask(
      child: charts.BarChart(
        _createRandomData(),
        animate: true,
        primaryMeasureAxis: new charts.NumericAxisSpec(
            renderSpec: new charts.NoneRenderSpec(), showAxisLine: false),
        domainAxis: new charts.OrdinalAxisSpec(
            showAxisLine: false, renderSpec: new charts.NoneRenderSpec()),
        layoutConfig: new charts.LayoutConfig(
            leftMarginSpec: new charts.MarginSpec.fixedPixel(0),
            topMarginSpec: new charts.MarginSpec.fixedPixel(0),
            rightMarginSpec: new charts.MarginSpec.fixedPixel(0),
            bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)),
        defaultRenderer: new charts.BarRendererConfig(
            cornerStrategy: const charts.ConstCornerStrategy(30)),
      ),
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [Color(0xFF51DE93), Color(0xFFFFB540), Color(0xFFFA4169)],
          stops: [
            0.0,
            0.5,
            1.0,
          ],
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
    )
  );
}

结果：

Answer 2

BoxDecoration使用的属性Container可以实现它，如下所示：

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 370,
      decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Colors(0XFFA573FF),
                blurRadius: 10,
                offset: Offset(2, 3)),
          ],
          borderRadius: BorderRadius.all(Radius.circular(18)),
          gradient: LinearGradient(colors: [
            color: Colors(0XFFA573FF),
            color: Colors(0XFF645AFF),
          ], stops: [
            0.35,
            1
          ], begin: Alignment.topLeft, end: Alignment.bottomRight)),
          child: 
              SizedBox(
                  height: 280,
                  width: double.infinity,
                  child: StackedAreaCustomColorLineChart(
                      StackedAreaCustomColorLineChart._createSampleData())
                      // replace child with your chart here
                      ),
    );
  }