Add Table Widget on FAB Click FLUTTER-CodePudding

I need the user in my app to click on an add button and it should create a basic Table on the screen. I have the code for the table in Scaffold and a FAB that doesn't do anything yet. What should I write in onPressed for it to add my table on the screen?

Here is my code if you need it:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Table"),
      ),
      floatingActionButton: FloatingActionButton(
        highlightElevation: 50,
        onPressed: () {},
        child: const Icon(Icons.add),
        ),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
           Container(
                    margin: const EdgeInsets.all(20),
                    child: Table(
                      border: const TableBorder(top: BorderSide(), bottom: BorderSide(), left: BorderSide(), right: BorderSide(),
                      horizontalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid),
                      verticalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid)),
                      children: const [
                        TableRow(children: [
                          Padding(padding: EdgeInsets.all(10.0),),
                          Padding(padding: EdgeInsets.all(10.0),)
                        ]),
                        TableRow(children: [
                          Padding(padding: EdgeInsets.all(10.0),),
                          Padding(padding: EdgeInsets.all(10.0),)
                        ]),
                        TableRow(children: [
                          Padding(padding: EdgeInsets.all(10.0),),
                          Padding(padding: EdgeInsets.all(10.0),)
                        ]),
                        TableRow(children: [
                          Padding(padding: EdgeInsets.all(10.0),),
                          Padding(padding: EdgeInsets.all(10.0),)
                        ]),
                      ],
                    ),
                  ),
              ]
          ),
      ),
    );
  } ```

CodePudding user response：

Try the following code:

List<Widget> children = [];

floatingActionButton: FloatingActionButton(
  highlightElevation: 50,
  onPressed: () {
    children.add(
      value // Code for your table
    );
    setState(() {});
  },
  child: const Icon(Icons.add),
),

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: children,
),

CodePudding user response：

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key, required this.title});

 final String title;

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

 List<Widget> children = [];
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title:const Text("Table"),
     ),
     floatingActionButton: FloatingActionButton(
       highlightElevation: 50,
       onPressed: () {
         children.add(
           Container(
             margin: const EdgeInsets.all(20),
             child: Table(
               border: const TableBorder(top: BorderSide(), bottom: BorderSide(), left: BorderSide(), right: BorderSide(),
                   horizontalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid),
                   verticalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid)),
               children: const [
                 TableRow(children: [
                   Padding(padding: EdgeInsets.all(10.0),),
                   Padding(padding: EdgeInsets.all(10.0),)
                 ]),
                 TableRow(children: [
                   Padding(padding: EdgeInsets.all(10.0),),
                   Padding(padding: EdgeInsets.all(10.0),)
                 ]),
                 TableRow(children: [
                   Padding(padding: EdgeInsets.all(10.0),),
                   Padding(padding: EdgeInsets.all(10.0),)
                 ]),
                 TableRow(children: [
                   Padding(padding: EdgeInsets.all(10.0),),
                   Padding(padding: EdgeInsets.all(10.0),)
                 ]),
               ],
             ),
           ),
         );
       },
       child: const Icon(Icons.add),
       ),
     body: Center(
         child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
           children: children,
         ),
     ),
   );
 }
}