Когда я вставляю новые элементы в список внутри метода setState, они не отражают изменения на экране во флаттере?

Question

Я хочу реализовать этот макет во флаттере

Я сделал следующие шаги

• Я создаю виджет statefull.
• Добавлен виджет gridview.count для отображения выбранных изображений на экране.
• Добавлен виджет, содержащий кнопку добавления в список, который будет возвращен gridviewчтобы убедиться, что это будет последний элемент в списке изображений.
• когда я нажал на кнопку добавления, я выбрал изображение из галереи и вставил его в начало списка внутри метрики setState, чтобы перерисоватьвиджет при изменении списка.
• изображения успешно добавлены в список, но вновь добавленные изображения не отображаются на экране.

код

     class _AddScreenState extends State<AddScreen>{
        List<Widget> _images = [];


      void _getImage(BuildContext context, ImageSource source) {
          ImagePicker.pickImage(source: source, maxWidth: 
        400.0).then((File image) {
          print(image);
            setState(() {
              _images.insert(
                0,
                Container(
                    height: 80,
                    width: 80,
                    decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    image: DecorationImage(
                      image: FileImage(
                      image,
                      ),
                      fit: BoxFit.fill,
                    ),
                  ),
                ));
            });
          Navigator.pop(context);
        });
      }


        @override
        Widget build(BuildContext context) {
              return GridView.count(
                      padding: EdgeInsets.all(5),
                      mainAxisSpacing: 5,
                      crossAxisSpacing: 5,
                      shrinkWrap: true,
                      crossAxisCount: 3,
                      children: _images
                        ..add(
                          InkWell(
                            onTap: () {
                              _getImage(context,ImageSource.camera);
                            },
                            child: Container(
                              height: 80,
                              width: 80,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image:

                  AssetImage('assets/images/ic_add_pic.png'),
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    }
                   }

ожидаемый результат

когда пользователь нажимает кнопку добавления, выбранные изображения должны добавляться в начало, а кнопка добавления должна перемещаться в конец каждый раз, когда я добавляюновое изображение.

Answer 1

Когда я пробую этот код, он работает правильно

void _getImage(BuildContext context, ImageSource source) {
ImagePicker.pickImage(source: source, maxWidth: 400.0).then((File image) {

  setState(() {
    _images = [Container(
        height: 80,
        width: 80,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          image: DecorationImage(
            image: FileImage(
              image,
            ),
            fit: BoxFit.fill,
          ),
        ),
      )];
  });

      Navigator.pop(context);
   });
}

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

Answer 2

Попробуйте удалить setState((){}); так рано из метода.Просто выберите изображение, вставьте его в список и измените состояние просмотра.

void _getImage(BuildContext context, ImageSource source) {
      ImagePicker.pickImage(source: source, maxWidth: 
    400.0).then((File image) {
          _images.insert(
            0,
            Container(
                height: 80,
                width: 80,
                decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                image: DecorationImage(
                  image: FileImage(
                  image,
                  ),
                  fit: BoxFit.fill,
                ),
              ),
            ));
      setState((){});
    });
  }