So, I wanted to make a nested Table Row in Flutter basically something like this
class _MyHomeState extends State<MyHome> {
var dat=" ";
myTableRow(day,period1,period2,period3,period4,period5,period6,period7,period8)
{
return TableRow(
children: [
Text(day),
Text(period1),
Text(period2),
Text(period3),
Text(period4),
Text(period5),
Text(period6),
Text(period7),
Text(period8),
]
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
centerTitle: true,
title: Text('Time Table App'),
),
body: Container(
margin: EdgeInsets.only(left: 30,right: 30),
child:RotatedBox(
quarterTurns: 3,
child:Table(
border: TableBorder.all(),
children:[
TableRow(
children:[
Text("COA"),
TableRow(
children: [
Text("COA"),
Text("DSTL")
]),
])
])
)));
}
}
I have made a function for seperate Table Rows so, that I can give Text Styles to any or all of them depending upon user input... and rotated the table so that it does not appear cluncky to the user...now nesting the tables is not working to make a table like that so do I use columns and rows or table rows can be nested but I'm not doing it the right way?
CodePudding user response:
Since TableRow
accepts any widget in children, you can easily nest a table inside a table. Please check the following code, you can run it in Dartpad.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Table(border: TableBorder.all(), children: [
const TableRow(children: [
Text('Column 1'),
Text('Column 2'),
]),
TableRow(children: [
const Text('Entry 1'),
Table(border: TableBorder.all(), children: const [
TableRow(children: [
Text('Nested Entry 1'),
Text('Nested Entry 2'),
]),
TableRow(children: [
Text('Nested Entry 3'),
Text('Nested Entry 4'),
]),
]),
]),
]),
),
),
);
}
}