Flutter REST API : Basic to Advanced with 2 Real World Apps

Welcome to The REST API Course!

In this introductory video, you’ll get a complete overview of what this course offers and how it will help you become confident in integrating RESTful APIs with Flutter applications.

Throughout this course, you’ll learn how to:

• Create, retrieve, update, and delete data from a REST API.

• Understand multiple approaches to interacting with REST APIs in Flutter.

• Explore both basic and advanced concepts of REST API integration.

In the first part, we’ll master the fundamentals — setting up REST APIs, making HTTP requests, and handling JSON data.
In the second part, we’ll level up by connecting your Flutter app with Google Cloud Services and Google Photos API to upload and manage photos seamlessly.

You’ll also get hands-on experience with popular Flutter packages such as:

• http

• SharedPreferences

• File Picker

• Google Sign-In

• Path

By the end of this journey, you’ll be fully equipped to build production-ready Flutter apps powered by RESTful APIs.

In this lesson, we dive into the core foundations of REST APIs and learn how the Dart http library allows Flutter apps to communicate with web servers.

You’ll discover:

• What a REST API is and how it facilitates client-server communication.

• How to send different types of HTTP requests — GET, POST, PUT, PATCH, and DELETE.

• How the server responds using status codes (200, 201, 400, 500, etc.) and structured JSON payloads.

• The role of JSON data in REST APIs and how Flutter apps can parse and use it effectively.

By the end of this video, you’ll have a strong understanding of how REST APIs work under the hood and how to leverage the Dart http package to connect your Flutter app to any web service.

This knowledge forms the backbone for everything we’ll build next — enabling you to tap into thousands of web APIs and integrate real-world data into your Flutter projects.

n this lesson, we’ll explore the overall architecture of the Flutter app and understand how each component connects to the REST API. You’ll gain a clear picture of how the app will be structured and how data will flow between the server and the user interface.

We’ll start by discussing the Go REST API service that provides various endpoints. For this project, we’ll focus on the /users endpoint, which allows us to:

• Create users using the POST method

• Retrieve users with the GET method

• Update user details with PUT or PATCH

• Delete users with the DELETE method

You’ll learn how to set up a dedicated service layer by creating a UserService class inside a services folder. This class will handle all API-related operations, including defining the endpoint URL, access token, and request headers. We’ll also discuss how to generate your access token from the Go REST website and how to configure authorization and JSON headers correctly.

Additionally, we’ll look at:

• How to manage HTTP response codes (200, 400, 500, etc.)

• Implementing error handling and exception management

• Building a scalable app structure using reusable widget classes

By the end of this video, you’ll have a solid understanding of how the app architecture is organized and how your Flutter application will communicate with a REST API effectively.

In this lesson, we’ll create the User model class that represents our data structure for interacting with the REST API. This model will allow our Flutter application to handle user data efficiently and consistently throughout the app.

You’ll learn how to:

• Define a User class with all necessary fields, such as id, name, and email.

• Implement JSON serialization and deserialization methods using fromJson and toJson.

• Convert raw JSON responses from the API into Dart objects that can be easily displayed in the UI.

• Understand how data modeling helps maintain clean, scalable, and organized code.

We’ll also see how this model integrates seamlessly with our API service, allowing us to fetch, display, and manage user data within the Flutter app.

By the end of this video, you’ll have a solid understanding of how to structure your data models in Flutter and how to convert JSON data from REST APIs into Dart objects ready for use in your application.

In this lesson, we’ll set up the http package in Flutter and use it to fetch user data from a REST API. You’ll also learn how to build a simple and responsive UI that displays this data in a list format.

We’ll begin by installing the http package from pub.dev, adding it to the pubspec.yaml file under dependencies, and running the flutter pub get command to complete the setup.

Next, we’ll:

• Create a fetchUsers() method in the UserService class to send HTTP GET requests to our API endpoint.

• Pass the correct headers and API token for authentication.

• Decode the JSON response and convert it into a list of User objects using the fromJson method.

