CODEWITHSUNDEEP
flutterflutter-layout
ArtS
ArtS

Reputation: 2012

If a widget is in a FittedBox, how to set its size to ignore the FittedBox's settings?

I have a FittedBox with its setting to fit: BoxFit.contain. It has a child of a CachedNetworkImage that shows a CircularProgressIndicator when the loading is not finished. However the CircularProgressIndicator is too big, always streching to the whole screen size, as how the FittedBox do its work. I want to make it smaller say 40 * 40, but I tried wrapping it with all kinds of widgets (Center、SizedBox, etc.) and failed. So how to set its size to ignore the FittedBox settings?

Upvotes: 0

Views: 1893

Answers (2)

Artur Jakucewicz
Artur Jakucewicz

Reputation: 11

The full solution to that problem is:

  1. Don't use FittedBox outside CachedNetworkImage
  2. Use the fit property of CachedNetworkImage with value BoxFit.cover

Example, how to show the CircularProgressIndicator inside a stretched full screen image:

 
CachedNetworkImage(
                    fit: BoxFit.cover, // set fit here
                    imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg/800px-Tour_Eiffel_Wikimedia_Commons.jpg', 
                    
                    errorWidget: (context, url, error) =>
                        const Icon(Icons.error),
                    progressIndicatorBuilder:
                        (context, url, downloadProgress) => Center(
                      child: Stack(children: [
//inside Stack 2 widgets: 1 - CircularProgressIndicator(), 2 - Text(). You can use both or leave one and delete Stack()
                        Center(
//for size control wrap the widget  CircularProgressIndicator in SizedBox
                          child: SizedBox(
                            height: 100,
                            width: 100,
// You can use LinearProgressIndicator or CircularProgressIndicator instead

                            child: CircularProgressIndicator(
                              value: downloadProgress.progress,
                              color: Colors.red,
                              backgroundColor: Colors.white,
                              strokeWidth: 5,
                            ),
                          ),
                        ),
                        Center(
                          child: Text(
                            '${downloadProgress.progress != null ? (((downloadProgress.downloaded.toDouble()) / (downloadProgress.totalSize!.toDouble())) * 100).round() : '...'}%',
                            style: TextStyle(
                                fontSize: 24,
                                color: Colors.black),
                          ),
                        ),
                      ]),
                    ),
                  ),

Upvotes: 0

NoobScorpio
NoobScorpio

Reputation: 23

Try this it might help:

CachedNetworkImage(
                  imageUrl: url,
                  imageBuilder: (context, imageProvider) => Container(
                    height: 200,
                    width: 200,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: imageProvider,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                  placeholder: (context, url) => Container(
                      height: 200,
                      width: 200,
                      child: Center(
                          child: CircularProgressIndicator(
                        backgroundColor: Colors.white30,
                      ))),
                  errorWidget: (context, url, error) => Container(
                      height: 200,
                      width: 200,
                      child: Center(
                          child: Icon(
                        Icons.error,
                        color: Colors.white30,
                      ))),
                ),

Upvotes: 1

Related Questions