How to fix 'FlTitlesData' is not a subtype of type 'Widget?' in Flutter chart app?

Question

Concise Issue: I'm encountering the error "type 'FlTitlesData' is not a subtype of type 'Widget?'" in my Flutter chart app. This is preventing my app from running. Can someone help me resolve this?

Context: I'm using Android Studio and following a YouTube tutorial to build this app. I'm working with the fl_chart library to create the chart.

Code:

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

        class Scaffoldcheck extends StatefulWidget {
          @override
          State<Scaffoldcheck> createState() => _ScaffoldcheckState();
        }
        class _ScaffoldcheckState extends State<Scaffoldcheck> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: LineTitles.GetTitleData(),
            );
          }
        }
        class LineTitles {
          static GetTitleData() {
            return FlTitlesData(
                show: true,
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                      showTitles: true,
                      reservedSize: 35,
                      getTitlesWidget: (value, meta) {
                        switch (value.toInt()) {
                          case 2:
                            return Text(
                              'MAR',
                              style: TextStyle(
                                color: Color(0xff68737d),
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            );
                          case 5:
                            return Text(
                              'JUN',
                              style: TextStyle(
                                color: Color(0xff68737d),
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            );
                          case 8:
                            return Text('SEP',
                                style: TextStyle(
                                  color: Color(0xff68737d),
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16,
                                ));
                        }
                        return Text(" ");
                      }),
                ),
                leftTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      reservedSize: 35,
                      getTitlesWidget: (value, meta) {
                        switch (value.toInt()) {
                          case 1:
                            return Text(
                              '10k',
                              style: TextStyle(
                                color: Color(0xff68737d),
                                fontWeight: FontWeight.bold,
                                fontSize: 15,
                              ),
                            );
                          case 3:
                            return Text(
                              '30k',
                              style: TextStyle(
                                color: Color(0xff68737d),
                                fontWeight: FontWeight.bold,
                                fontSize: 15,
                              ),
                            );
                          case 5:
                            return Text('50k',
                                style: TextStyle(
                                  color: Color(0xff68737d),
                                  fontWeight: FontWeight.bold,
                                  fontSize: 15,
                                )
                            );
                        }
                        return Text(" ");
                      },
                    )));
          }
        }

App Structure: My main.dart has home: Scaffoldcheck().

Answer 1

Like the error said FlTitlesData is not subtype of Widget. Copying from fl_chart example https://github.com/imaNNeoFighT/fl_chart/blob/master/example/lib/line_chart/samples/line_chart_sample1.dart.

      // generating FlTitlesData
      FlTitlesData get titlesData1 => FlTitlesData(
        bottomTitles: AxisTitles(
          sideTitles: bottomTitles,
        ),
        rightTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        leftTitles: AxisTitles(
          sideTitles: leftTitles(),
        ),
      );

      // assign FlTitlesData into LineChartData
      LineChartData get sampleData1 => LineChartData(
        lineTouchData: lineTouchData1,
        gridData: gridData,
        titlesData: titlesData1,
        borderData: borderData,
        lineBarsData: lineBarsData1,
        minX: 0,
        maxX: 14,
        maxY: 4,
        minY: 0,
      );

      Widget linechart() {
        return LineChart(
         sampleData1,
         swapAnimationDuration: const Duration(milliseconds: 250),
      );
}

If you want to create chart widget like LineChart, just create instance of LineChartData. There is a parameter named titlesData that take instance of FlTitlesData.

You can check the complete example to the github repo.