Using fl_chart how can we add a now line?

Question

Having this chart, how can I add the red line (now)?

This is what I have so far:

LineChartData(
  maxY: maxY + 10 * _onePercentRange,
  minY: minY - 10 * _onePercentRange,
  titlesData: FlTitlesData(
    bottomTitles: SideTitles(
      showTitles: true,
      margin: 10,
      getTitles: (value) {
        return getDateBaseInFormatFromJsonString(
            dates[value.toInt()], "MM/dd\nHHmm");
      },
    ),
  ),
  borderData: FlBorderData(
    show: true,
    border: Border(
      bottom: BorderSide(
        color: currentTheme.primaryColor,
        width: 2,
      ),
      left: BorderSide(
        color: currentTheme.primaryColor,
        width: 2,
      ),
    ),
  ),
  lineBarsData: [
    LineChartBarData(
      spots: spots,
      isCurved: true,
      colors: [currentTheme.primaryColor],
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
    ),
  ],
);

Answer 1

This was my solution:

List<int> dates = tideData
    .map(
      (e) => e.timeStamp,
    )
    .toList();

double? nowScaleDouble;

var nowTimeStamp = DateTime.now().millisecondsSinceEpoch;
for (var i = 1; i < dates.length; i++) {
  if (dates[i - 1] <= nowTimeStamp && dates[i] >= nowTimeStamp) {
    var _intervalLength = dates[i] - dates[i - 1];
    var _x = dates[i] - nowTimeStamp;
    var _percent = _x / _intervalLength;
    nowScaleDouble = i + _percent;
    break;
  }
}

return LineChartData(
  extraLinesData: ExtraLinesData(
    verticalLines: nowScaleDouble == null
        ? null
        : [
            VerticalLine(
              x: nowScaleDouble,
              color: const Color.fromRGBO(197, 0, 0, 1),
              strokeWidth: 2,
              dashArray: [5, 10],
              label: VerticalLineLabel(
                show: true,
                alignment: Alignment(1, 0.5),
                padding: const EdgeInsets.only(left: 10, top: 5),
                labelResolver: (line) =>
                    dateToScreen(DateTime.now(), format: "MM/dd\nHHmm"),
              ),
            ),
          ],
  ),
  maxY: maxY + 10 * _onePercentRange,
  minY: minY - 10 * _onePercentRange,
  titlesData: FlTitlesData(
    bottomTitles: SideTitles(
      showTitles: true,
      margin: 10,
      getTitles: (value) {
        return dateToScreen(
            DateTime.fromMillisecondsSinceEpoch(
              dates[value.toInt()],
            ),
            format: "MM/dd\nHHmm");
      },
    ),
  ),
  borderData: FlBorderData(
    show: true,
    border: Border(
      bottom: BorderSide(
        color: currentTheme.primaryColor,
        width: 2,
      ),
      left: BorderSide(
        color: currentTheme.primaryColor,
        width: 2,
      ),
    ),
  ),
  lineBarsData: [
    LineChartBarData(
      spots: spots,
      isCurved: true,
      colors: [currentTheme.primaryColor],
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
    ),
  ],
);