how to manage textField controller for multiple dataRow in dataTable Flutter

Question

In my flutter project, I want to make the screen which is user enter quantity for multiple product. I want to manage text controllers for multiple data rows in the data table.

My data table code is:

TextEditingController textController = TextEditingController();

AlertDialog(
        content: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.height,
          margin: EdgeInsets.all(0),
          child: ListView(
            padding: EdgeInsets.all(0),
            primary: true,
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            children: [
              DataTable(
                columns: [
                  DataColumn(
                    label: Text(
                      "Product",
                      softWrap: true,
                     ),
                  ),
                  DataColumn(
                    label: Text(
                      "Qty",
                    ),
                  ),
                  DataColumn(
                      label: Text(
                        "Rs",
                      )),
                  DataColumn(
                    label: SizedBox(
                      width: 40,
                      child: Text(
                        'BalQty',
                        ),
                    ),
                  ),
                  DataColumn(
                    label: SizedBox(
                      width: 40,
                      child: Text(
                        'Stock',
                       ),
                    ),
                  ),
                ],
                rows: listOfProduct!
                    .map(
                  ((element) => DataRow(
                    cells: <DataCell>[
                      DataCell(Text(
                        element.name,
                       )),
                      DataCell(
                        TextField(
                          controller: textEditingController,
                          maxLength: 4,
                          decoration: InputDecoration(
                            labelText: 'Qty',
                            labelStyle: TextStyle(fontSize: 9.sp),
                            counterText: "",
                          ),
                          ),
                      ),
                      DataCell(
                        Text(
                          (element.pTR ?? 0).toStringAsFixed(2),
                          ),
                      ),
                      DataCell(Text(
                        element.text!.printDashIfEmpty(),
                        )),
                      DataCell(Text(
                        (element.balQty ?? 0).toStringAsFixed(2),
                        )),
                    ],
                  )),
                )
                    .toList(),
              ),
            ],
          ),
        ),
        actions: <Widget>[
          OutlinedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text(
                "Cancel",
              )),
          SizedBox(
            width: 10,
          ),
          OutlinedButton(
              onPressed: () async {
                print("QUANTITY : $textEditingController");

                listSearchProductMaster!.forEach((e) {
                  return print("TEXT CONTROLLER: ${e.textEditingController}");
                });
              },
              child: Text(
                "Add",
                ))
        ],
      )

The output I see is that the quantity that the user inserts should be added to the particular product.

Currently, my application output is

Does anyone help?

score 0 · Answer 1 · answered Aug 27 '21 at 04:45

Well, in my case, my approach was:

When user tap item to edit, show modal with initial value
User make input and tab Confirm button
after valid input, apply

It wrap focus node and controller, so easy to use.

But it force user to dig in 1 more UI level, so maybe there are better ways, but it works anyway.

I made TextEditModal widget and function to show that.

Future<String> showSingleTextEditDialog({
  @required BuildContext context,
  String initText = '',
}) async {
  String text = initText;
  bool submit = false;

  await showDialog(
    context: context,
    builder: (_) {
      return _SingleTextEditDialog(
        text: text,
        textChanged: (value) => text = value,
        onSubmit: () => submit = true,
      );
    },
  );

  return submit ? text : null;
}

class _SingleTextEditDialog extends StatefulWidget {
  _SingleTextEditDialog({
    Key key,
    @required this.text,
    @required this.textChanged,
    this.onSubmit,
  }) : super(key: key);

  final String text;
  final ValueChanged<String> textChanged;
  final VoidCallback onSubmit;

  @override
  _SingleTextEditDialogState createState() => _SingleTextEditDialogState();
}

class _SingleTextEditDialogState extends State<_SingleTextEditDialog> {
  TextEditingController textController;

  @override
  void initState() {
    super.initState();
    textController = TextEditingController(text: widget.text);
  }

  @override
  void dispose() {
    textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
        children: [
          DecoInput(
            controller: textController,
            onChanged: widget.textChanged,
          ),
          VSpace.md,
          StyledInterfaceButton(
            onTap: () {
              setState(() => widget.onSubmit());
              Navigator.of(context).pop();
            },
            text: 'Confirm',
          ),
          // VSpace.md,
        ],
      );
  }
}

and use like

onTap: () async {
  HapticFeedback.mediumImpact();
  final input = await showSingleTextEditDialog(
    context: context,
    initText: text,
  );
  if (input == null) return;
  // valid user input here

  valueChanged(input); // apply user input
},

This is not complete code. I minimized code for readability. So ignore if there are any error.

score -2 · Answer 2 · answered Aug 27 '21 at 04:53

Add your table code inside SingleChildScrollView() with scrollDirection: Axis.horizontal refer below code hope it help to you

      SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(20),
                  child: Table(
                    defaultColumnWidth: FixedColumnWidth(80.0),
                    border: TableBorder.all(
                        color: Colors.black,
                        style: BorderStyle.solid,
                        width: 2),
                    children: [
                      TableRow(
                        children: [
                          Column(
                            children: [
                              Text(
                                'Website',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                'Tutorial',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                'Review',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                          Column(children: [
                            Text(
                              'Review',
                              style: TextStyle(fontSize: 20.0),
                            ),
                          ]),
                          Column(
                            children: [
                              Text(
                                'Review',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                        ],
                      ),
                      TableRow(children: [
                        Column(
                          children: [
                            Text('Javatpoint'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('Flutter'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('5*'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('5*'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('5*'),
                          ],
                        ),
                      ]),
                      TableRow(
                        children: [
                          Column(children: [
                            Text('Javatpoint'),
                          ]),
                          Column(
                            children: [
                              Text('MySQL'),
                            ],
                          ),
                          Column(
                            children: [
                              Text('5*'),
                            ],
                          ),
                          Column(children: [
                            Text('5*'),
                          ]),
                          Column(children: [
                            Text('5*'),
                          ]),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

Scroll your table horizontaly

Your screen like - >

how to manage textField controller for multiple dataRow in dataTable Flutter

2 Answers2