BarChartFF

custom_bar_chart.dart

import 'package:fl_chart/fl_chart.dart';

class CustomBarChart extends StatefulWidget {
  const CustomBarChart({
    Key key,
    this.width,
    this.height,
    this.values,
    this.path1,
    this.path2,
    this.path3,
  }) : super(key: key);

  final double width;
  final double height;
  final List<double> values;
  final double path1;
  final double path2;
  final double path3;

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

class _CustomBarChartState extends State<CustomBarChart> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        elevation: 2,
        child: Padding(
          padding: const EdgeInsets.only(bottom: 15.0 ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: AnimatedSwitcher(
              duration: const Duration(milliseconds: 200),
              child: _BarChart(
                values: widget.values,
                path1: widget.path1,
                path2: widget.path2,
                path3: widget.path3,
              ),
            ),
          ),
        ),
      ),
    );
  }
  
}

class _BarChart extends StatefulWidget {
  final List<double> values;
  final double path1;
  final double path2;
  final double path3;

  const _BarChart({
    @required this.values,
    @required this.path1,
    @required this.path2,
    @required this.path3,
  });

  @override
  State<_BarChart> createState() => _BarChartState();
}

class _BarChartState extends State<_BarChart> {
  double chartWidth = 1;
  int touchedIndex = -1;
  @override
  void initState() {
    chartWidth = 15.0;
    touchedIndex = widget.values.length - 1;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BarChart(
      BarChartData(
        barTouchData: barTouchData,
        titlesData: titlesData,
        borderData: borderData,
        barGroups: barGroups(),
        gridData: FlGridData(
          show: true,
          checkToShowHorizontalLine: (value) => value % 10 == 0,
          getDrawingHorizontalLine: (value) => FlLine(
            color: const Color(0xffe7e8ec),
            strokeWidth: 1,
          ),
          drawVerticalLine: false,
        ),
        alignment: BarChartAlignment.spaceEvenly,
        maxY: widget.values.map((e) => e).toList().reduce(max),
      ),
    );
  }

  BarTouchData get barTouchData => BarTouchData(
        enabled: true,
        handleBuiltInTouches: false,
        touchTooltipData:
            BarTouchTooltipData(tooltipBgColor: Colors.transparent),
        touchCallback: (event, barTouchResponse) {
          setState(() {
            if (!event.isInterestedForInteractions ||
                barTouchResponse == null ||
                barTouchResponse.spot == null) {
              return;
            }
            touchedIndex = barTouchResponse.spot.touchedBarGroupIndex;
          });
        },
      );

  FlTitlesData get titlesData => FlTitlesData(
        show: true,
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 30,
            getTitlesWidget: getTitles,
          ),
        ),
        leftTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 28,
            interval: 1,
            getTitlesWidget: leftTitles,
          ),
        ),
        topTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        rightTitles: AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
      );

  Widget getTitles(double value, TitleMeta meta) {
    const style = TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.bold,
      fontSize: 14,
    );
    String text;
    switch (value.toInt()) {
      case 0:
        text = 'Mn';
        break;
      case 1:
        text = 'Te';
        break;
      case 2:
        text = 'Wd';
        break;
      case 3:
        text = 'Tu';
        break;
      case 4:
        text = 'Fr';
        break;
      case 5:
        text = 'St';
        break;
      case 6:
        text = 'Sn';
        break;
      default:
        text = '';
        break;
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 4.0,
      child: Text(text, style: style),
    );
  }

  Widget leftTitles(double value, TitleMeta meta) {
    const style = TextStyle(
      color: Color(0xff7589a2),
      fontWeight: FontWeight.bold,
      fontSize: 8,
    );
    String text;
    if (value == widget.path1) {
      text = 'Path1';
    } else if (value == widget.path2) {
      text = 'Path2';
    } else if (value == widget.path3) {
      text = 'Path3';
    } else {
      return Container();
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 0,
      child: Text(text, style: style),
    );
  }

  FlBorderData get borderData => FlBorderData(
        show: false,
      );

  List<BarChartGroupData> barGroups() {
    List<BarChartGroupData> barChartGroup = [];
    for (var i = 0; i < 7; i++) {
      barChartGroup.add(BarChartGroupData(
        x: i,
        barRods: [
          BarChartRodData(
              toY: widget.values.toList()[i],
              color: i == touchedIndex
                  ? Theme.of(context).primaryColor
                  : Theme.of(context).secondaryHeaderColor,
              width: chartWidth),
        ],
      ));
    }
    return barChartGroup;
  }
}