如何在 flutter 中制作嵌套表格

Question

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?

Answer 1

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