Part 2: Getting network images to appear faster

 Since it takes a little bit of time for the list to load as it is fetching the network image I will use a modal progress hud so that the user knows that work is happening in the background and they should hang tight. The body part of the Scaffold needs to be wrapped in the widget ModelProgressHUD( ). 

body: ModalProgressHUD(
  inAsyncCall: loading,
  child: Column(

Model Progress Hud has a parameter called inAsyncCall. For that, you would give it the variable that you will toggle between true and false to display the progress hud or dismiss it. My variable is called loading. In the beginning, when I declare the variable I set it to false.  

I believe that circularProgressHud is the default progress hud of ModalProgressHUD( ). So to get the circle to appear when I tap to open a list I will add a setState function to the onPressed and make the loading variable equal to true. Then to dismiss the circle I will use setState again but after the Navigator.push and make the loading variable false again.  

onPressed: () async {
  setState(() {
    loading = true;
  });
  await getBackgroundPic(widget.listName);
  var saved = setpic['picture'];
  await cacheThatImage(saved);
  var cust = setpic['custom'];
  Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => ShoppingListPage(
                listName: widget.listName,
                backgroundPicture: saved,
                custom: cust,
              )));
  setState(() {
    loading = false;
  });
},

So I hot restarted the app and taped on a list to open it and nothing happened. It took a little while for the list to open but there was no circular progress indicator. So I wonder if I need to fill out more of the properties of the ModalProgressHud( ). But that didn't work either. I am thinking that because the list tile is in another widget from the main widget I probably need some state management. Set State is not enough. Since it is taking a exhobitant amount of time for that list to load when I prechache the image before the list shows I am going to abandon that method. It is actually faster if the list loads and then the picture loads.  So instead I will try to implement the cache network image widget on the list page. I found an example of how to do that with a background image setup. 

So I got the CachedNetworkImage to work.

CachedNetworkImage(
  imageUrl: background,
  placeholder: (context, url) =>
      Center(child: CircularProgressIndicator()),
  errorWidget: (context, url, error) => Icon(Icons.error),
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: imageProvider, 

            fit: BoxFit.cover)),
    constraints: BoxConstraints.expand(),
    child: Stack( ...

 But it only works for my network images and not my assets images. Which makes sense but I need to figure out how to work around that. I could make all my asset images network images. I think that would make the app size smaller but also add to the amount of storage in my cloud storage bucket. I would have to figure out how to make those images available to all. 

So I manually uploaded my three default background images to the storage bucket. These images are not nested within a folder so they should be accessible to anyone. I got rid of all the asset image file references in my code since they are network images now. There is also no need for the custom bool variable so I will erradicate those as well. 

I am pleased with how this turned out. The circularProgressIndicator shows up when the image is loading and then fades in the image when it is ready. I do feel like the network images are loading quicker. I think that the size of the image matters as my old assest files load faster then my custom image that came from my phone's image gallery.