Flutter Web Development Bootcamp:Build 2 Real-World Web Apps

Build a feature-rich movie web app in Flutter, from environment setup to responsive UI, data fetching from TMDB, and detailed movie views with search and navigation.

Set up a Flutter project for a movie web app by installing Flutter, creating the project, and adding dependencies like carousel slider, go router, and skeletonizer, then run in Chrome.

Implement routing in a Flutter web app by linking the home page to the base URL and enabling navigation to movie details using the go router package.

Create a custom drawer wired to the scaffold using material design, featuring home and movies options to build the navigation bar for the flutter web app.

Create a TMDB icon and a search bar in a Flutter web app by building a navbar as a stateless widget that implements preferred size and an app bar.

Build the navigation bar and a search bar in a Flutter web app, using media query to make the search bar 55% of screen width with a prefix search icon.

Implement skeleton loading in the movie web app by adding a top rated movies header, a scrollable column, and a carousal skeleton with five gray slides, auto-playing at 16:9.

Learn how to implement a now playing skeleton in a Flutter web app, move the carousel skeleton to skeletons, and build a five-item list view skeleton with leading gray tiles.

Add left padding to the carousel slider, insert spacing, display a now playing header, align content left, and prepare skeleton views for movie cards in now playing and popular sections.

Implement skeleton loading for the explore popular movie section in a Flutter web development bootcamp project, using a grid view of skeleton cards to simulate content during loading.

Fix home page skeleton bugs, adjust top rated movie card color and grid height, and add a footer with copyright text and social icons for the Flutter web app.

Develop a responsive Flutter footer by using image icons, center alignment, and a wrap with 16 spacing, adding about us, privacy policy, and terms of service links.

Learn to generate a TMDB API key, obtain the access token, and fetch now playing movies in a Flutter web app using the SDP package.

Build a movie model in flutter by defining a movie class that maps TMDB API fields, handles nulls with defaults, and parses JSON into a modular, readable data structure.

Create a Flutter movie service to fetch top rated movies from TMDB API, decode JSON from the results, map to the movie model, and throw an exception on non-200 responses.

Build a flutter movie web app by fetching top rated, now playing, upcoming, and popular movies from the tmdb api, using init state, headers, and a carousal slider.

Build a flutter web UI to display top rated movies with a carousal slider that accepts a list of movies from tmdb, uses skeleton loading, and taps navigate to details.

Build a now playing movies list in a Flutter web app using ListView.builder with poster cards, titles, and overviews, linking to details.

fix the now playing section to be scrollable by enabling shrinkWrap, item count, and scrollable physics. implement a reusable popular movies grid view with hover animations and efficient data fetching.

Learn to build a responsive movies grid view in flutter web, including hover interactions, animated raised cards, image loading, and displaying title, overview, rating, language, and adult indicators.

Fixes home page UI in Flutter movie web app by using LayoutBuilder for the popular movies grid, adjusts aspect ratio and cross axis count to five, adds padding and color.

Add hover effects and elevation to movie cards via an animated container, highlight grid view layout, and outline navigation to the movies page with plans to integrate API data.

Create a Flutter web movies page, implement a stateful page with a scaffold, a navigation drawer and a custom app bar, and expose the /movies route for navigation.

Build a movies filter in Flutter web development bootcamp by creating a MoviesFilter widget, fetching upcoming movies via the movie service, and styling a horizontal selectable filter for popular movies.

Duplicate filter widgets for popular, now playing, upcoming, and top rated in a Flutter web app, update indices and colors, and use setState to reflect user clicks.

Create a callback-driven movies page ui that updates current movies by filter, wires taps to popular movies, reuses a skeleton grid, and adds a footer before enabling search.

Add a search_movies function and update the tmdb api URL to enable movie searches. Build a stateless search page, wire /search route and navbar navigation, and prepare for showing results.

Convert the search page to a stateful widget and pass a query to fetch movies from tmdb api; display results in a scrolling list with a loading indicator.

Fix the search route error and finish the search page UI by pulling TMDB API data, switching posters to popularity, and adding title, overview, icons, and a footer.

