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