title: Flutter default image not loading
body: <p>New to flutter. Working on a personal project. Stuck with a small issue related to show images. Here is my widget code which I'm using for showing images.</p>
  
  <pre><code>import 'dart:async';
  import 'dart:convert';
  import 'package:flutter/material.dart';
  import 'package:shared_preferences/shared_preferences.dart';
  import 'package:cached_network_image/cached_network_image.dart';
  
  class UserProfile extends StatefulWidget {
    @override
    UserProfileState createState() =&gt; new UserProfileState();
  }
  
  class UserProfileState extends State&lt;UserProfile&gt; {
  
    Future&lt;SharedPreferences&gt; _prefs = SharedPreferences.getInstance();
    Map userDetails = {};
    String profileImgPath;
  
    @override
    void initState() {
      super.initState();
      getUserDetails();
    }
  
  
    Future&lt;Null&gt; getUserDetails() async {
      try {
        final SharedPreferences prefs = await _prefs;
        this.userDetails = json.decode(prefs.getString('user'));
  
        if (prefs.getString('user') != null) {
          if (this.userDetails['isLoggedIn']) {
            setState(() {
              this.profileImgPath = this.userDetails['profileImg'];
              print('Shared preference userDetailsss : ${this.userDetails}');
            });
          }
        } else {
          print('Shared preference has no data');
        }
      } catch (e) {
        print('Exception caught at getUserDetails method');
        print(e.toString());
      }
    }
  
    @override
    Widget build(BuildContext context) {
      Widget profileImage = new Container(
        margin: const EdgeInsets.only(top: 20.0),
        child: new Row(
          children: &lt;Widget&gt;[
          new Expanded(
            child: new Column(
              children: &lt;Widget&gt;[
                new CircleAvatar(
                  backgroundImage: (this.profileImgPath == null) ? new AssetImage('images/user-avatar.png') : new CachedNetworkImageProvider(this.profileImgPath),
                  radius:50.0,
                )
              ],
            )
          )
          ],
        )
      );
  
      return new Scaffold(
        appBar: new AppBar(title: new Text("Profile"), backgroundColor: const Color(0xFF009688)),
        body: new ListView(
          children: &lt;Widget&gt;[
            profileImage,
          ],
        ),
      );
    } 
  }  
  </code></pre>
  
  <p>What I'm trying to do is, show the default <code>user-avatar.png</code> image as long as <code>CachedNetworkImageProvider</code> don't get original image. But, it's bit behaving differently. </p>
  
  <p>Whenever I'm opening the page - I'm getting a blank blue box then suddenly the original image from <code>CachedNetworkImageProvider</code> comes up. </p>
  
  <p><a href="https://i.stack.imgur.com/nlUfP.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nlUfP.gif" alt="enter image description here"></a></p>
  
  <p>Can't able to understand what's happening.</p>
  
  <hr>
  
  <p>@Jonah Williams for your reference -
  <a href="https://i.stack.imgur.com/GIFbt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GIFbt.png" alt="enter image description here"></a> </p>