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:
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:
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%'),
),
),
],
),
],
),
],
))
);
