如何将扑动图表构建到带有脚手架的状态下widget中？

Question

我正在尝试将颤动图表集成到动态应用程序中。我已经根据YouTube教程进行了调整的图表代码，但是我相信原始代码可能是为无状态小部件而设计的。我正在努力重构代码在statefulwidget中正确工作，并与脚手架一起提供整体应用结构。

这是图表代码：

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

          )));
}

我正在使用Android Studio进行开发。有人可以指导如何重组此图表代码以在状态窗口小部件中有效运行并使用脚手架在应用程序的布局中？谢谢你！

Answer 1

干得好。在顶部添加其他缺少的软件包。

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

          )));
  }
}