Flutter CachedNetworkImageProvider does not have a loading spinner












0















Please let me know how to enable loading spinner for flutter CachedNetworkImageProvider. This works fine with CachedNetworkImage. But the problem is CachedNetworkImage is not a valid image provider.



Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
),
),
)









share|improve this question





























    0















    Please let me know how to enable loading spinner for flutter CachedNetworkImageProvider. This works fine with CachedNetworkImage. But the problem is CachedNetworkImage is not a valid image provider.



    Container(
    width: 80.0,
    height: 80.0,
    decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
    image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
    ),
    ),
    )









    share|improve this question



























      0












      0








      0








      Please let me know how to enable loading spinner for flutter CachedNetworkImageProvider. This works fine with CachedNetworkImage. But the problem is CachedNetworkImage is not a valid image provider.



      Container(
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
      image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
      ),
      ),
      )









      share|improve this question
















      Please let me know how to enable loading spinner for flutter CachedNetworkImageProvider. This works fine with CachedNetworkImage. But the problem is CachedNetworkImage is not a valid image provider.



      Container(
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
      image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
      ),
      ),
      )






      image caching networking dart flutter






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 26 '18 at 7:13









      Milind Mevada

      1,550817




      1,550817










      asked Nov 25 '18 at 17:54









      BuddhikaBuddhika

      337




      337
























          2 Answers
          2






          active

          oldest

          votes


















          0














          I have achieved this to some extent by using AdvancedNetworkImage
          The issue now I am facing is rounding of top left and right corners does not work in the below code.



          enter image description here



          new Column(
          children: [

          Container (
          height: 250.0,
          width : double.infinity,
          margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

          child: TransitionToImage(

          AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
          // placeholder: CircularProgressIndicator(),
          duration: Duration(milliseconds: 300),
          fit: BoxFit.cover,
          loadingWidget: const CircularProgressIndicator(),
          placeholder: const Icon(Icons.refresh),
          enableRefresh: true,
          ),
          decoration: BoxDecoration(

          borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
          ),
          ),


          Container(
          width: double.infinity,
          margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
          padding: const EdgeInsets.all(10.0),
          decoration: new BoxDecoration(
          color: Colors.black,
          borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
          boxShadow: <BoxShadow>[
          BoxShadow(
          color: Colors.black,
          offset: Offset(0.0, -12.0),
          blurRadius: 20.0,
          ),
          ],
          ),

          // alignment: TextAlign.left,
          child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
          ),

          ],
          )


          If anyone know the issue with rounding corners, please comment.






          share|improve this answer































            -1














            As I understand your question you want to show loading spinner before showing image.



            This is going to surely help you



            new CachedNetworkImage(
            imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
            placeholder: new CircularProgressIndicator(),
            errorWidget: new Icon(Icons.error),
            )


            If I understood your question wrong please make question little bit more clear






            share|improve this answer
























            • Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

              – Buddhika
              Nov 26 '18 at 2:31













            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470270%2fflutter-cachednetworkimageprovider-does-not-have-a-loading-spinner%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            I have achieved this to some extent by using AdvancedNetworkImage
            The issue now I am facing is rounding of top left and right corners does not work in the below code.



            enter image description here



            new Column(
            children: [

            Container (
            height: 250.0,
            width : double.infinity,
            margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

            child: TransitionToImage(

            AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
            // placeholder: CircularProgressIndicator(),
            duration: Duration(milliseconds: 300),
            fit: BoxFit.cover,
            loadingWidget: const CircularProgressIndicator(),
            placeholder: const Icon(Icons.refresh),
            enableRefresh: true,
            ),
            decoration: BoxDecoration(

            borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
            ),
            ),


            Container(
            width: double.infinity,
            margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
            padding: const EdgeInsets.all(10.0),
            decoration: new BoxDecoration(
            color: Colors.black,
            borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
            boxShadow: <BoxShadow>[
            BoxShadow(
            color: Colors.black,
            offset: Offset(0.0, -12.0),
            blurRadius: 20.0,
            ),
            ],
            ),

            // alignment: TextAlign.left,
            child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
            ),

            ],
            )


            If anyone know the issue with rounding corners, please comment.






            share|improve this answer




























              0














              I have achieved this to some extent by using AdvancedNetworkImage
              The issue now I am facing is rounding of top left and right corners does not work in the below code.



              enter image description here



              new Column(
              children: [

              Container (
              height: 250.0,
              width : double.infinity,
              margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

              child: TransitionToImage(

              AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
              // placeholder: CircularProgressIndicator(),
              duration: Duration(milliseconds: 300),
              fit: BoxFit.cover,
              loadingWidget: const CircularProgressIndicator(),
              placeholder: const Icon(Icons.refresh),
              enableRefresh: true,
              ),
              decoration: BoxDecoration(

              borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
              ),
              ),


              Container(
              width: double.infinity,
              margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
              padding: const EdgeInsets.all(10.0),
              decoration: new BoxDecoration(
              color: Colors.black,
              borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
              boxShadow: <BoxShadow>[
              BoxShadow(
              color: Colors.black,
              offset: Offset(0.0, -12.0),
              blurRadius: 20.0,
              ),
              ],
              ),

              // alignment: TextAlign.left,
              child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
              ),

              ],
              )


              If anyone know the issue with rounding corners, please comment.






              share|improve this answer


























                0












                0








                0







                I have achieved this to some extent by using AdvancedNetworkImage
                The issue now I am facing is rounding of top left and right corners does not work in the below code.



                enter image description here



                new Column(
                children: [

                Container (
                height: 250.0,
                width : double.infinity,
                margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

                child: TransitionToImage(

                AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
                // placeholder: CircularProgressIndicator(),
                duration: Duration(milliseconds: 300),
                fit: BoxFit.cover,
                loadingWidget: const CircularProgressIndicator(),
                placeholder: const Icon(Icons.refresh),
                enableRefresh: true,
                ),
                decoration: BoxDecoration(

                borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
                ),
                ),


                Container(
                width: double.infinity,
                margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
                padding: const EdgeInsets.all(10.0),
                decoration: new BoxDecoration(
                color: Colors.black,
                borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
                boxShadow: <BoxShadow>[
                BoxShadow(
                color: Colors.black,
                offset: Offset(0.0, -12.0),
                blurRadius: 20.0,
                ),
                ],
                ),

                // alignment: TextAlign.left,
                child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
                ),

                ],
                )


                If anyone know the issue with rounding corners, please comment.






                share|improve this answer













                I have achieved this to some extent by using AdvancedNetworkImage
                The issue now I am facing is rounding of top left and right corners does not work in the below code.



                enter image description here



                new Column(
                children: [

                Container (
                height: 250.0,
                width : double.infinity,
                margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

                child: TransitionToImage(

                AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
                // placeholder: CircularProgressIndicator(),
                duration: Duration(milliseconds: 300),
                fit: BoxFit.cover,
                loadingWidget: const CircularProgressIndicator(),
                placeholder: const Icon(Icons.refresh),
                enableRefresh: true,
                ),
                decoration: BoxDecoration(

                borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
                ),
                ),


                Container(
                width: double.infinity,
                margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
                padding: const EdgeInsets.all(10.0),
                decoration: new BoxDecoration(
                color: Colors.black,
                borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
                boxShadow: <BoxShadow>[
                BoxShadow(
                color: Colors.black,
                offset: Offset(0.0, -12.0),
                blurRadius: 20.0,
                ),
                ],
                ),

                // alignment: TextAlign.left,
                child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
                ),

                ],
                )


                If anyone know the issue with rounding corners, please comment.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 2 '18 at 20:33









                BuddhikaBuddhika

                337




                337

























                    -1














                    As I understand your question you want to show loading spinner before showing image.



                    This is going to surely help you



                    new CachedNetworkImage(
                    imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
                    placeholder: new CircularProgressIndicator(),
                    errorWidget: new Icon(Icons.error),
                    )


                    If I understood your question wrong please make question little bit more clear






                    share|improve this answer
























                    • Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

                      – Buddhika
                      Nov 26 '18 at 2:31


















                    -1














                    As I understand your question you want to show loading spinner before showing image.



                    This is going to surely help you



                    new CachedNetworkImage(
                    imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
                    placeholder: new CircularProgressIndicator(),
                    errorWidget: new Icon(Icons.error),
                    )


                    If I understood your question wrong please make question little bit more clear






                    share|improve this answer
























                    • Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

                      – Buddhika
                      Nov 26 '18 at 2:31
















                    -1












                    -1








                    -1







                    As I understand your question you want to show loading spinner before showing image.



                    This is going to surely help you



                    new CachedNetworkImage(
                    imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
                    placeholder: new CircularProgressIndicator(),
                    errorWidget: new Icon(Icons.error),
                    )


                    If I understood your question wrong please make question little bit more clear






                    share|improve this answer













                    As I understand your question you want to show loading spinner before showing image.



                    This is going to surely help you



                    new CachedNetworkImage(
                    imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
                    placeholder: new CircularProgressIndicator(),
                    errorWidget: new Icon(Icons.error),
                    )


                    If I understood your question wrong please make question little bit more clear







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 25 '18 at 18:34









                    nitishk72nitishk72

                    546216




                    546216













                    • Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

                      – Buddhika
                      Nov 26 '18 at 2:31





















                    • Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

                      – Buddhika
                      Nov 26 '18 at 2:31



















                    Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

                    – Buddhika
                    Nov 26 '18 at 2:31







                    Thanks for your answer, but the problem is I'm getting below error when I try to use the CachedNetworkImage for an box decoration. "The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'"

                    – Buddhika
                    Nov 26 '18 at 2:31




















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470270%2fflutter-cachednetworkimageprovider-does-not-have-a-loading-spinner%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    404 Error Contact Form 7 ajax form submitting

                    How to know if a Active Directory user can login interactively

                    TypeError: fit_transform() missing 1 required positional argument: 'X'