How to show placeholder image untill the image is uploaded.

[SahajRana]

Hi Zefyr team,

I'm wondering how can we add a placeholder widget until the image is uploaded in the editor.

@override
  Future<String> pickImage(ImageSource source) async {
    String initialDirectory;
    if (Platform.isMacOS || Platform.isWindows) {
      initialDirectory =
          (await getApplicationDocumentsDirectory()).path;
    }
    final result = await showOpenPanel(
        allowsMultipleSelection: false,
        allowedFileTypes: [FileTypeFilterGroup(label:"Image",fileExtensions: ["png","jpg","jpeg","gif","svg"])],
        initialDirectory: initialDirectory);
    if(result.paths==null||result.paths.length==0){
      return null;
    }
    File file=File(result.paths.first);
    String URL = await awsS3Backend.uploadTOS3(file);
    return URL;
  }

  @override
  Widget buildImage(BuildContext context, String key) {
    return ImageWidget(filePath: key);
  }

[HLGB26]

Use cachedNetworkImage it has a property of placeholder

[shujaatak]

@HLGB26 Thanks for the hint, can you please share the specific changes required to use CachedNetworkImage?

[harshlohia]

return this in your build method @shujaatak
Container( width: MediaQuery.of(context).copyWith().size.width, height:double.maxFinite, child: CachedNetworkImage( imageUrl: key, placeholder: (context,url)=>circularProgress(), errorWidget:(context, url, error) => new Icon(Icons.error) , fit: BoxFit.cover, ), );

[shujaatak]

@harshlohia @HLGB26 I used octo_image which has all goodies of cachednetworkimage but not cache. As my app is highly dynamic i.e images are also expected to change now and then so I used octo_image instead of cachednetworkimage.