Build a Single Page Application With Flutter Web

Set up a SPA with dog images using Flutter and get it ready for production using Firebase hosting

From Wikipedia, the free encyclopedia:
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions (e.g. scrolling).

It has become a very popular technique. Examples include Netflix and Trello. It is ideal for a small business with a limited number of offerings to showcase.

You can read plenty of articles to learn more about SPAs, for example, Single Page Application: What is it and How it Actually Works? and Pros and cons of building single page apps in 2022.

In this tutorial, we will build a very simple SPA that displays images of dogs by breed. Above is a sample screenshot. Run the SPA using the following URL: https://dog-spa.web.app. It has the following features:

1. The content is lazily loaded, i.e., only the images for the first few breeds are loaded at start-up, and the rest is loaded as you scroll down. This makes the time until the first breed is shown shorter.
2. The URL is updated for each breed as you scroll, so if you are most interested in labradors, you can bookmark the URL when watching that breed, and later you (and friends to whom you mail the URL) can get directly to this section by using this URL: https://dog-spa.web.app/?breed=labrador
3. A menu is shown if you click the menu button, making it easy to navigate to different breeds.

You will learn how to build this SPA. The tutorial assumes that you have basic knowledge about building a Flutter app.

Step 1: Use ListView.builder