How can I Focus on 1 textfield only in a cell of a datatable in flutter?

Viewed 504

I have a datatable with 4 columns and textfields in them. I want to focus to other textfields in the same row only, on submitting values.As soon as I focus on second, all textfields in those columns are focused with cursor. How to avoid that? For example focus in on cell[3,1] and on submit it moves to cell[3,2] textfield, so cursor should blink only in that cell not in whole second column.

DataTable(
            showCheckboxColumn: false,
            columns: [
              DataColumn(
                label: Text(
                  firstName.toString(),
                  style: Theme.of(context).textTheme.headline5,
                ),
                numeric: true,
              ),
              DataColumn(
                label: Text(
                  secondName.toString(),
                  style: Theme.of(context).textTheme.headline5,
                ),
                numeric: true,
              ),
              DataColumn(
                label: Text(
                  thirdName.toString(),
                  style: Theme.of(context).textTheme.headline5,
                ),
                numeric: true,
              ),
              DataColumn(
                label: Text(
                  lastName.toString(),
                  style: Theme.of(context).textTheme.headline5,
                ),
                numeric: true,
              ),
            ],
            rows: users
                .map(
                  (user) => DataRow(cells: [
                    DataCell(
                      TextField(
                        autofocus: true,
                        textInputAction: TextInputAction.next,
                        onSubmitted: (String s) {
                          FocusScope.of(context).unfocus();
                          FocusScope.of(context).requestFocus(secondFocus);
                        },
                        style: Theme.of(context).textTheme.headline5,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        onChanged: (text) {
                          print("First text field: $text");
                          user.firstName = int.parse(text);
                          _calculate();
                        },
                      ),
                    ),
                    DataCell(
                      TextField(
                        autofocus: false,
                        focusNode: secondFocus,
                        textInputAction: TextInputAction.next,
                        onSubmitted: (String s) {
                          FocusScope.of(context).unfocus();
                          FocusScope.of(context).requestFocus(thirdFocus);
                        },
                        style: Theme.of(context).textTheme.headline5,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        onChanged: (text) {
                          print("Second text field: $text");
                          user.secondName = int.parse(text);
                          _calculate();
                        },
                      ),
                    ),
                    DataCell(
                      TextField(
                        focusNode: thirdFocus,
                        textInputAction: TextInputAction.next,
                        onSubmitted: (String s) {
                          FocusScope.of(context).unfocus();
                          FocusScope.of(context).requestFocus(lastFocus);
                        },
                        style: Theme.of(context).textTheme.headline5,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        onChanged: (text) {
                          print("Third text field: $text");
                          user.thirdName = int.parse(text);
                          _calculate();
                        },
                      ),
                    ),
                    DataCell(
                      TextField(
                        focusNode: lastFocus,
                        style: Theme.of(context).textTheme.headline5,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        onSubmitted: (value) {
                          _addRow();
                        },
                        onChanged: (text) {
                          print("Last text field: $text");
                          user.lastName = int.parse(text);
                          _calculate();
                        },
                      ),
                    ),
                  ]),
                )
                .toList(),
          ),
1 Answers

This worked for me

DataCell(
      cellIndex==enableEditingOn ? FocusScope(
        node: FocusScopeNode(),
        child: TextField(
          autofocus: true,
          showCursor: true,
          decoration: const InputDecoration(
            disabledBorder: InputBorder.none,
            border: InputBorder.none
          ),
          enabled: true,
          controller: _controller,
          onChanged: (s) {
            setState(() {
              validateCellInput(s, cellIndex);
            });
          },
        )
      ) : Text(item.value),
      onTap: () {editCell(cellIndex);}
    )

https://flutter.dev/docs/cookbook/forms/focus

Related