How to structure Flutter chart code into a StatefulWidget with Scaffold?

Question

I'm trying to integrate a Flutter chart into a dynamic app. I have chart code adapted from a YouTube tutorial, but I believe the original code was likely designed for use within a stateless widget. I'm struggling to refactor the code to work correctly within a StatefulWidget and alongside a Scaffold to provide the overall app structure.

Here's the chart code:

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

class LineTitles {
  static GetTitleData() => 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(" ");
              },

          )));
}

I'm using Android Studio for development. Can someone guide how to restructure this chart code to function effectively within a stateful widget and use a Scaffold for the app's layout? Thank you!

Answer 1

Here you go. Add other missing packages in top.

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(" ");
              },

          )));
  }
}