The Ultimate Hands-On Flutter & MVVM - Build Real Projects

Understand design patterns as best practices for solving problems. Explore how they define relationships between classes and objects, are programming independent, and enable flexible, reusable, and maintainable code across languages.

Explore the mvvm pattern where the view model acts as a middleman between the model and the view, exposing only the display data and keeping business logic off the view.

Learn why the MVVM design pattern cleanly separates data handling from the view by using a password reset view model for username, new password, and confirmed password, with client-side validation.

Learn how MVVM structures apps with web APIs by separating concerns: the view talks to the view model, which delegates to a web service to fetch cloud data.

Explore building a Flutter news app that displays global headlines, reads details, and searches for topics like Houston, following the MVVM approach.

Register for a free NewsAPI account to obtain an API key and access top headlines. Learn the endpoints and map the response into a news article model.

Register with the news API and set up a flutter project to display latest headlines, and build a NewsArticle model with fromJson to map title, description, url, and image.

Create a Flutter web service to fetch top headlines from an API via a network request, decode the JSON, and map articles to news article models for view models.

Create two view models for news screen: a list view model and an article view model. Expose title, description, image url, and article url to support top headlines and search.

Populate top headlines in a Flutter MVVM app by fetching articles via a web service, mapping models to a news article view model, and notifying the user interface with ChangeNotifier.

Learn to display the latest news in a Flutter app using MVVM and provider, fetch top headlines, and render them in a ListView with titles and images.

Understand a second method for change notifier updates by moving populate top headlines into a public function and calling it once in a NewsLiveState with listen false.

Implement a fetch headlines by keyword function to retrieve news related to a keyword from the news API, using async calls and JSON decoding with centralized URL constants.

Add a top text field with a text editing controller to search headlines in a Flutter MVVM app. Wire the field to fetch headlines by keyword on submit.

Learn to implement keyword search in a Flutter MVVM news app by wiring the text field, view model, and provider to fetch headlines by keyword and refresh the UI.

Explore implementing loading and empty views in Flutter MVVM by using a loading status enum, showing a progress indicator or no results found, and switching to the news list.

implement a detailed news article screen in flutter using mvvm, wire up on tap navigation to a details page with a selected article view model, and display the article title.

Learn to display article details in Flutter using the web view flutter package, and delegate navigation to the parent page via an on selected callback in an MVVM setup.

Build the place finder app in Flutter using mvvm, displaying maps with coffee shop pins, a places api, and launching maps on iOS and Android.

Set up your Google Cloud Platform account, enable the maps SDKs for Android and iOS, create API keys, and configure billing for your place finder Flutter app.

Learn to display Google Maps on Android with Flutter by adding the Google Maps Flutter package, configuring the Android manifest, and using a map widget with an initial camera.

Learn to configure Google Maps for iOS and Android in a Flutter app, including API key setup, AppDelegate updates, imports, and enabling the iOS Flutter embedded views preview in Info.plist.

Enable location services on android by integrating the geo locator package, configuring androidx, api 28/29, and manifest permissions, then retrieve and print the current latitude and longitude.

Enable location services on iOS by adding the location usage description key and testing latitude and longitude on iOS and Android simulators. Then zoom into the user's location.

Zoom into the user's current location by implementing an on map created handler, obtaining the position with geolocator, and animating the map camera to the coordinates at zoom level 14.

Enable the Places API in Google Cloud Console for your project, generate a key, and perform a place search using latitude and longitude to retrieve addresses, names, and open status.

Set up the API key in the Google Cloud console and test the nearby search endpoint to fetch places such as restaurants and coffee shops.

Build a Flutter web service client to fetch places by keyword and location using a URL helper and an API key, then parse the JSON results.

Create a place model, map json data to the model using a fromJson factory, extract id, name, lat, long, and photo url, and prepare a view model for the ui.

Create a place view model that wraps a place model to expose name, latitude, and longitude, and a list view model that fetches places by keyword and position.

Add a text field over the map, style it, and inject ChangeNotifierProvider to access the PlaceListViewModel; submit a keyword to fetch places by keyword and current position.

Learn to display place markers on a google map by converting place view models to a marker set, with unique IDs, info windows, and lat/long positions, including placeholder handling.

Toggle the show list button to present restaurant data from map markers using Flutter MVVM, with a visibility widget controlling display based on data, and navigate to item details.

Create a place list widget that displays a list of places using a list view builder, driven by a places view model, and show it with a modal bottom sheet.

Implement a flutter static function to fetch a photo reference image by id and display it in the place list widget, sizing with a 100 by 100 container.

Toggle between default and satellite map types in a flutter and folio Maps app by pressing a floating action button, updating the view model's map type and refreshing Google map.

Launch navigation from place finder app by routing places to maps via the map launcher, using MVVM in Flutter to support apple maps on iOS and google maps on Android.

build a city care app that lets you take or pick a photo, enter a description, upload to a server, and fetch and display incidents using the MVVM design pattern.

Explore the server backing the Flutter project, a Node.js and Express backend on Heroku. Learn how to fetch, add, and clear incidents using GET, POST, and clear endpoints.

Add an incident list page with a floating action button that opens a report incident page. Build a scaffolded form for incident title and multi-line description with borders.

Create the incident model and three view models—incident list, incident, and report incident—organized in their folders, with title, description, and an async save function.

Create a web service client to save incidents by posting title and description to an incidents endpoint without an image, testing with a floating button and Postman.

Explore saving incidents in a Flutter app with MVVM and provider, wiring text fields to the report incident view model and persisting data to the web service.

Fetch all incidents from a Heroku API using the deal library in a Flutter MVVM workflow, decode JSON to incident models, and expose them through the view model for display.

Create a future function in the incident list view model to fetch all incidents and map them to incident view models, then notify listeners via ChangeNotifier to refresh the ui.

Set up an incident list view model and incident lift page using mvvm, fetch all incidents on page load via provider, and display a loading indicator or no incidents found.

Introduce a status enum (loading, empty, success) to drive the incidents list user interface, showing a progress indicator while loading and a no incidents view when empty.

Add a placeholder image on the incident report page and provide a take picture button that opens a bottom sheet with camera and photo library options.

Use the image picker package to select a photo from the library, handling iOS and Android permissions. Store the image path in a view model and display the selected image.

Learn to integrate the camera package in Flutter, implement show camera navigation to a take picture page, and select the first available camera for testing on devices.

Build a take picture page with a camera controller and initialize camera controller future, using a future builder to show a camera preview on the Android emulator.

Add a floating action button to take a picture. Initialize the camera, save the image to a temporary directory with path provider, display it, and return its path.

Upload an image by extending the incident model to include image URL, and posting multipart form data with title, description, and image file to the server to save the incident.

Display incidents with images by adding an image url property to the incident view model, binding it to a network image in the list, and ensuring the interface refreshes.