• Handle different response codes to ensure the request completes successfully.

After setting up the backend connection, we’ll build the app’s frontend UI:

• Use a ListView.builder to display the fetched users in a clean, scrollable list.

• Implement a loading indicator using a boolean isLoading variable and a CircularProgressIndicator widget to handle network delays gracefully.

• Create a reusable UserCard widget to show each user’s information, including their name and email.

By the end of this video, you’ll understand how to:

• Integrate the http package into your Flutter project.

• Fetch and display data from a REST API.

• Build a dynamic UI that reacts to loading states and displays data efficiently.

This section lays the foundation for connecting Flutter apps to live APIs and handling real-time data. In the next part, we’ll learn how to store fetched data locally using SharedPreferences.

In this lesson, we’ll learn how to store and retrieve user data locally using the Flutter package SharedPreferences. This will allow our app to keep showing user data even when the device is offline or has no internet connection.

We’ll start by installing the shared_preferences package from pub.dev, adding it to the pubspec.yaml file, and running the flutter pub get command to include it in our project.

Next, we’ll update the logic inside the fetchUsers() method:

• After successfully fetching the user list from the API, we’ll create an instance of SharedPreferences.

• Convert the list of users to a JSON string using jsonEncode.

• Save it in persistent storage with the setString() method.

This ensures that every time new data is fetched from the server, it’s automatically cached for offline use.

We’ll then create a new method, fetchCachedUsers(), to:

• Retrieve the stored JSON string using getString().

• Decode it back into Dart objects using jsonDecode.

• Convert the JSON into a list of User objects with User.fromJson().

• Display the saved data when the app is offline.

Finally, we’ll handle network issues gracefully using a try and on SocketException block:

• When the internet is available, data is loaded from the server and is cached.

• When the device is offline, data loads directly from local storage instead.

By the end of this video, you’ll understand how to implement persistent offline data storage using SharedPreferences, making your Flutter app more reliable and user-friendly — even without an internet connection.

In this lesson, we’ll learn how to add new users to the server using the HTTP POST request in Flutter. We’ll also design a complete user interface for creating and submitting new user details, including name, email, gender, and status.

We’ll begin by adding a Floating Action Button to the home screen, which will navigate us to a dedicated “Add User” page. For navigation, we’ll implement a navigateToAddUserPage() method that uses Navigator.push() to open the new screen.

Inside the AddUserPage, we’ll:

• Build a simple form using TextField widgets for the user’s name and email.

• Add DropdownButton widgets for selecting the user’s gender and status.

• Use TextEditingController instances to capture text field inputs.

• Define lists for available genders and statuses, and set default selections to make the UI interactive and user-friendly.

Once the UI is ready, we’ll move on to the backend logic:

• In the UserService class, we’ll create a new addUser() method that sends an HTTP POST request to the API endpoint.

• Convert the user object into a JSON string using jsonEncode before sending it in the request body.

• Include all required headers such as authorization and content type.

• Handle the server’s response, checking for status code 201, which indicates that the user has been successfully created.

Finally, we’ll integrate the frontend and backend:

• Create a submitData() method in the AddUserPage that collects user input, creates a User instance, and passes it to the addUser() method.

• After successfully creating the user, return to the homepage and refresh the users list by calling fetchUsers() to display the new entry immediately.

By the end of this video, you’ll know how to:

• Use the HTTP POST method to send data to a REST API.

• Build a functional form-based UI in Flutter.

• Connect the form to the API for creating and displaying new data dynamically.

This section brings your Flutter app one step closer to full CRUD functionality by adding the ability to create new users directly from the interface.

In this lesson, we’ll learn how to update existing user details on the server using the HTTP PUT request in Flutter. We’ll reuse the AddUserPage for editing, allowing us to modify the user’s name, email, gender, and status.

Key steps covered in this video include:

