My Flutter Developer Journey

 When you first create a Flutter Project it begins with the counter app in main.dart. This app has a lot of comments in it that you don't need if you have moved on from learning about how the counter app works. So if you want to remove the comments all in one go then follow these steps.  Open Find and replace. You can either do ctrl+R or you can go to Edit >hover over Find> click Replace.  In the find, field enter: \/\/.* (this finds all the // comments, also that is not a W it is a forward and backward slash together twice.\ / \ /) Leave the replace field blank Click replace all Now all the unnecessary comments are gone. Do ctrl +S to autoformat your code to get rid of the large spaces the comments left behind. 

 My goal for this project is to create a savings tracker app. With this project, I will also be learning how to implement clean app architecture and use Provider for State Management. I may even endeavor to create my own SQL database for local storage.  I came across this tutorial on how to use Provider and the MVVM app architecture. I like this tutorial because he broke down the Model View View Model architecture in a way that I was able to grasp.  What is a View Model? The Model is the business logic portion of the app. Business logic is the core function of the app. It is what you would be able to do on paper if you didn't have a computer. For my savings tracker app, the business logic is the function that allows you to add and subtract money from the savings fund.  What is a View? The View is the UI of the app. It is the screens and buttons that the user interacts with. To have clean architecture it is important to keep the business logic and any databases or APIs completely s

 So right now in my Shopping List App, the user is able to change the background for each of their lists. Their choice is saved in Firebase Firestore so it will persist across devices and sessions.  Right now the default background for every new list is the blue background. But what if the user doesn't want to have to change the background for every single list. What if they just want their favorite picture to be the background for every list.  Well to make that possible I want to create a page that allows them to choose what the default background picture will be for every new list created.  To do this I will create a document in the Firebase Firestore called defaultBackground and store the user's default selection there. This will be stored in a variable. When new lists are created it will fetch the image from that variable. This will only be used for the first time a list is created. Once a list is created to change the background they can do so inside of that list and it wi

The Problem As I was updating the web version of my Shopping list app to look and function more like the mobile app version, I noticed that the images were not displaying. I would see error messages in the console telling me that it could not display the image. I thought that maybe it was because the widget CachedNetwokImage( ) doesn't work for the web so I changed to Network image but that didn't work either. The Solution  I found the solution in this  Stack Overflow  post. The issue was something called CORS. So if you are using flutter web and you want to display images that are not stored in the app itself but rather on a different server (like Firebase Cloud Storage) then you have to give permission for your app to display those images from the other server. The way you do that is through configuring a Cors.json file through the Google Cloud Platform.  I'm going to walk you through how I got the images stored in Firebase Cloud Storage to show up in my Flut

 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

This post is about how I got network images to appear faster in my Flutter app. In part 1 I detail all the things I tried to make this work. In part 2 I share what finally worked to solve this issue.  The goal In my Shopping List App I allow my users to customize the background picture for their list.  I want the background image that my users choose to persist no matter what device they are using to access their shopping list. The problem Originally the user's image choice was saved via Shared Preferences which saves the name and location of their background image on their device. But if they were to log into their account using another device their background image would default to the default image instead of their chosen image.  To fix that I stopped using Shared Preferences and instead used Firebase Firestore to remember the name of the last image they chose. Then I wanted to save their custom uploaded images into Firebase cloud storage instead of on the device this way they c

  So I have been told that my text field on the shopping list page of my app can be difficult to see. I made it a little transparent so that it went well with the background of the lists. But today I am going to change how people enter items into the list. I will take away the text field and just have a floating action button visible. Once the button is pressed an alert dialog will appear and that will have a text field, add button, cancel button, and an add more button.  So I replaced the text field with a Floating Action Button. I made it blue with a white plus sign in it. When it is taped it flashes a light blue color. Without the Stack or Align Widget, the button appeared at the bottom center. With the align widget I made it appear at the bottom right with some padding on the bottom and right side.  Align ( alignment: Alignment. bottomRight , child: Padding ( padding: const EdgeInsets . only (bottom: 18.0 , right: 10 ), child: FloatingActionButton ( onPressed: ()