Is there a widget that supports rowspan and colspan in flutter?

Question

I'm trying to create a table in flutter using Table widget but I can't find a way to merge its cells.

 Table(border: TableBorder.all(color: Colors.red),children: [
      TableRow(children: [
           Text("item 1"),
           Text("item 2"),
      ]),
      TableRow(children: [
           Text("item 3"),
           Text("item 4"),
      ]),
 ]),

Is there a Widget that supports rowspan and colspan?

Sample Expected Output:

Answer 1

I think that is still not really possible to do that right now. what you can do though is putting 2 tables next to each other to get the result you are working on, like this:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Scaffold(body: Example())));
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          width: 100.0,
          color: Colors.cyan,
          child: Table(
            children: [
              TableRow(children: [
                Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("1111111111111111111111111111111111111111111"),
                ),
                Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("2"),
                ),
              ]),
              TableRow(children: [
                Container(
                  color: Colors.deepPurple,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("5"),
                ),
                Container(
                  color: Colors.cyan,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("6"),
                ),
              ]),
              TableRow(children: [
                Container(
                  color: Colors.amberAccent,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("7"),
                ),
                Container(
                  color: Colors.black87,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("8"),
                ),
              ]),
            ],
          ),
        ),
        Container(
          width: 100.0,
          color: Colors.cyan,
          child: Table(
            columnWidths: const {
              1: FractionColumnWidth(.3),
            },
            children: [
              TableRow(children: [
                Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("1111111111111111111111111111111111111111111"),
                ),
                Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("2"),
                ),
              ]),
              TableRow(children: [
                Container(
                  color: Colors.deepPurple,
                  width: 50.0,
                  height: 100.0,
                  child: const Text("5"),
                ),
                Container(
                  color: Colors.cyan,
                  width: 50.0,
                  height: 100.0,
                  child: const Text("6"),
                ),
              ]),
            ],
          ),
        ),
      ],
    );
  }
}

Result: