Untitled

 avatar
unknown
plain_text
2 years ago
7.9 kB
6
Indexable
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:ordo_waiter_app/constant/app_text_style.dart';
import 'package:ordo_waiter_app/constant/color.dart';
import 'package:ordo_waiter_app/constant/string_constant.dart';

class CommonChart extends StatefulWidget {

  final Color? darkColor;
  final Color? lightColor;
  final bool? isTag;
  const CommonChart({Key? key, this.darkColor, this.isTag, this.lightColor}) : super(key: key);

  @override
  State<StatefulWidget> createState() => CommonChartState();
}

class CommonChartState extends State<CommonChart> {
  final Color dark =  AppColor.orderYellow;
  final Color light = AppColor.orderYellow.withOpacity(.2);


  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: AppColor.white,
          height: 230,
          width: 350,
          child: BarChart(
            BarChartData(
              alignment: BarChartAlignment.center,
              barTouchData: BarTouchData(
                enabled: false,
              ),
              titlesData: FlTitlesData(
                show: true,
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 33,
                    getTitlesWidget: bottomTitles,
                  ),
                ),
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 35,
                    getTitlesWidget: leftTitles,
                  ),
                ),
                topTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: false,
                  ),
                ),
                rightTitles: AxisTitles(
                  sideTitles: SideTitles(showTitles: false, reservedSize: 30),
                ),

              ),maxY: 600,minY: 10,
              gridData: FlGridData(
                show: true,
                drawHorizontalLine: true,
                checkToShowHorizontalLine: (value) => value % 10 == 0,
                getDrawingHorizontalLine: (value) => FlLine(
                  color: const Color(0xffe7e8ec),
                  strokeWidth: 1,
                ),
                drawVerticalLine: false,
              ),
              borderData: FlBorderData(border: const Border(bottom: BorderSide(color: Color(0xffe7e8ec))),
                show: true,
              ),
              groupsSpace: 30,
              barGroups: getData(),
            ),
          ),
        ),
        widget.isTag == true ? Padding(
          padding: const EdgeInsets.only(top: 15,left: 5),
          child:  Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              box(AppStrings.currentWeek,widget.darkColor ?? dark),
              const SizedBox(width: 20,),
              box(AppStrings.previousWeek,widget.lightColor ?? light),
            ],
          ),
        ) : Container()
      ],
    );
  }

  Widget bottomTitles(double value, TitleMeta meta) {
    const style = TextStyle(color: Color(0xff939393), fontSize: 10);
    String text;
    switch (value.toInt()) {
      case 0:
        text = 'MON';
        break;
      case 1:
        text = 'TUE';
        break;
      case 2:
        text = 'WED';
        break;
      case 3:
        text = 'THU';
        break;
      case 4:
        text = 'FRI';
        break;
      case 5:
        text = 'SAT';
        break;
      default:
        text = '';
        break;
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: Text(text, style: style),
    );
  }

  Widget leftTitles(double value, TitleMeta meta) {
    if (value == meta.max) {
      return Container();
    }
    const style = TextStyle(
      color: Color(
        0xff939393,
      ),
      fontSize: 10,
    );
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: Text(
        '\$${meta.formattedValue}',
        style: style,
      ),
    );
  }

  List<BarChartGroupData> getData() {
    return [
      BarChartGroupData(
        x: 0,
        barsSpace: 4,
        barRods: [
          BarChartRodData(
              width: 15,
              toY: 500,
              color: Colors.transparent,
              rodStackItems: [
                BarChartRodStackItem(220, 300,widget.darkColor ?? dark),
                BarChartRodStackItem(0, 250,widget.lightColor ?? light),
              ],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(2), topRight: Radius.circular(2))),
        ],
      ),
      BarChartGroupData(
        x: 1,
        barsSpace: 4,
        barRods: [
          BarChartRodData(
              width: 15,
              toY: 500,
              color: Colors.transparent,
              rodStackItems: [
                BarChartRodStackItem(150, 250, widget.darkColor ?? dark),
                BarChartRodStackItem(0, 150,widget.lightColor ??  light),
              ],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(2), topRight: Radius.circular(2))),
        ],
      ),
      BarChartGroupData(
        x: 2,
        barsSpace: 4,
        barRods: [
          BarChartRodData(
              width: 15,
              toY: 500,
              color: Colors.transparent,
              rodStackItems: [
                BarChartRodStackItem(50, 100,widget.darkColor ?? dark),
                BarChartRodStackItem(0, 50,widget.lightColor ??  light),
              ],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(2), topRight: Radius.circular(2))),
        ],
      ),
      BarChartGroupData(
        x: 3,
        barsSpace: 4,
        barRods: [
          BarChartRodData(
              width: 15,
              toY: 500,
              color: Colors.transparent,
              rodStackItems: [
                BarChartRodStackItem(0, 230,widget.darkColor ?? dark),
                BarChartRodStackItem(0, 300,widget.lightColor ??  light),
              ],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(2), topRight: Radius.circular(2))),
        ],
      ),
      BarChartGroupData(
        x: 4,
        barsSpace: 4,
        barRods: [
          BarChartRodData(
              width: 15,
              toY: 500,
              color: Colors.transparent,
              rodStackItems: [
                BarChartRodStackItem(220, 350,widget.darkColor ?? dark),
                BarChartRodStackItem(0, 350,widget.lightColor ?? light),
              ],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(2), topRight: Radius.circular(2))),
        ],
      ),
      BarChartGroupData(
        x: 5,
        barsSpace: 4,
        barRods: [
          BarChartRodData(
              width: 15,
              toY: 600,
              color: Colors.transparent,
              rodStackItems: [
                BarChartRodStackItem(250, 300,widget.darkColor ?? dark),
                BarChartRodStackItem(0, 250,widget.lightColor ?? light),
              ],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(2), topRight: Radius.circular(2))),
        ],
      ),
    ];
  }

  Widget box(String text,Color color) {
    return Row(
      children: [
        Container(
          height: 14,
          width: 14,
          decoration: BoxDecoration(
              color: color, borderRadius: BorderRadius.circular(4)),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 10),
          child: Text(text,style: AppStyle.weight500Style(size: 12,color: AppColor.textColor),),
        ),
      ],
    );
  }
}
Editor is loading...