• Creating the updateUser() method in the UsersService class:

  • This method takes the id of the user to be updated and a User object with the new details.

  • Convert the user object into a JSON string using jsonEncode.

  • Send an HTTP PUT request to the API endpoint with the user’s ID, request body, and headers.

  • Return true if the server responds with status code 200, indicating a successful update.

• Updating the UI to support editing:

  • Add a ValueChanged callback onUserEdited to the UserCard widget.

  • Implement a PopupMenuButton in the ListTile trailing section with an “Edit” option.

  • Navigate to AddUserPage when the edit action is selected, passing the current user’s data.

• Editing user details in AddUserPage:

  • Use a boolean isEdit to differentiate between adding a new user and updating an existing one.

  • Populate text fields and dropdowns with the current user’s data if editing.

  • Create an updateData() method that calls updateUser() with the user’s ID and updated details.

  • On success, return to the homepage and refresh the users list with fetchUsers() to show the updated information.

By the end of this video, you’ll know how to:

• Use the HTTP PUT method to update data on a REST API.

• Pass data between screens for editing.

• Build a dynamic UI that supports both creating and updating users seamlessly.

This section completes the update functionality of our CRUD operations, making the app fully capable of managing user data in real-time.

In this lesson, we’ll learn how to remove a user from the server using the HTTP DELETE request in Flutter. This completes the CRUD operations, giving our app full data management capabilities.

Key topics covered in this video include:

• Creating the deleteUser() method in the UsersService class:

  • This method takes the user’s id as a parameter.

  • Build the URI by appending the user’s ID to the API endpoint.

  • Send an HTTP DELETE request with the appropriate headers.

  • Check for a 204 status code, which indicates the user was successfully deleted, and return true if successful.

• Updating the UI to handle deletions:

  • Add a ValueChanged callback onDeletedById to the UserCard widget.

  • Add a new PopupMenuItem for deletion in the existing PopupMenuButton.

  • Pass a predefined PopupAction.delete value and display it in the menu.

  • Handle the user selection: call onUserEdited for edit actions and onDeletedById for delete actions.

• Connecting deletion to the homepage:

  • Create a deleteUser() method in HomePage to call the service’s deleteUser() method.

  • Remove the deleted user from the local list using removeWhere() based on the user’s ID.

  • Pass this method to the UserCard widget’s onDeletedById parameter.

By the end of this video, you’ll be able to:

• Send HTTP DELETE requests to remove data from a REST API.

• Integrate delete functionality into the app’s UI seamlessly.

• Dynamically update the users list in the app after a successful deletion.

After completing this section, your Flutter app will have fully functional CRUD capabilities, allowing you to create, read, update, and delete users in real-time.

In this lesson, we’ll learn how to handle exceptions and errors gracefully in Flutter and create a reusable helper class to display pop-up messages using Snackbars. This will improve the user experience by providing clear feedback for success or failure operations.

Key topics covered in this video include:

• Creating a Snackbar Helper Class:

  • Set up a utils folder and add a snackbar_helper.dart file.

  • Implement a showSnackBar() method that takes a BuildContext and a message string.

  • Use SnackBar and ScaffoldMessenger to display messages throughout the app.

  • This helper can be reused for success or error notifications in multiple screens.

• Handling Exceptions with try/catch:

  • Wrap API calls like adding, updating, deleting, and fetching users with try/catch blocks.

  • Display appropriate Snackbars for success messages (e.g., “User added successfully”, “Updated successfully”) and failure messages (e.g., “Creation failed”, “Deletion failed”, “No internet connection”).

• Integrating Snackbars Across the App:

  • In AddUserPage, show a success or failure popup after submitting or updating user data.

  • In HomePage, show a failure message if deleting a user fails due to network issues.

  • Display a notification when fetching users fails because of no internet connection.

By the end of this video, you’ll know how to:

• Create a reusable Snackbar helper for consistent pop-up messages.

• Handle exceptions gracefully for all CRUD operations.

• Provide clear and immediate feedback to users when an operation succeeds or fails.

This section ensures your app can handle errors elegantly, giving users a smooth and professional experience even in case of network failures or other unexpected issues.