how to make this column editable and save the edit data when click on save button?

How to make this column editable and save the edit data when click on save button?

I have create a table like below, but I cant figure out how to make the column can be edit and can be save after edit.

I have google around still cant find any solution for this. I want to the column can be edit and be save. Any resource I can refer to make it work? Thanks

class _TableExample extends State<ggwp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Table Example'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.only(top: 10),
              child: Table(
                defaultColumnWidth: FixedColumnWidth(126.0),
                border: TableBorder.all(
                    color: Colors.black, style: BorderStyle.solid, width: 2),
                children: [
                  TableRow(
                    children: [
                      Container(
                        padding: EdgeInsets.only(top: 15),
                        height: 50,
                        color: Colors.cyan,
                        child: Column(children: [
                          Text(
                            'Selection No',
                            style: TextStyle(fontSize: 20),
                          )
                        ]),
                      ),
                      TableCell(
                        verticalAlignment: TableCellVerticalAlignment.fill,
                        child: Container(
                          color: Colors.white,
                          child: Container(
                            padding: EdgeInsets.only(top: 15),
                            color: Colors.white,
                            child: Column(children: [
                              Text(
                                '001',
                                style: TextStyle(fontSize: 20),
                              )
                            ]),
                          ),
                        ),
                      ),
                      Container(
                        height: 50,
                        color: Colors.white,
                        child: Container(
                          padding: EdgeInsets.only(top: 15),
                          color: Colors.white,
                          child: Column(children: [
                            Text(
                              '002',
                              style: TextStyle(fontSize: 20),
                            )
                          ]),
                        ),
                      ),
                    ],
                  ),
                  TableRow(
                    children: [
                      Container(
                        padding: EdgeInsets.only(top: 15),
                        height: 50,
                        color: Colors.cyan,
                        child: Column(children: [
                          Text(
                            'Price',
                            style: TextStyle(fontSize: 20),
                          )
                        ]),
                      ),
                      TableCell(
                        verticalAlignment: TableCellVerticalAlignment.fill,
                        child: Container(
                          padding: EdgeInsets.only(top: 15),
                          color: Colors.white,
                          child: Column(children: [
                            Text(
                              '5.5',
                              style: TextStyle(fontSize: 20),
                            )
                          ]),
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.only(top: 15),
                        height: 50,
                        color: Colors.white,
                        child: Column(children: [
                          Text(
                            '6.9',
                            style: TextStyle(fontSize: 20),
                          )
                        ]),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Container(
              child: ElevatedButton(
                onPressed: () {
                  // Code to execute when the button is pressed
                },
                child: Text('Save'),
              ),
            )
          ]))),
    );
  }
}

You can replace those text widget that you want to make editable with TextField. First define TextEditingController with default value like this:

TextEditingController priceOneController = TextEditingController(text: '5.5');
TextEditingController priceTwoController = TextEditingController(text: '6.9');

then use them like this:

TableRow(
    children: [
      Container(
        padding: EdgeInsets.only(top: 15),
        height: 50,
        color: Colors.cyan,
        child: Column(children: [
          Text(
             'Price',
              style: TextStyle(fontSize: 20),
          )
        ]),
      ),
      TableCell(
        verticalAlignment: TableCellVerticalAlignment.fill,
        child: Container(
          padding: EdgeInsets.only(top: 15),
          color: Colors.white,
          child: Column(children: [
            TextField(
               controller: priceOneController,
               InputDecoration(border: InputBorder.none),
               style:  TextStyle(fontSize: 20),
            ),
          ]),
        ),
      ),
      Container(
        padding: EdgeInsets.only(top: 15),
        height: 50,
        color: Colors.white,
        child: Column(children: [
          TextField(
             controller: priceTwoController,
             InputDecoration(border: InputBorder.none),
             style:  TextStyle(fontSize: 20),
          ),
        ]),
      ),
    ],
  ),