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

CodePudding user response：

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),
          ),
        ]),
      ),
    ],
  ),