Repository navigation
Closed
Labels
P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter projecta: imagesLoading, displaying, rendering imagesLoading, displaying, rendering imagesc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.team-frameworkOwned by Framework teamOwned by Framework teamtriaged-frameworkTriaged by Framework teamTriaged by Framework teamwaiting for PR to land (fixed)A fix is in flightA fix is in flight
Description
Use case
When I load online images with DecorationImage and the page is blank before the image loads successfully, I wish I could add a placeholder image. Enhance user experience.
like this:
Container(
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
image: DecorationImage(
image: CachedNetworkImageProvider(
‘https://seopic.699pic.com/photo/50053/2696.jpg_wh1200.jpg',
),
placeholder: AssetImage(Assets.assetsImagesFlutter),// This !!!
fit: BoxFit.fill,
),
),
),Proposal
Core code:When the image is null, render the placeholder
@override
void paint(
Canvas canvas,
Rect rect,
Path? clipPath,
ImageConfiguration configuration, {
double blend = 1.0,
BlendMode blendMode = BlendMode.srcOver,
}) {
...
if (_image != null) {
_placeholderStream?.removeListener(_placeholderListener);
_placeholderStream = null;
_placeholderImage?.dispose();
_placeholderImage = null;
} else if (_details.placeholder != null) {
final ImageStream placeholderStream = _details.placeholder!.resolve(configuration);
if (placeholderStream.key != _placeholderStream?.key) {
_placeholderStream?.removeListener(_placeholderListener);
_placeholderStream = placeholderStream;
_placeholderStream?.addListener(_placeholderListener);
}
}
final ImageStream newImageStream = _details.image.resolve(configuration);
if (newImageStream.key != _imageStream?.key) {
_imageStream?.removeListener(_imageListener);
_imageStream = newImageStream;
_imageStream!.addListener(_imageListener);
}
ImageInfo? imageInfo = _image ?? _placeholderImage;
if (imageInfo == null) {
return;
}
if (clipPath != null) {
canvas.save();
canvas.clipPath(clipPath);
}
paintImage(
canvas: canvas,
rect: rect,
image: imageInfo.image,
debugImageLabel: imageInfo.debugLabel,
...
}
void _handlePlaceholder(ImageInfo value, bool synchronousCall) {
if (_image != null) {
value.dispose();
return;
}
if (_placeholderImage == value) {
return;
}
_placeholderImage?.dispose();
_placeholderImage = value;
if (!synchronousCall) {
_onChanged();
}
}Metadata
Metadata
Assignees
Labels
P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter projecta: imagesLoading, displaying, rendering imagesLoading, displaying, rendering imagesc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.team-frameworkOwned by Framework teamOwned by Framework teamtriaged-frameworkTriaged by Framework teamTriaged by Framework teamwaiting for PR to land (fixed)A fix is in flightA fix is in flight
Activity
suryaKommana2662 commentedon Jun 12, 2026
Thanks for the feature request. This proposal concerns adding placeholder support to
DecorationImage, which is part of the Flutter framework painting APIs. Routing toteam-frameworkfor further evaluation.feat: Add placeholder to DecorationImage (flutter#191528)
github-actions commentedon Sep 16, 2026
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.