Search code examples
flutterdartandroid-studiofl-chart

How to resolve 'No named parameter' errors in Flutter's fl_chart library?


I'm developing a Flutter application using the fl_chart library to display a line chart. While attempting to set custom titles for the chart axes, I encountered errors indicating missing named parameters in the SideTitles constructor. Below are the specific error messages I received in Android Studio's terminal:

  1. Error: No named parameter with the name 'reversedSize'. reversedSize: 22,
  2. Error: No named parameter with the name 'getTitles'. getTitles: (value) { ... }

I've searched through the fl_chart documentation and existing Stack Overflow questions but couldn't find examples that use these parameters in the SideTitles class. Here is the relevant part of my code where the errors occur:

Code Snippet


import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineTitles {
  static getTitleData() => FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reversedSize: 22, // Error: No named parameter 'reversedSize'
          getTextStyles: (value) => const TextStyle(
            color: Color(0xff68737d),
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
          getTitles: (value) {  // Error: No named parameter 'getTitles'
            switch (value.toInt()) {
              case 2: return 'MAR';
              case 5: return 'JUN';
              case 8: return 'SEP';
            }
            return '';
          },
          margin: 8,
        ),
      );
}


Solution

  • leftTitles and bottomTitles can have AxisTitles widget. You need to follow it like

    static getTitleData() => FlTitlesData(
          show: true,
          bottomTitles: AxisTitles(
            sideTitles: SideTitles(
                showTitles: true,
                reservedSize: 22,
                getTitlesWidget: (value, meta) {
                  switch (value.toInt()) {
                    case 2:
                      return Text(
                        'MAR',
                        style: TextStyle(),
                      );
                    //...
                  }
                  return Text(" ");
                }),
          ),
         /// do for second one 
        );