diplomatic-quarter/lib/widgets/charts/custom_line_chart.dart

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

class LineChartModel {
  int value;
  String title;

  LineChartModel(this.title, this.value);
}

class CustomLineChart extends StatefulWidget {
  final List<LineChartModel> list;
  final bool isArabic;

  CustomLineChart(this.list, this.isArabic);

  @override
  _CustomLineChartState createState() => _CustomLineChartState();
}

class _CustomLineChartState extends State<CustomLineChart> {
  bool showAvg = false;

  final List<LineChartModel> myList = [
    LineChartModel("", 0),
    LineChartModel("", 0),
    // LineChartModel("", 0),
  ];

  List<LineChartModel> list = [];

  @override
  void initState() {
    super.initState();
    if (widget.list.isEmpty) {
      list = myList;
    } else {
      list = widget.list;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AspectRatio(
          aspectRatio: 1.0,
          child: LineChart(
            mainData(),
          ),
        ),
        SizedBox(
          width: 60,
          height: 34,
          child: TextButton(
            onPressed: () {
              setState(() {
                showAvg = !showAvg;
              });
            },
            child: Text(
              '',
              style: TextStyle(fontSize: 12, color: showAvg ? Colors.white.withOpacity(0.5) : Colors.white),
            ),
          ),
        ),
      ],
    );
  }

  LineChartData mainData() {
    SideTitles right = SideTitles(
      showTitles: true,
      margin: 0,
      reservedSize: 8,
      getTitles: (value) {
        return '';
      },
    );
    SideTitles left = SideTitles(
      showTitles: true,
      interval: 1,
      getTextStyles: (cxt, value) => const TextStyle(color: Color(0xff2E303A), fontWeight: FontWeight.w600, fontSize: 12, letterSpacing: 0),
      getTitles: (value) {
        if (widget.list.isEmpty) {
          return (value).toInt().toString();
        }
        return (value * 20).toInt().toString();
      },
      reservedSize: 22,
      margin: 12,
    );
    return LineChartData(
      lineTouchData: LineTouchData(enabled: false),
      gridData: FlGridData(
        show: true,
        drawVerticalLine: false,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xffEFEFEF),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
          show: true,
          topTitles: SideTitles(showTitles: false),
          bottomTitles: SideTitles(
            showTitles: true,
            reservedSize: 22,
            interval: 1,
            getTextStyles: (cxt, value) => const TextStyle(color: Color(0xff2E303A), fontWeight: FontWeight.w600, fontSize: 12, letterSpacing: 0),
            getTitles: (value) {
              String _title = list[value.toInt()].title;
              return (_title.length > 3 ? (widget.isArabic ? _title : _title.substring(0, 3)) : _title).toUpperCase();
            },
            margin: 12,
          ),
          rightTitles: widget.isArabic ? left : right,
          leftTitles: widget.isArabic ? right : left),
      borderData: FlBorderData(
        show: true,
        border: Border.symmetric(
          horizontal: BorderSide(color: const Color(0xffEFEFEF), width: 1),
        ),
      ),
      minX: 0,
      maxX: widget.list.isEmpty ? 1 : widget.list.length - 1.0,
      minY: widget.list.isEmpty ? -1 : 0,
      maxY: widget.list.isEmpty ? 1 : 5,
      lineBarsData: [
        LineChartBarData(
          spots: [
            for (int i = 0; i < list.length; i++) FlSpot(i + 0.0, (list[i].value / 20) + 0.0),
          ],
          isCurved: true,
          preventCurveOverShooting: true,
          barWidth: 2,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
        ),
      ],
    );
  }
}