How to create a fl_chart in Flutter with a custom gradient and triangular spots indicator?

Question

I'm working on creating a chart using fl_chart in Flutter, and I'm having difficulty achieving the desired chart style. I want to create a chart similar to the one below:

LineChart(
  mainData()
)

Here's the mainData function I've implemented:

  LineChartData mainData() {
    final lineBarsData = [
      LineChartBarData(
        isCurved: true,
        color: Colors.transparent,
        spots: [
          FlSpot(0, 55),
          FlSpot(10, 10),
        ],
        dotData: FlDotData(
          show: true,
          getDotPainter: (spot, percent, barData, index) => FlDotCirclePainter(
            radius: 8,
            color: lerpGradient(
              barData.gradient!.colors,
              [0, 100],
              percent / 10,
            ),
            strokeWidth: 2,
          ),
        ),
        belowBarData: BarAreaData(
          show: true,
          spotsLine: BarAreaSpotsLine(
              show: true,
              flLineStyle: FlLine(),
              checkToShowSpotLine: (spot) {
                return true;
              }),
          gradient: LinearGradient(
            colors: [
              const Color(0xffFF0400).withOpacity(0.3),
              const Color(0xffF7AC00).withOpacity(0.3),
              const Color(0xff2AFD00).withOpacity(0.3),
            ],
            stops: const [0.2, 0.5, 1],
          ),
        ),
        gradient: LinearGradient(
          colors: [
            const Color(0xffFF0400).withOpacity(0.3),
            const Color(0xffF7AC00).withOpacity(0.3),
            const Color(0xff2AFD00).withOpacity(0.3),
          ],
          stops: const [0.2, 0.5, 1],
        ),
      ),
    ];
    final tooltipBarsData = lineBarsData[0];
    SideTitles bottomTitles = SideTitles(
      showTitles: true,
      interval: 1,
      getTitlesWidget: (value, meta) {
        String text;
        switch (value.toInt()) {
          case 0:
            text = '0%';
            break;
          case 1:
            text = '100%';
            break;
          default:
            return Container();
        }
        return SideTitleWidget(
            axisSide: meta.axisSide,
            child: Text(
              text,
              style: sRw400s10,
            ));
      },
    );
    SideTitles rightTitles = SideTitles(
      showTitles: false,
      interval: 100,
    );
    return LineChartData(
      borderData: FlBorderData(
          show: true,
          border: Border(
              bottom: BorderSide(
                  width: 4,
                  color: lerpGradient(const [
                    Color(0xffFF0400),
                    Color(0xffF7AC00),
                    Color(0xff2AFD00)
                  ], [
                    0,
                    0.4,
                    1
                  ], 20)))),
      backgroundColor: Colors.transparent,
      maxY: 100,
      maxX: 1,
      minY: 0,
      gridData: const FlGridData(
        show: false,
      ),
      titlesData: FlTitlesData(
        show: true,
        rightTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        bottomTitles: AxisTitles(
          sideTitles: bottomTitles,
        ),
        leftTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
      ),
      lineBarsData: lineBarsData,
    );
  }

I'm encountering the following error on Stack Overflow: "It looks like your post is mostly code; please add some more details." Can someone provide guidance on how to overcome this error and improve my question to receive helpful responses?

Thank you for your assistance!