Flutter table with rows that runs down vertically - flutter

Question

I have a screen design, below, that the team built for an app that stores a list of names vertically down on one side, and then continues on the other.
The solution we currently have in place was to create a generated List of a fixed size, and store a counter starting at one, incrementing x-number of values on the left (10 in our example) and then continuing the count for the list generation on the right; code sample to follow.
The solution works for our very basic scenario, however, we now have a need to wrap the rendering of the widget with a StreamBuilder as we'll be dynamically collecting information from a stream on interval, to populate the table with values, which is causing us severe headaches.
We looked into a GridView, however, that only allows us vertical placement of elements (left -> right, left -> right) instead of down (left) down (right).
An example of our list generation:
List<Widget> _tableRow() {
if (_counter >= 20) {
_counter = 1;
}
List<Widget> widgets = List.generate(10, (index) {
var w = Expanded(
child: Row(
children: [
Expanded(
flex: 0,
child: Container(
alignment: Alignment.center,
width: 50,
decoration: BoxDecoration(
color: kineticOffBlack,
border: Border(
right: const BorderSide(
color: Colors.black,
width: 2,
),
bottom: (index < 9)
? const BorderSide(
color: Colors.black,
width: 2,
)
: BorderSide.none,
),
),
child: Label.headingFour('$_counter'),
),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: kineticOffBlack,
border: Border(
right: const BorderSide(
color: Colors.black,
width: 2,
),
bottom: (index < 9)
? const BorderSide(
color: Colors.black,
width: 2,
)
: BorderSide.none,
),
),
child: Label.headingFour(tableNames[_counter - 1]),
),
),
Expanded(
flex: 0,
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: kineticOffBlack,
border: Border(
bottom: (index < 9)
? const BorderSide(
color: Colors.black,
width: 2,
)
: BorderSide.none,
right: const BorderSide(
color: Colors.black,
width: 2,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Label.headingFour(
scoreByMetric(
tableNames[_counter - 1], MetricType.intensity),
color: kineticGold,
textAlign: TextAlign.center,
),
const SizedBox(width: 5),
const Icon(Icons.arrow_upward, color: kineticOffBlack),
],
),
),
),
],
),
);
_counter++;
return w;
});
return widgets;
}
This block of code creates the basic layout (table + 10 rows), and is then reused again to create the right side:
Widget _buildTable() {
return Row(
children: [
Expanded(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: kineticOffBlack,
border: Border(
left: BorderSide(
color: Colors.black,
width: 2,
),
right: BorderSide(
color: Colors.black,
width: 1,
),
bottom: BorderSide(
color: Colors.black,
width: 2,
),
top: BorderSide(
color: Colors.black,
width: 1,
),
),
),
child: Flex(
direction: Axis.vertical,
children: _tableRow(),
),
),
),
Expanded(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: kineticOffBlack,
border: Border(
left: BorderSide(
color: Colors.black,
width: 1,
),
right: BorderSide(
color: Colors.black,
width: 2,
),
bottom: BorderSide(
color: Colors.black,
width: 2,
),
top: BorderSide(
color: Colors.black,
width: 1,
),
),
),
child: Column(
children: _tableRow(),
),
),
)
],
);
}
This is then use to build the table, a Row with 2x Expanded widgets, this was just what we came up with.
This works, like I said, however, we have a need to wrap the return in _buildTable() with a StreamBuilder so we could do additional manipulation on the widget as data is streamed to the application from a queuing service provided by a 3rd party vendor.
Our challenge is that we have 2x _tableRow() methods, which would need to be managed separately, when the ideal solution would be to either have a single _tableRow method that creates the desired view, or using Stream.listen() in our initState() which could, in itself be another stumbling block.
The ask here is, if any Flutter-guru out there might have a simpler solution to building the desired table, without the sorcery we had to put in place in _buildTable()?
The table design: