My CachedNetworkImage doesn't change when value changed - dart

Question

#override
Widget build(BuildContext context) {
var switchButton = new Switch(
value: detail,
onChanged: (bool value){
setState(() {
detail = value;
});
},
);
var imagejadwal = new CachedNetworkImage(
imageUrl: switchButton.value?"https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe":"https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD",
placeholder: new CircularProgressIndicator(),
errorWidget: new Icon(Icons.error),
);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Column(
children: <Widget>[
new Align(
alignment: Alignment.topRight,
child: switchButton,
),
imagejadwal,
],
)
);
}
It's because the CachedNetworkImage or my code is wrong ? Can someone
help me ? I'm still new at flutter Thank you.
Lib: https://github.com/renefloor/flutter_cached_network_image

Answer 1

I tried the code of aziza, but it also didn't work for me.
I changed a bit of code in the CachedNetworkImage and that seems to work, I changed the 'didUpdateWidget':
#override
void didUpdateWidget(CachedNetworkImage oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.imageUrl != oldWidget.imageUrl ||
widget.placeholder != widget.placeholder){
_imageProvider = new CachedNetworkImageProvider(widget.imageUrl,
errorListener: _imageLoadingFailed);
_resolveImage();
}
}
It needs to change its ImageProvider. I made an issue for that on github
You could also use a Stack. In that way you have more control over the animation from one image to the other. For example
class _CachedImageExampleState extends State<CachedImageExample> {
bool switchState = true;
#override
Widget build(BuildContext context) {
var switchButton = new Switch(
value: switchState,
onChanged: (bool value) {
setState(() {
switchState = value;
});
},
);
var imagejadwal1 = new CachedNetworkImage(
imageUrl: "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe",
placeholder: new CircularProgressIndicator(),
errorWidget: new Icon(Icons.error),
);
var imagejadwal2 = new CachedNetworkImage(
imageUrl: "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD",
placeholder: new CircularProgressIndicator(),
errorWidget: new Icon(Icons.error),
);
return new Scaffold(
appBar: new AppBar(
title: new Text("TestImage"),
),
body: new Column(
children: <Widget>[
new Align(
alignment: Alignment.topRight,
child: switchButton,
),
new Container (
//width: 500.0,
///container to deal with the overflow, you may not want to use it with hardcoded
///height because it will not allow the view to be responsive, but it is just to
///make a point about dealing with the overflow
height: 400.0,
child: new Stack(children: <Widget>[
new Opacity(opacity: switchState ? 1.0 : 0.0, child: imagejadwal1),
new Opacity(opacity: switchState ? 0.0 : 1.0, child: imagejadwal2,)
],)),
],
)
);
}
}
I noticed that the animation of the switch is not shown when the second image (the blue one) is being shown. It is a very large image (2550x3300), consider making that one smaller to improve the performance of the app.

Answer 2

Your code is working fine, however you have got two issue to deal with:
The images are overflowing and may be preventing the UI from updating.
The images are too big, and you need to wait a little bit for them to load.
I have modified a little bit of your code:
class _CachedImageExampleState extends State<CachedImageExample> {
bool switchState = true;
#override
Widget build(BuildContext context) {
var switchButton = new Switch(
value: switchState,
onChanged: (bool value) {
setState(() {
switchState = value;
});
},
);
var imagejadwal = new CachedNetworkImage(
imageUrl: switchState
? "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe"
: "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD",
placeholder: new CircularProgressIndicator(),
errorWidget: new Icon(Icons.error),
);
return new Scaffold(
appBar: new AppBar(
title: new Text("TestImage"),
),
body: new Column(
children: <Widget>[
new Align(
alignment: Alignment.topRight,
child: switchButton,
),
new Container (
//width: 500.0,
///container to deal with the overflow, you may not want to use it with hardcoded
///height because it will not allow the view to be responsive, but it is just to
///make a point about dealing with the overflow
height: 400.0,
child: imagejadwal),
],
)
);
}
}
I managed to fix your issue, there are two implementations for this plugin and the following one should fix it for you. I am not sure the reason behind state not updating (probably imageUrl can not be overriden)
Anyway, here is your fix:
class CachedImageExample extends StatefulWidget {
#override
_CachedImageExampleState createState() => new _CachedImageExampleState();
}
class _CachedImageExampleState extends State<CachedImageExample> {
bool toggle = true;
#override
Widget build(BuildContext context) {
var switchButton = new Switch(
value: toggle,
onChanged: (bool value) {
setState(() {
toggle = value;
});
},
);
var img= new Image(image: new CachedNetworkImageProvider(
toggle
? "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe"
: "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD"));
return new Scaffold(
appBar: new AppBar(
title: new Text("TestImage"),
),
body: new Column(
children: <Widget>[
new Align(
alignment: Alignment.topRight,
child: switchButton,
),
new Container (
width: 200.0,
height: 200.0,
child: img),
],
)
);
}
}
Update : Fit the image to the whole screen
class CachedImageExample extends StatefulWidget {
#override
_CachedImageExampleState createState() => new _CachedImageExampleState();
}
class _CachedImageExampleState extends State<CachedImageExample> {
bool toggle = true;
#override
Widget build(BuildContext context) {
var switchButton = new Switch(
activeColor: Colors.amber,
activeTrackColor: Colors.amberAccent,
inactiveThumbColor: Colors.amber,
value: toggle,
onChanged: (bool value) {
setState(() {
toggle = value;
});
},
);
return new Scaffold(
appBar: new AppBar(
actions: <Widget>[
switchButton
],
title: new Text("TestImage"),
),
body:
new Container (
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image:
new CachedNetworkImageProvider(
toggle
? "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe"
: "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD"
)
),
),
),
);
}
}