如何在flutter中创建条形图?

使用Flutter解锁排行榜世界可能是一段激动人心的旅程,对于更简单的开始,fl_chart是初学者友好的选择。让我们通过这些步骤来制作一个迷人的条形图:

使用此插件

• fl_chart

实例

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

class CustomBarChart extends StatefulWidget {
 const CustomBarChart({super.key});
  @override
 State<StatefulWidget> createState() => CustomBarChartState();
 }

class CustomBarChartState extends State<CustomBarChart> {
final double width = 7;

late List<BarChartGroupData> rawBarGroups;
late List<BarChartGroupData> showingBarGroups;

int touchedGroupIndex = -1;

@override
void initState() {
super.initState();
final barGroup1 = makeGroupData(0, 5, 12);
final barGroup2 = makeGroupData(1, 16, 12);
final barGroup3 = makeGroupData(2, 18, 5);
final barGroup4 = makeGroupData(3, 19.97, 1);
final barGroup5 = makeGroupData(4, 29, 6);
final barGroup6 = makeGroupData(5, 19, 1.5);
final barGroup7 = makeGroupData(6, 10, 1.5);

final items = [
  barGroup1,
  barGroup2,
  barGroup3,
  barGroup4,
  barGroup5,
  barGroup6,
  barGroup7,
];

rawBarGroups = items;

showingBarGroups = rawBarGroups;

}

@override
 Widget build(BuildContext context) {
  return Scaffold(
   backgroundColor: Colors.white,
   appBar: AppBar(
   title: const Text("Bar Chart Demo"),
   ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      const SizedBox(
        height: 15,
      ),
      const SizedBox(
        height: 38,
      ),
      SizedBox(
        height: 300,
        child: BarChart(
          BarChartData(
            maxY: 50,
            baselineY: 0,
            minY: 0,
            barTouchData: BarTouchData(
              touchTooltipData: BarTouchTooltipData(
                tooltipBgColor: Colors.grey,
                getTooltipItem: (a, b, c, d) => null,
              ),
              touchCallback: (FlTouchEvent event, response) {
                if (response == null || response.spot == null) {
                  setState(() {
                    touchedGroupIndex = -1;
                    showingBarGroups = List.of(rawBarGroups);
                  });
                  return;
                }

                touchedGroupIndex = response.spot!.touchedBarGroupIndex;

                setState(() {
                  if (!event.isInterestedForInteractions) {
                    touchedGroupIndex = -1;
                    showingBarGroups = List.of(rawBarGroups);
                    return;
                  }
                  showingBarGroups = List.of(rawBarGroups);
                  if (touchedGroupIndex != -1) {
                    var sum = 0.0;
                    for (final rod
                        in showingBarGroups[touchedGroupIndex].barRods) {
                      sum += rod.toY;
                    }
                    final avg = sum /
                        showingBarGroups[touchedGroupIndex].barRods.length;

                    showingBarGroups[touchedGroupIndex] =
                        showingBarGroups[touchedGroupIndex].copyWith(
                      barRods: showingBarGroups[touchedGroupIndex]
                          .barRods
                          .map((rod) {
                        return rod.copyWith(toY: avg, color: Colors.red);
                      }).toList(),
                    );
                  }
                });
              },
            ),
            titlesData: FlTitlesData(
              show: true,
              rightTitles: const AxisTitles(
                sideTitles: SideTitles(showTitles: false),
              ),
              topTitles: const AxisTitles(
                sideTitles: SideTitles(showTitles: false),
              ),
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: bottomTitles,
                  reservedSize: 42,
                ),
              ),
              leftTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 35,
                  interval: 0.5,
                  getTitlesWidget: leftTitles,
                ),
              ),
            ),
            borderData: FlBorderData(
                show: true,
                border: const Border(
                    bottom: BorderSide(
                        width: 1, color: CupertinoColors.inactiveGray))),
            barGroups: showingBarGroups,
            gridData: const FlGridData(
              show: true,
              drawVerticalLine: false,
            ),
          ),
        ),
      ),
      const SizedBox(
        height: 12,
      ),
    ],
  ),
);}

  Widget leftTitles(double value, TitleMeta meta) {
const style = TextStyle(
  color: Color(0xff7589a2),
  fontWeight: FontWeight.normal,
  fontSize: 14,
);
String text;
if (value == 0) {
  text = '0';
} else if (value == 10) {
  text = '10K';
} else if (value == 19) {
  text = '20K';
} else if (value == 29) {
  text = '30K';
} else if (value == 39) {
  text = '40K';
} else {
  return Container();
}
return SideTitleWidget(
  axisSide: meta.axisSide,
  space: 0,
  child: Padding(
    padding: const EdgeInsets.only(top: 9, right: 5),
    child: Text(text, style: style),
  ),
);
   }

Widget bottomTitles(double value, TitleMeta meta) {
final titles = <String>['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

final Widget text = Text(
  titles[value.toInt()],
  style: const TextStyle(
    color: Color(0xff7589a2),
    fontWeight: FontWeight.normal,
    fontSize: 14,
  ),
);

return SideTitleWidget(
  axisSide: meta.axisSide,
  space: 5, //margin top
  child: text,
);
  }



 BarChartGroupData makeGroupData(int x, double y1, double y2) {
    return BarChartGroupData(
      barsSpace: 4,
      x: x,
      barRods: [
        BarChartRodData(
          borderRadius: const BorderRadius.all(Radius.zero),
          toY: y1,
          color: Colors.green,
          width: width,
        ),
        BarChartRodData(
          toY: y2,
          borderRadius: const BorderRadius.all(Radius.zero),
          color: Colors.red,
          width: width,
        ),
      ],
    );
  }

  Widget makeTransactionsIcon() {
    const width = 4.5;
    const space = 3.5;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: width,
          height: 10,
          color: Colors.white.withOpacity(0.4),
        ),
        const SizedBox(
          width: space,
        ),
        Container(
          width: width,
          height: 28,
          color: Colors.white.withOpacity(0.8),
        ),
        const SizedBox(
          width: space,
        ),
        Container(
          width: width,
          height: 42,
          color: Colors.white.withOpacity(1),
        ),
        const SizedBox(
          width: space,
        ),
        Container(
          width: width,
          height: 28,
          color: Colors.white.withOpacity(0.8),
        ),
        const SizedBox(
          width: space,
        ),
        Container(
          width: width,
          height: 10,
          color: Colors.white.withOpacity(0.4),
        ),
      ],
    );
  }
}

我希望这能奏效。