Как я могу обновить список во flutter после добавления нового элемента в список?

#flutter #dart

#flutter #dart

Вопрос:

Ладно, ребята, мне нужно ваше руководство, я только начал изучать flutter (я разработчик Java):

Представьте, что у нас есть простой список виджетов ListTile:

Список TestList = [

 ListTile(
leading: CircleAvatar(
  backgroundImage: NetworkImage(url
  ),
),
title: Text('Title text'),
subtitle: Text('Subtitle text'),
trailing: smth here also,
  

),
];

Представьте, что в этом массиве 1-2-3-n элементов.

Теперь мы хотим отобразить этот список в listview, кажется, довольно просто:

 children: <ListTile>[
      for(ListTile e in testList)
          e
    ],
  

Теперь у нас есть все элементы.
Хорошо, теперь я хочу добавить новую плитку списка, и вот тут я застрял:

Давайте добавим диалоговое окно, которое я собираюсь вызывать при каждом нажатии кнопки:

 TextEditingController txtController = TextEditingController();



Future<String> createTxtDialog(BuildContext context) {
return showDialog(context: context, builder: (context) {
  return SimpleDialog(
    title: Text("Input text"),
    children: [
      TextField(
        controller: txtController,
      ),
      MaterialButton(
        elevation: 5.0,
        child: Text('Submit'),
        onPressed: () {
        Navigator.of(context).pop(txtController.text.toString());
        },
      )
    ],
  );
});
  

}

Хорошо, теперь давайте вызовем эту функцию с помощью нашей кнопки: // Здесь я хочу добавить новый элемент в мой существующий список и мгновенно получить обновленный список: // Я создам новую плитку списка только с одной строкой — это будет текст, полученный от нашего текстового контроллера:

         floatingActionButton: FloatingActionButton(
    onPressed: () {
      createTxtDialog(context);
      setState(() {
        testList.add(
          ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(url
              ),
            ),
            title: Text(txtController.text),
          ),
        );
      });
    },),
  

Итак, проблема в том:

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

Как это можно решить? Заранее благодарю вас! 🙂

P.S. Список обновлен, но без текста из диалогового окна

Комментарии:

1. Вы используете виджет с сохранением состояния или без сохранения состояния?

2. Я использую виджет с отслеживанием состояния

Ответ №1:

Вы можете использовать initState и определить в нем свой тестовый список по умолчанию.

  initState({
  // testList definition
});
  

После добавления элемента в список вы можете вызвать setState.

Комментарии:

1. Куда я должен добавить initState? И давайте представим, что этот список будет отличаться от пользователя к пользователю (я изменю список в базе данных), как это поможет?

2. Выше виджета, и это должно быть в классе.