0

Tengo un page con una lista de ubicaciones web de imágenes, las cuales son declaradas en el initstate. Luego, tengo un carousel que muestra las imágenes de acuerdo a la configuración y de acuerdo al contenido de la lista antes mencionada. Además, tengo un botón a través del cual el usuario puede agregar una imagen, la cual se guardará en el servidor (upload) y tendrá un nombre que ya se encuentra en la lista creada en el initstate. Mi problema es que no encuentro forma de lograr el refresco del carousel de modo que muestre de manera inmediata la imagen recientemente agregada Desde ya agradezco a quien pueda colaborar!

Este el el código:

 @override
  initState() {
    final _num = widget.id;
    imgList = [
      'https://xxxxxxxxxxxxxxxxxxx/${_num}/1.jpg',
      'https://xxxxxxxxxxxxxxxxxxx/${_num}/2.jpg',
      'https://xxxxxxxxxxxxxxxxxxx/${_num}/3.jpg'

    ];
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orangeAccent,
        title: Text("Imágenes Trabajo: N°: ${widget.id}"),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            carouselSlider = CarouselSlider(
              height: 400.0,
              initialPage: 0,
              enlargeCenterPage: true,
              autoPlay: true,
              reverse: false,
              enableInfiniteScroll: true,
              autoPlayInterval: Duration(seconds: 2),
              autoPlayAnimationDuration: Duration(milliseconds: 2000),
              pauseAutoPlayOnTouch: Duration(seconds: 10),
              scrollDirection: Axis.horizontal,
              onPageChanged: (index) {
                setState(() {
                  _current = index;
                });
              },
              items: imgList.map((imgUrl) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 10.0),
                      decoration: BoxDecoration(
                        color: Colors.green,
                      ),
                      child: Image.network(
                        imgUrl,
                        fit: BoxFit.fill,
                      ),
                    );
                  },
                );
              }).toList(),
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: map<Widget>(imgList, (index, url) {
                return Container(
                  width: 10.0,
                  height: 10.0,
                  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _current == index ? Colors.redAccent : Colors.green,
                  ),
                );
              }),
            ),
            SizedBox(
              height: 20.0,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                OutlineButton(
                  onPressed: goToPrevious,
                  child: Text("<"),
                ),
                OutlineButton(
                  onPressed: goToNext,
                  child: Text(">"),
                ),
              ],
            ),


            SizedBox(
              height: 20,
            ),
            FlatButton.icon(
                shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ),
                color: Colors.orangeAccent,
                icon: Icon(Icons.photo, color: Colors.white),
                label:
                Text(
                  'Agregar', style: TextStyle(color: Colors.white, fontSize: 14.0),),
                //onPressed: () {_gotoPerfil(snapshot.data[index]);}
                onPressed: () async {
                  switch(await takePhoto(context)){
                    case "take":
                      getImage(0);
                      //pickImageFromGallery(ImageSource.camera);
                      break;
                    case "pick":
                      getImage(1);
                      //pickImageFromGallery(ImageSource.gallery);
                      break;
                  }
                },
            ),
          ],
        ),
      ),
    );
  }

Agrego código de método getImage:

Future getImage(int _origen) async {
    var image;
    if (_origen == 0) {
      image = await ImagePicker.pickImage(source: ImageSource.camera, maxHeight: 480, maxWidth: 640); }
    if (_origen == 1) {
      image = await ImagePicker.pickImage(source: ImageSource.gallery, maxHeight: 480, maxWidth: 640);
    }
    setState(() {
      _image = image;
      _upload();
    });
  }

La variable _image es de tipo File y es utilizada en el método Upload, para subirla al server mediante llamada http:

void _upload () async{
    if (_image == null) return;

    String base64Image = base64Encode(_image.readAsBytesSync());
    http.post("http://xxxxxxxxxxxxxxxxxxxxx.php", body: {
      "image": base64Image,

      "id": widget.id,
    }).then((res) {
      print(res.statusCode);
    }).catchError((err) {
      print("el error de foto es:$err");
    });
  }
13
  • sería ideal que agregues el contenido del método getImage , ya que es ahí donde agregas la nueva imagen y deberías refrescar el widget Commented el 2 dic. 2019 a las 14:28
  • Diego, gracias!, ya adjunté el método getImage Commented el 2 dic. 2019 a las 18:44
  • Tampoco vemos tu variable _image , para que la asignas? Y el método upload que hace? Retorna algo? Commented el 2 dic. 2019 a las 18:49
  • variable _image es de tipo File y es utilizada en el método Upload, que no retorna nada sino sube la el archivo _image reducido al server. Commented el 2 dic. 2019 a las 19:04
  • pero tu carousel recibe la URL de las imagenes, necesitas obtener la URL de respuesta luego de hacer el upload, puedes hacer eso? Commented el 2 dic. 2019 a las 19:08

1 respuesta 1

0

Ok, el tema es que no refrescas el widget luego de que la imagen ha sido subida.

Agrega await keyword para esperar hasta que la imagen es subida , luego de eso ya puedes refrescar el widget.

void _upload () async{
    if (_image == null) return;

    String base64Image = base64Encode(_image.readAsBytesSync());
    await final res = http.post("http://xxxxxxxxxxxxxxxxxxxxx.php", body: {
      "image": base64Image,

      "id": widget.id,
    });
   print(res.statusCode);
   //opcional puedes agregar un try catch para manejar errores.
  }

Y el getImage quedaría así ;

Future getImage(int _origen) async {
    var image;
    if (_origen == 0) {
      image = await ImagePicker.pickImage(source: ImageSource.camera, maxHeight: 480, maxWidth: 640); }
    if (_origen == 1) {
      image = await ImagePicker.pickImage(source: ImageSource.gallery, maxHeight: 480, maxWidth: 640);
    }
    await _upload();
    setState(() { 
      _image = image;

    });
  }
6
  • Disculpa Diego, en qué momento y cómo refresco el widget..? Commented el 3 dic. 2019 a las 2:50
  • El setState deberia hacer un rebuild y refrescar el widget, pero debes esperar que termine el upload, por eso le puse await Commented el 3 dic. 2019 a las 2:51
  • Hola!, intenté haciendo una llamada nuevamente al método llamado _carrusel que tiene el widget completo, pero no lo refresca. Por cierto, nunca he usado el rebuild, me enseñas por favor? Commented el 4 dic. 2019 a las 2:59
  • al ejecutar setState dentro del State de un statefulwidget, este hace un rebuild automatico Commented el 4 dic. 2019 a las 3:01
  • No hay caso, aún si hago un back y vuelvo a entrar al widget tampoco muestra las imágenes que se subieron... Commented el 4 dic. 2019 a las 4:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.