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?

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:

Answer 2

Result You use row and column. You must define unity ( width & height) of row and column.

    double unityWidth = 70;
    double unityHeight = 40;
    // 2 unity = two rows or columns merge
    return Scaffold(
      appBar: AppBar(
        title: Text("Merge Data Table"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                        color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                          child: Text('Items'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                        child: Text('Percent'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('Items 1'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('20%'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('Items 2'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('50%'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                        child: Text('Price'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                        child: Text('Other'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight*2,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('1888'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight*2,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('20%'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ))
    );