View Sorted Json Data in a Flutter Table

Question

[
  {
    "1": {
      "name": "Shahed Emon",
      "win_rate": "98.7%"
    }
  },
  {
    "2": {
      "name": "Mustakim Nahid",
      "win_rate": "88.7%"
    }
  },
  {
    "3": {
      "name": "Imtiaz Rizan",
      "win_rate": "72.3%"
    }
  },
  {
    "4": {
      "name": "Ishtiak Rongon",
      "win_rate": "52.6%"
    }
  }
]

I have this json data. Which i sorted by 'win_rate' using this-

final data = json.decode(jsonData);
  data.sort((a, b) =>
      a.values.first["win_rate"].compareTo(b.values.first["win_rate"]));

now I want to build a table in flutter which matches highest 'win_rate' with lowest 'win_rate' names. How to approach it? I tried this but I end up getting errors/no data.

What do you mean by matching highest winrate with lowest winrate? — Thomas, Mar 09 '20 at 21:56
@thomas watch the json data..everyone has a win_rate..I want to create a fixture following..who has the highest winrate will face the lowest winrate person then 2nd highest winrate will face 2nd lowest winrate person so table would be like Label- Home | Away, 1st column- Sazzad Evan | Ishtiak Rongon, 2nd column- Shahed Emon | Imtiaz Rizan ....... — Shahed Emon, Mar 09 '20 at 22:29
It would be better to perform such operations by the server. — Fatih Mert Doğancan, Mar 11 '20 at 12:37

score 0 · Accepted Answer · answered Mar 09 '20 at 22:51

Just get the reversed item from your data and put it in front of current item:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      color: Colors.yellow,
      child: Table(
        border: TableBorder(horizontalInside: BorderSide(width: 1)),
        children: _sortedData.map(
          (item) {
            final reverseItem = _sortedData[
                _sortedData.length - _sortedData.indexOf(item) - 1];
            return TableRow(
              children: [
                TableCell(
                  child: Text(item.values.first['name']),
                ),
                TableCell(
                  child: Text(reverseItem.values.first['name']),
                )
              ],
            );
          },
        ).toList(),
      ),
    ),
  );
}

Also you can loop sorted data and create the matched array out of build function.

how do I limit the size here? 8 person..so 4 rows should be shown — Shahed Emon, Mar 10 '20 at 00:23
@ShahedEmon Just a little modification: `children: _sortedData.getRange(0, 4).map(...` — Hamed Hamedi, Mar 10 '20 at 09:42

View Sorted Json Data in a Flutter Table

1 Answers1