BoxFit.cover does not work with CachedNetworkImage plus PhotoView

Question

In this scenario I can not make to work the fit property with BoxFit.cover. There is always borders on screen. How can I do it?

Scaffold(
  appBar: AppBar(),
  body: CachedNetworkImage(
    height: double.infinity,
    width: double.infinity,
    fit: BoxFit.cover, // does not work
    imageUrl: _imageUrl,
    imageBuilder: (context, imageProvider) => PhotoView(
      imageProvider: imageProvider,
    ),
  ),
);

I think there are no oracles to know what is PhotoView – Nov 20 '20 at 19:34 — , Nov 20 '20 at 19:34
@someuser https://pub.dev/packages/photo_view – rozerro Nov 20 '20 at 19:35 — rozerro, Nov 20 '20 at 19:35

score 0 · Answer 1 · answered Nov 20 '20 at 20:09

0

       Container(
        child: CachedNetworkImage(
          imageUrl: _imageUrl,
          imageBuilder: (context, imageProvider)=>PhotoView(
            minScale: 1.0,
            imageProvider: imageProvider,
          ),
        ),
      ),

answered Nov 20 '20 at 20:09

CodeBreaker786

1

2

please add some instructions or just a few words so @rozerro can learn something here – Brett Schneider Nov 20 '20 at 20:21
@BrettSchneider anyway, this answer is wrong, because the answerer didn't check it out – rozerro Nov 20 '20 at 20:24
1

ok, that's not for me to decide. i'm just on review duty – Brett Schneider Nov 20 '20 at 20:25
I suppose that with PhotoView it's impossible or hard to ahive the classic behaviour of `cover` option, or there will always should be some intial zoom value. – rozerro Nov 20 '20 at 20:37

score 0 · Accepted Answer · answered Nov 20 '20 at 21:06

0

For the future searchers, there is an another solution which seems perfectly fits the desired behaviour. https://stackoverflow.com/a/58200356/5829191

answered Nov 20 '20 at 21:06

rozerro

5,787
9
46
94

score 0 · Answer 3 · answered Nov 14 '21 at 11:53

This work for me. Since I have a Container with the same borderRadius as the Catched Image. Without the BoxDecoration it failed med too!

    Container( decoration: BoxDecoration(borderRadius: 
BorderRadius.circular(10),),child:CachedNetworkImage(imageUrl: ("UrlToImage"),imageBuilder: (context, imageProvider) => Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),image: DecorationImage(image: imageProvider,
                                            fit: BoxFit.cover,
                                            )),),placeholder: (context, url) => CircularProgressIndicator(),errorWidget: (context, url, error) => Image.asset("PathToImage")
                                  ),

BoxFit.cover does not work with CachedNetworkImage plus PhotoView

3 Answers3