Flutter Data in Bar Chart - fl_chart

I need to plot a chart and I am struggling to do it. Below is my data.

[
    {
        "#": "396",
        "%": "5.38",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "bcb86f4b-bc48-434f-883b-ff259f624352",
        "gender": "M",
        "age": "65+"
    },
    {
        "#": "306",
        "%": "4.16",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "3ef9f315-c67f-4ceb-ab9e-0d844bf7a903",
        "gender": "F",
        "age": "25-34"
    },
    {
        "#": "18",
        "%": "0.24",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "670fee9c-0dde-4109-a3c3-f2016a23d9f5",
        "gender": "U",
        "age": "35-44"
    },
    {
        "#": "738",
        "%": "10.04",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "fbdbd11a-3938-420d-99a9-1f511bf53665",
        "gender": "M",
        "age": "55-64"
    },
    {
        "#": "702",
        "%": "9.55",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "6428e6bb-3aa0-48e0-a9a7-5d3bdfaadeb5",
        "gender": "M",
        "age": "45-54"
    },
    {
        "#": "144",
        "%": "1.96",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "51d8a363-0446-452f-9c9a-bae65097a89f",
        "gender": "F",
        "age": "18-24"
    },
    {
        "#": "684",
        "%": "9.3",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "fbef1992-3330-4a58-87ed-23fc9e2b6ebb",
        "gender": "F",
        "age": "55-64"
    },
    {
        "#": "18",
        "%": "0.24",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "0bc22406-c83d-46a0-841a-2fa6b4763af3",
        "gender": "U",
        "age": "25-34"
    },
    {
        "#": "756",
        "%": "10.28",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "8b6850fc-28b0-4da3-a564-87d194180ca1",
        "gender": "F",
        "age": "45-54"
    },
    {
        "#": "18",
        "%": "0.24",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "cb1a89c0-a82a-4f07-89d5-d7f6c509f340",
        "gender": "M",
        "age": "13-17"
    },
    {
        "#": "870",
        "%": "11.83",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "d888d2dc-8ffc-47d1-86fc-76e63d38892c",
        "gender": "F",
        "age": "35-44"
    },
    {
        "#": "900",
        "%": "12.24",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "a59f1b9f-03a1-46c3-bc5a-fc543115d52f",
        "gender": "M",
        "age": "25-34"
    },
    {
        "#": "504",
        "%": "6.85",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "5bc4ac9e-f788-4074-b97b-5d07e206aa25",
        "gender": "F",
        "age": "65+"
    },
    {
        "#": "78",
        "%": "1.06",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "1956771e-5656-4b31-a089-c91f300e6604",
        "gender": "M",
        "age": "18-24"
    },
    {
        "#": "1222",
        "%": "16.62",
        "month": "Apr",
        "year": "2022",
        "createdAt": "19-Apr-2022 (17:09:09.860499)",
        "id": "05080295-ae52-46a1-b4a7-f5affda40e32",
        "gender": "M",
        "age": "35-44"
    }
]

And I need to create a bar chart with 3 bars for each gender 'M', 'F', and 'U'. And xAxis will be the 'age' field values.

This is what I managed to

This is my List:

List<BarChartGroupData> barGroups() {
    var data = genderAgeData.genderAgeList;
    var pos = new List<int>.generate(data.length, (i) => i);
    return data
        .asMap()
        .map<int, BarChartGroupData>((index, data) {
          final value = BarChartGroupData(
            barsSpace: 4,
            x: pos[index],
            barRods: [
              BarChartRodData(toY: double.parse(data.percent!), color: masculineColor),
            ],
            showingTooltipIndicators: [0],
          );

          return MapEntry(index, value);
        })
        .values
        .toList();
  }

To achieve what I need, I believe I have to group the data by gender. I was trying to user where(), but it did not work. Also, I am not sure if I need to group the data before and than later on plot the chart. I also tried to use the library collections but I did not succeed. Is anybody able to help me please? Thank you

BarGraphWidget(
                      showingBarGroups: controller.listOfGraphData
                          .asMap()
                          .entries
                          .map((dataItem) {
                        return BarChartGroupData(
                            x: dataItem.key,
                            barsSpace: 4,
                            barRods: [
                              BarChartRodData(
                                toY: dataItem.value.systolic!.toDouble(),
                                color: const Color(0xff53fdd7),
                                width: 8,
                                fromY: 0,
                              ),
                              BarChartRodData(
                                toY: dataItem.value.diastolic!.toDouble(),
                                color: const Color(0xffff5182),
                                width: 8,
                              ),
                            ]);
                      }).toList(),
                    ),