Develop a movie details screen in a Flutter web app by routing from the carousel to /movie/{id}, organizing pages, and building the UI with a scaffold and custom nav bar.

Develop movie details service in a Flutter web app by adding fetch by id and fetch similar movies, wiring them to the detail page, and debugging responses for UI rendering.

In this video, build the movie details UI with a loading state, error handling, and a scrollable layout featuring a backdrop image and gradient overlay.

This lecture demonstrates stacking widgets to build a movie details screen in Flutter, using sized boxes, positioned elements, clipRRect posters, and text for title, date, and overview.

Finalizes the movie details user interface in a Flutter web app, adding original language and a similar movies grid with skeleton loading and go router navigation.

Fix the movie redirection bug by implementing didUpdateWidget to fetch movie data when the ID changes, and add responsive design with breakpoints at 850 and 1100 to adapt grid counts.

Enhance the flutter web app by making the home page responsive across devices, implementing layout builders, skeleton loading, and a column layout for carousal and now playing sections.

Deploy your Flutter movie web app to Firebase using the Firebase CLI: login, init hosting, and deploy, then verify the hosting link and responsiveness.

Recap the journey from setting up the Flutter environment to building a responsive movie web app with widgets, API data, search, detailed movie pages, and animations.

Build a Flutter web photo gallery that uses the Pixabay API to search and browse images, featuring a grid, image cards, a detail dialog with navigation, and a theme toggle.

Create a new Flutter web project, install dependencies, and prepare the photo gallery app by configuring main.dart and running in a browser.

Build the main page of a flutter photo gallery web app by creating a photo gallery stateful widget inside a scaffold and a custom app bar with a search bar.

Build a responsive app bar for the Flutter photo gallery web app, styling the title with Playfair Display and purple color, and add a centered 55% width search bar.

Learn to implement a skeleton loader widget in the Flutter photo gallery web app, using a card with skeleton loading and the skeletonizer to improve loading and simulate content.

implement skeleton loading for the main page grid in the Flutter photo gallery web app, using a padded, non scrollable grid view with a skeleton loader to display loading states.

Create and style a footer for the Flutter photo gallery web app with a purple gradient container, shadow, social icons, and links like about us and privacy policy.

Fetch image data from the pixabay api and parse the json response to map images with tags, likes, and web format urls in the flutter web app.

Create an image model in Flutter to parse Pixabay API JSON into Dart, extracting URL, views, likes, and tags for the web app.

Build an image fetching service in a Flutter web app by sending an HTTP GET request to the Pixabay API, handling pagination, and decoding hits into image models.

Build a hover-animated image card in a Flutter web app using a mouse region and animated container, loading image data from the image model's network URL with a tap callback.

Build a Flutter photo gallery web app by creating an image details card with tags, views, and likes, wiring grid view and network fetch, and refining a skeleton loader.

Implement search in the Flutter photo gallery web app by wiring a search callback to the app bar and updating images via the image service API, with pagination and theming.

Implement pagination in the Flutter photo gallery by tracking a page index and loading 20 more images on scroll, updating state with new results for the current search query.

Set up light and dark themes in the Flutter web app by implementing a theme provider, toggle theme, and defining dark and light ThemeData with scaffold background and color schemes.

Learn to apply light and dark themes in a Flutter web app using a change notifier provider and the provider package, with a toggle updating theme mode across the app.

Display images in a Flutter web app using a dialog box with next and previous navigation and theme-aware styling, powered by a stateful image dialog and a list of images.

Build an image dialog in flutter web with next/previous navigation, a close icon, and a barrier; fix a border radius issue and use modulo indexing for responsive design.

Learn to build a responsive Flutter photo gallery web app for mobile, tablet, and desktop by using a responsive helper, media queries, and adaptive grid and dialog layouts.

Push the flutter photo gallery web app to github, connect github with vercel, and deploy. Configure build and output settings, then view the live site and prepare for firebase deployment.

Deploy the flutter photo gallery to Firebase hosting using the Firebase CLI, initialize and configure hosting, then publish with a hosting URL and verify light and dark modes across devices.

Implement a dialog box with image navigation, a theme toggle, and pagination, polish a responsive Flutter web photo gallery, and prepare deployment to Firebase or Vercel.