CircularProgressIndicator widget doesn't disappear when image loads - dart

Question

I'm using this dart package here
There's an example in the flutterio cookbook. My problem is, when the image loads the CircularProgressIndicator doesn't disappear. Here is the item for a ListView.
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'models/post.dart';
class PostItem extends StatelessWidget {
const PostItem(this.post);
final Post post;
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
children: <Widget>[
const Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: post.imageUrl,
),
),
),
],
),
const SizedBox(height: 8.0),
Text(
post.username,
style: Theme.of(context).textTheme.headline,
),
const SizedBox(height: 8.0),
Text(
post.text,
style: Theme.of(context).textTheme.body1,
),
]);
}
}
A gif of the problem:
My understanding is, that once the image loads the CircularProgressIndicator should disappear?

Answer 1

You may try with cached_network_image plugin
new CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: new CircularProgressIndicator(),
errorWidget: new Icon(Icons.error),
),

Answer 2

That happens because you're stacking a CircularProgressIndicator widget with a ClipRect.
When its first build, you don't have an url and that's the reason why the image isn't showing up. However, as soon as it has content and you rebuild your parent tree (where your PostItem widget is inserted) it will refresh with the image but the progress bar won't be gone because doesn't have any condition to prevent its render.
To solve it, the easy way, just add a condition, if you have an url, then you show a CircularProgressBar otherwise, a ClipRect with your content.
(...)
Stack(
children: <Widget>[
post?.url != null
? const Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
))
: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: post.imageUrl,
),
),
),
],
),
(...)
If you don't plan to stack items, you can actually remove the Stack widget and place it directly within your column. Below is the complete example (without the Stack).
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'models/post.dart';
class PostItem extends StatelessWidget {
const PostItem(this.post);
final Post post;
#override
Widget build(BuildContext context) {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
post?.url != null
? const Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
))
: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: post.imageUrl,
),
),
),
const SizedBox(height: 8.0),
Text(
post.username,
style: Theme.of(context).textTheme.headline,
),
const SizedBox(height: 8.0),
Text(
post.text,
style: Theme.of(context).textTheme.body1,
),
]);
}
}