Есть ли способ сделать список флажков во флаттере, где пользователь может редактировать метку этого флажка? Например, задача, которая должна быть выполнена

Question

Я пытаюсь создать пользовательский интерфейс для приложения, которое позволяет пользователям перечислять задачи и отмечать их по мере их выполнения. Но я хочу, чтобы пользователь мог легко редактировать имена этих задач, а затем установить флажок для завершения.

Я пытался использовать ListView.Builder из этого урока

https://miro.medium.com/max/186/1*gE4Qj0fFgLFGlSUiy-rn2w.gif (возможно, вам придется скопировать и вставить ссылку)

Просто я хочу, чтобы контрольный список отображался

Ссылка: https://medium.com/@DakshHub/flutter-displaying-dynamic-contents-using-listview-builder-f2cedb1a19fb

class DyanmicList extends State<ListDisplay> {
List<String> litems = [];
final TextEditingController eCtrl = new TextEditingController();
@override
Widget build (BuildContext ctxt) {
return new Scaffold(
  appBar: new AppBar(title: new Text("Dynamic Demo"),),
  body: new Column(
    children: <Widget>[
      new TextField(
        controller: eCtrl,
        onSubmitted: (text) {
          litems.add(text);
          eCtrl.clear();
          setState(() {});
        },
      ),
      new Expanded(
        child: new ListView.builder
          (
            itemCount: litems.length,
            itemBuilder: (BuildContext ctxt, int Index) {
              return new Text(litems[Index]);
            }
        )
    )
    ],
  )
  );
  }
  }

Answer 1

Вам просто нужно вернуть ListTile в вашем вместо Text в вашем itemBuilder. ListTile будет иметь CheckBox как leading (принимает виджет, который появится слева), Text как title и, наконец, IconButton как trailing(берет виджет, который появится справа). При клике появляется AlertDialog с TextField для редактирования текста, редактирующего текст (title).

List<String> listItems = [];
  List<bool> listCheck = [];
  final TextEditingController eCtrl = new TextEditingController();
  final TextEditingController _textFieldController =
      new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Dynamic Demo"),
      ),
      body: new Column(
        children: <Widget>[
          new TextField(
            controller: eCtrl,
            onSubmitted: (text) {
              setState(() {
                listItems.insert(0, text);
                listCheck.add(false);
                eCtrl.clear();
              });
            },
          ),
          new Expanded(
            child: new ListView.builder(
              itemCount: listItems.length,
              itemBuilder: (BuildContext context, int index) {
                return new ListTile(
                  leading: Checkbox(
                    value: listCheck[index],
                    onChanged: (value) {
                      setState(() {
                        listCheck[index] = !listCheck[index];
                      });
                    },
                  ),
                  title: Text(listItems[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.edit),
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (context) {
                          return AlertDialog(
                            title: Text('TextField in Dialog'),
                            content: TextField(
                              controller: _textFieldController,
                              decoration: InputDecoration(
                                  hintText: "${listItems[index]}"),
                            ),
                            actions: <Widget>[
                              new FlatButton(
                                child: new Text('Done'),
                                onPressed: () {
                                  setState(() {
                                    listItems[index] =
                                        _textFieldController.text;
                                    _textFieldController.clear();
                                  });
                                  Navigator.of(context).pop();
                                },
                              ),
                            ],
                          );
                        },
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );

Вам нужно только добавить функцию CheckBox.

Answer 2

Вы можете достичь этого с помощью DataTable виджета. Он прост в использовании и может иметь редактируемые строки. Добавить контрольный список к ним также легко. Вы можете сортировать их тоже. Обратитесь к этому руководству. Делайте, как говорится в учебнике, и у вас будет список с возможностью проверки и удаления. Но чтобы иметь возможность редактировать строки, вам нужно добавить эту строку кода в ваши DataCells в DataRow: showEditIcon: true,. Я думаю, что урок отличный с отличным объяснением. Но если вам нужна дополнительная помощь, я буду рад помочь.

CoderzHeaven