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:

You can set a flex width using properties like columnWidths https://api.flutter.dev/flutter/widgets/Table-class.html It should result is similar results to those answered here https://stackoverflow.com/questions/52784064/set-column-width-in-flutter — F-1, Jun 27 '19 at 11:30
@F-1 Hi, thank you for your answer. I've tried what you've suggested but it's not working. I added a screenshot of the output I want to achieve. — POGI, Jun 27 '19 at 13:13
I understand it now. This link helps me: https://stackoverflow.com/questions/51326170/flutter-layout-row-column-share-width-expand-height — POGI, Jun 27 '19 at 13:25

score 5 · Answer 1 · answered Jun 27 '19 at 13:57

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:

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: Text("1111111111111111111111111111111111111111111"),
                      ),
                      Container(
                        color: Colors.red,
                        width: 50.0,
                        height: 50.0,
                        child: Text("2"),
                      ),
                    ]),
                TableRow(
                    children: [
                      Container(
                        color: Colors.deepPurple,
                        width: 50.0,
                        height: 50.0,
                        child: Text("5"),
                      ),
                      Container(
                        color: Colors.cyan,
                        width: 50.0,
                        height: 50.0,
                        child: Text("6"),
                      ),
                    ]),
                TableRow(
                    children: [
                      Container(
                        color: Colors.amberAccent,
                        width: 50.0,
                        height: 50.0,
                        child: Text("7"),
                      ),
                      Container(
                        color: Colors.black87,
                        width: 50.0,
                        height: 50.0,
                        child: Text("8"),
                      ),
                    ]),
              ],
            ),
          ),
          Container(
            width: 100.0,
            color: Colors.cyan,
            child: Table(
              columnWidths: {
                1: FractionColumnWidth(.3),
              },
              children: [
                TableRow(
                    children: [
                      Container(
                        color: Colors.green,
                        width: 50.0,
                        height: 50.0,
                        child: Text("1111111111111111111111111111111111111111111"),
                      ),
                      Container(
                        color: Colors.red,
                        width: 50.0,
                        height: 50.0,
                        child: Text("2"),
                      ),
                    ]),
                TableRow(
                    children: [
                      Container(
                        color: Colors.deepPurple,
                        width: 50.0,
                        height: 100.0,
                        child: Text("5"),
                      ),
                      Container(
                        color: Colors.cyan,
                        width: 50.0,
                        height: 100.0,
                        child: Text("6"),
                      ),
                    ]),
              ],
            ),
          ),
        ],
      ),

Thank you for your answer. I actually did this earlier haha.. but it's only good for static content. I'm planning to get the data from an API and populate the table. So I just decided to create a web project and integrate it into my app. — POGI, Jun 27 '19 at 14:09

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

1 Answers1