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

Name: Flutter Web Development Bootcamp:Build 2 Real-World Web Apps
Rating: 4.5 (35 reviews)

Learn Flutter web development, including Flutter routing, making API requests in Flutter web apps, Build real web apps

Created byVapa Academy

Last updated 6/2024

English

What you'll learn

Flutter Web Development: Build a Complete Real-World Web App
How to Use REST API in a Flutter Web App and Make Different Types of HTTP Requests
Flutter Responsive Design: Making Your Web App Adapt to Any Device
Deploy Your Flutter Web App to a Cloud Server and Make It Accessible Worldwide
How to Handle Routing for a Flutter Web App
How to Build a Real-World Movie App Using the Public Movie Database
How to Search for Movies and Display Them in a Web App

Course content

3 sections • 63 lectures • 7h 19m total length

Introduction4:19
learn to build a responsive Flutter movie web app with navigation, search, and API data; implement carousel, grid cards, hover effects, and a detailed movie page.

Movie App Project Source Code0:04
Movie App Project - Live Overview4:22
Project Setup Part-14:58
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.
Routing in Flutter Part-26:50
Building Navigation Drawer Part-37:03
TMDB Movie Icon Part-44:56
Completing Navbar UI Part-56:14
Top Rated Movies Skeleton Loading Part-68:39
Now Playing Skeleton Loading Part-78:20
Adding Text Widgets Part-84:32
Home Page Skeleton Loading Complete Part-97:13
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.
Minor Bug Fix and Footer Part-107:23
Footer UI Part-113:49
Generating TMDB API Key Part-127:42
Movie Model Part-139:56
Making Http Request Top Rated Movies Part-149:26
Making Http Request Parsing Movies Data Part-158:21
Top Rated Movies Carousel Slider Part-168:21
Now Playing Movies List Part-1710:13
Now Playing Section UI Issues Part-1810:01
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.
Movies Grid View Part-1912:37
Home Page UI Completed Part-204:17
Home Page Code Overview Part-214:30
Routing Movies Page Part-224:40
Movies Filter Page Part-2311:15
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.
Changing State of Movies Filter Part-243:41
Movies Page UI Callback Function Part-2510:30
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.
Search Page Routing Part-266:21
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.
Search Page Part-2711:42
Search Page Error Complete UI Part-288:56
Routing to Movie Details Page Part-294:50
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.
Movie Details Service Part-307:14
Movie Details UI Part-316:45
Stacking Up Widgets Part-3211:22
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.
Movie Details Wrap Up Part-3310:12
Redirecting Issue Fix Part-348:16
Responsive Web App Part-356:58
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 Movie App on Firebase Part-366:58
Course Wrap Up2:19

Photo Gallery Web App Project - Source Code0:04
Photo Gallery Web App Project - Live Overview3:17
Creating a New Flutter Project Part-17:02
Main Page UI Part-26:56
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.
Building App Bar Part-38:01
Skeleton Loader Widget Part-48:28
Skeleton Loading Implementation Part-55:28
Photo Gallery Footer Part-611:33
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.
Understanding Pixabay API Part-74:16
Image Model Part-84:49
Create an image model in Flutter to parse Pixabay API JSON into Dart, extracting URL, views, likes, and tags for the web app.
Image Services HTTP Call Pixabay API Part-911:15
Building Image Card Part-109:41
Viewing Image Data in Grid View Part-117:50
Implementing Search Functionality Part-124:46
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.
Pagination Part-136:07
Setting Theme Data Part-145:25
Toggle Theme Part-156:01
Display Images in Dialog Box Part-169:43
Image Dialog Box Part-177:35
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.
Responsive for Mobile and Tab Views Part-189:45
Deploying Photo Gallery to Vercel Part-198:34
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.
Deploying Photo Gallery to Firebase Part-205:02
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.
Course Wrap Up1:58

Requirements

Students don't need to have any prior skills to take this course. They will learn everything from the beginning.

Description

With our in-depth "Flutter Web Development Bootcamp: Build 2 Real-World Web Apps" course, discover the world of web development with Flutter. This bootcamp is intended for developers of all skill levels, from novices to seasoned Flutter fans, and provides an extensive learning experience.

Foundations of Flutter for Web Development: Learn the fundamentals of Flutter specifically designed for web development, including its responsive design principles and widget system.
Constructing Responsive User Interfaces: Acquire the skills necessary to design dynamic, flexible user interfaces that work flawlessly across a range of screens and devices.
RESTful API Integration: Learn how to work with RESTful APIs to retrieve and manipulate data for your web-based apps.
HTTP Requests and Asynchronous Operations: To improve the responsiveness of your web applications, investigate various HTTP request strategies and asynchronous programming approaches.
Real-World Application Development: Put your skills to use by creating a single, comprehensive web application that includes features like effective routing and search capabilities.
Deployment to Cloud Servers: Learn how to put your Flutter web apps on cloud servers so that they are available to users anywhere.

You will have the skills and knowledge necessary to create, implement, and manage real-world Flutter web applications at the end of this boot-camp.

Who this course is for:

Flutter developers who want to learn web development with Flutter
If you want to learn web development with Flutter
If you want to build a real-world web app using Flutter
Beginner to advanced learners
If you want to learn Flutter web from basics to advanced levels while gaining real-world web app experience.

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

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 4min

Flutter Web Movie App : Project-139 lectures • 4hr 42min

Photo Gallery Web App: Project-223 lectures • 2hr 34min

Requirements

Description

Who this course is for: