Skip to content

Add placeholder to DecorationImage when image is a network image. #187906

Closed

Description

@shang1219178163

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();
   }
 }

Activity

  1. suryaKommana2662 commented on Jun 12, 2026

    @suryaKommana2662
    Contributor

    Thanks for the feature request. This proposal concerns adding placeholder support to DecorationImage, which is part of the Flutter framework painting APIs. Routing to team-framework for further evaluation.

  2. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    a: imagesLoading, displaying, rendering images
    c: proposalA detailed proposal for a change to Flutter
    and removed
    in triagePresently being triaged by the triage team
    on Jun 12, 2026
  3. github-actions commented on Sep 16, 2026

    @github-actions

    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 -v and a minimal reproduction of the issue.

  4. locked as resolved and limited conversation to collaborators on Sep 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: imagesLoading, displaying, rendering imagesc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.team-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework teamwaiting for PR to land (fixed)A fix is in flight

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions