Flutter 3.0 Rest API crash course build a News app from zero

Lock a Flutter app to portrait orientation to prevent overflow in landscape. Use the recommended code to specify device orientations and enforce portrait mode.

Learn to set up Flutter app structure and theming using provider and shared preference, implementing light and dark themes with a multi provider and a consumer to propagate changes.

Learn to add custom fonts with Google fonts, style the app bar with a center title, theme-aware colors, and an icon button for a news app built with Flutter 3.0.

Implement the main screen tabs with a column and row layout, decorate tab labels in a container with padding and a card color, and enable taps via a gesture detector.

Create dynamic tabs in a Flutter news app by building a reusable tabs widget, using an enum to toggle between top trending and all news, and managing state with setState.

Build a reusable pagination widget using elevated buttons for previous and next, with dynamic text and a function, styled in blue with bold 18px text.

Implement a horizontal pagination numbers widget by building a scrollable list with an item builder, handling overflow with flexible and flex, and styling with centered text, padding, and tap interactions.

Finish the pagination control by implementing next and previous buttons for five items, updating the current page index, and highlighting the active item in blue while preventing underflow at zero.

Implement a Flutter dropdown button for a news app using an enum for sort options like relevancy, popularity, and publish. Style and align it to the top right.

Implement the articles widget in the home screen using a list view, with a fancy shimmer image, dynamic sizing, rounded corners, and a stacked layout to mimic the UI shown.

Builds the articles widget beside an image, aligning title, reading time, and date in a responsive column. Applies Montserrat styling, overflow handling, max lines, and text justification for readable news.

Build a reusable article loading shimmer widget in Flutter using the shimmer package, with base and highlight colors aligned to theme, and integrate it into the home screen.

Finish the top trending widget by implementing a non-scrollable shimmer with a card swiper for five items to boost performance.

Learn to implement a top trending shimmer loading effect in Flutter by refactoring the loading widget and conditionally displaying gray placeholders based on the news type.

Implement the search screen with page transitions in the Flutter 3.0 news app, wiring navigation from the home screen and exploring right-to-left and bottom-to-top transition styles.

Implement the search screen top bar with a back arrow, text field, and search icon, using a text editing controller and focus node with proper disposal and autofocus.

Implement a search suggestions widget by decorating a text input, wrapping it in a container, and rendering keyword suggestions with a staggered grid view.

Implement the bookmarks screen in a Flutter news app by reusing the home screen bar, wiring a stateful bookmark screen, and displaying an articles list with an empty news widget.

Learn to display web content inside a Flutter news app using a webview, show loading progress with a linear indicator, and handle back navigation with a webview controller.

Add a leading icon button in the app bar to navigate back to the home screen from a webview, using navigator.pop(context) to return to the previous screen.

Implement the refresh webview method by calling the controller’s refresh or reload. Pop the navigator context to hide the modal sheet and apply try-catch-finally error handling with logging.

Install the share plus plugin from pub.dev and update pubspec.yaml. Add a share button, implement the share call with try-catch, and test sharing a URL.

Implement an open in a browser function in Flutter using the url_launcher package, including installation, importing, and converting URLs to URIs with basic error handling and testing.

Create and trigger an error dialog in a Flutter app by defining a reusable static global method that shows an AlertDialog with a dynamic error message, using context and builder.

Build a Flutter news details screen by layering an image with two different buttons above it using a stack, then navigate via a named route with Navigator.pushNamed.

Discover what a REST API is, how it connects a mobile client to a database, and how HTTP requests perform four actions returning JSON, XML, or HTML responses, with Postman.

Learn how to integrate a rest api for a news app using the news api dot org, including authenticating with an api key, constructing endpoints, and handling pagination and errors.

Use postman to send a get request with a url and api key, returning a json with articles and sources. Generate a Dart model class from json.

Integrate the REST API in a Flutter 3.0 news app using the HTTP package to perform a GET request, fetch data, and display results with a news model.

Set the page size to five and build a NewsModel list from the API response using from JSON, via a static method for the home screen.

Enhance the get all news method by segmenting the url with a base url, encoded path, and query map, and use a header for the api key.

Fetch news data on the home screen, populate a news model list, and rebuild the screen to display articles with images, titles, and dates, using a future builder.

Learn to fetch news from a REST API using a FutureBuilder, handle loading with a shimmer, and manage errors while displaying news data in a Flutter app.

Develop a Flutter 3.0 rest API news detail view that displays the article title, reading time, and date, passes the url to a web view, and enables state management.

Learn to compute article reading time in a Flutter news app by using the reading_time package, combining title, description, and content, then displaying minutes and a read message.

Format the published date with the intl package to display day, month, year, and time, and guard against null dates in the news model and global methods.

Learn robust error handling for Flutter REST API by interpreting status codes, showing user-friendly messages, and implementing try-catch and dynamic error messages in a news app.

Enhance error handling for the flutter news app by implementing http exceptions with code messages, using contains checks for API key disabled, and overriding toString to print clear responses.

Handle errors with the status code in a Flutter 3.0 rest api app, including a 401 unauthorized due to a missing api key, and learn three error-handling methods.

Explore why state management matters in this Flutter app using the provider package, and how it reduces boilerplate while managing data across articles and the web view screen.

Learn to implement Flutter provider state management by creating a news provider with change notifier, fetching all news from an API service, and wiring the provider above the home screen.

Configure a news app by removing this code and wiring a news model provider with change notifier to access image, title, reading time, and url, then add the API key.

Implement pagination by managing a current page index and a fixed page size of five, passing the page to fetch news, and handling errors when the page is below one.

Implement sorting by news in the Flutter 3.0 REST API app using a dropdown to pass the sort by value (relevancy, popularity, published at) to the API and update results.

Display the correct news details in a flutter 3.0 rest api app. Use the published art as an id and pass data via provider and route arguments.

Copy the existing share function into the news details screen, import the required packages and the global method file, and test to ensure the current news URL shares correctly.

Fetch top headlines from the news API with a dedicated get top headlines method, configure country as US, and display the results in the app UI using a provider.

Implement a hero image animation by wrapping images in the Arrow widget with a unique tag and using the published date as the ID to sync article and blog details.

Learn to implement a search feature in a Flutter 3.0 news app by adding a query-based API call, managing results with a provider, and handling empty states.

Learn to use the Firebase Rest API to post and delete bookmarks in a Flutter app, including connecting to Firebase real-time database, creating a database, and configuring read/write rules.

Create the bookmarks model class for a Flutter news app, parsing data from JSON and Firebase real-time database snapshots, with a custom toString for debugging.

Post dummy data to a Firebase real-time database using the post method, encoding a map to JSON, and saving it under the bookmarks path via the bookmarks provider.

Save the news data to a real time database by converting the news model to json and sending it via the provider, ensuring user id and source name keys match.

Learn how to delete items from Firebase real-time database in a Flutter app by adding a delete bookmark method, using item IDs, and testing the delete action.

Fetch bookmarks data from a REST API, pass the bookmark key for deletion, and implement a get bookmarks method in the provider to convert JSON into bookmark models.

Fetch and display bookmarks on the screen using a future builder and bookmarks model integrated with a real-time database, with layout and provider setup for reliable navigation.

Check if the current news is in bookmarks and indicate the status with a green color and a different icon; manage add and delete actions via the bookmarks provider.

This lecture explains how the notify listener can cause an infinite loop with future builders and shows the fix by using listen to false to stop listening.

Implement and test the delete function for bookmarks in the flutter news app, using a required key and updating the current bookmarks list. Address data consistency when rest API updates.

Discover how to replace the Flutter launcher icon by adding an image to assets, configuring the Flutter launcher icons, updating pubspec and minSdk to 19, and rebuilding the app.

Configure a native splash screen in Flutter by adding the flutter native splash package. Set colors and images for light and dark themes and generate assets with a command.