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");
});
}
getImage
, ya que es ahí donde agregas la nueva imagen y deberías refrescar el widget