fl_chart的简单使用——BarChart

完整代码

import 'dart:math';

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

class BarChartScreen extends StatefulWidget {
   
  @override
  State<StatefulWidget> createState() {
   
    return BarChartState();
  }
}

class BarChartState extends State<BarChartScreen> {
   
  late List data = [];
  @override
  void initState() {
   
    // TODO: implement initState
    super.initState();
    var rand = Random();
    for (int i = 0; i < 5; i++) {
   
      data.add({
   "yAxis": rand.nextDouble() * 10, "xAxis": i});
    }
  }

  @override
  Widget build(BuildContext context) {
   
    return Container(
      height: 300,
      child: BarChart(
          BarChartData(
            // 设置为center对齐，才能使groupsSpace生效
            alignment: BarChartAlignment.center,
            maxY: 10,
            // barGroups之间距离
            groupsSpace: 16,
            barGroups: data.map((e) {
   
              return BarChartGroupData(
                x: e["xAxis"],
                // 一个组内，各个barRod之间的间距
                barsSpace: 3,
                // 在BarChartRodData头上显示tooltip，
                // 数组放一个组内rodData的下标，表示要在一个组内哪一个柱状图上显示
                showingTooltipIndicators: [0],
                barRods: [
                  BarChartRodData(
                    y: e[