As you can see, the app is running on the phone. We have a login screen that takes the email and password of the user to authenticate the user. Clicking the login button will authenticate the user and take them to the All Quotes screen. When you enter an invalid email address or a password of less than 6 characters, you can see that the form will show a validation error.
Once you enter the valid email and password, click the login button, and you can see a loading indicator for 2 seconds, then navigates the user to the All Quotes screen.
All Quotes screen will show a loader indicator till the API fetches all the quotes from an HTTP request. Once the API fetch is done, you can see the Quotes on the screen.
Before testing the code, let us first understand the project structure. I hope you are a bit experienced with the Flutter project structure. In the lib folder, we have the main.dart file, which as usual, is the app’s starting point. Here we have wrapped the App with ProviderScope Widget cause we are using Riverpod to manage the state and dependencies of the app.
We have key_constants.dart, which has some of the constants and mock data that we will use later in the course.
We also have the services folder containing the HTTP GET request to get the API from the internet.
Notifiers have the ChangeNotifiers, which help to manage the state and provide the data to the respective screens.
The pages folder has all the UI elements of the LoginScreen and AllQuotesScreen.
The model folder contains the Quotes model class.
Outside the lib folder, you have the test folder. This is the folder where we are going to write our test code.