Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024]

Flutter + Firebase: Xây dựng Ứng dụng Tạp hóa & Bảng quản trị WEB [2024]

Flutter + Firebase: Xây dựng Ứng dụng Tạp hóa & Bảng quản trị WEB [2024]

Flutter & Firebase: Xây dựng Ứng dụng Tạp hóa với Bảng quản trị WEB từ đầu, tích hợp cổng thanh toán - Phiên bản 2024

4.5
(449 đánh giá)
14,711 học viên
Giảng viên
Hadi Kachmar
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
18.0 giờ video
157 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Khóa học Flutter này là một hướng dẫn toàn diện, giúp bạn học và xây dựng một ứng dụng Flutter hoàn chỉnh với Firebase.
Hướng dẫn viết Clean-code và tránh Boilerplate code
Ứng dụng đầy đủ chức năng, sẵn sàng sử dụng và triển khai
Ứng dụng Tạp hóa Flutter đầy đủ chức năng với Bảng quản trị WEB
Flutter SharedPreferences
Quản lý trạng thái rõ ràng với Flutter Provider State Management
Flutter StreamBuilder & FutureBuilder
Firebase Firestore, Authentication & Storage
Cổng thanh toán
Viết code sẵn sàng cho production theo best practices và trở thành một Flutter developer thành thạo

Yêu cầu

Kiến thức cơ bản về Flutter và Dart
Nên có kiến thức tốt về Flutter và Dart

Đối tượng phù hợp

Dành cho những người đam mê học Flutter và Dart
Dành cho tất cả những ai quan tâm đến Flutter
Dành cho những người muốn tạo một ứng dụng hoàn chỉnh bằng Flutter

Nội dung khóa học

16 phần • 157 bài giảng
1 Giới thiệu
2 Kiểm tra phần này trước khi mua khóa học
3 Tổng quan ứng dụng - giải thích cách hoạt động
4 Tổng quan Bảng quản trị WEB
5 Kênh Youtube
6 Github của tôi
7 Máy chủ Discord. Hãy tham gia nếu bạn có bất kỳ câu hỏi nào!
8 CÁC TÀI KHOẢN MẠNG XÃ HỘI CỦA TÔI ĐỂ LIÊN HỆ
9 Tài nguyên ứng dụng
1 Lưu ý quan trọng về Truy cập Khóa học và Phản hồi
2 Mẹo và thủ thuật
3 Khóa hướng thiết bị
4 LÀM RÕ MỌI THỨ
5 Khởi tạo ứng dụng và triển khai chế độ tối
6 Triển khai bottomBar
7 Bài tập 1
8 Thêm các appbar khác nhau cho các màn hình khác nhau trong bottombar
9 Bài tập 2
10 Triển khai màn hình người dùng
11 Tạo hộp thoại cập nhật địa chỉ
12 Bài tập 3
13 Triển khai hộp thoại đăng xuất
14 Triển khai thiết kế danh mục
15 Hoàn thiện việc xây dựng màn hình danh mục
16 Triển khai bộ trượt thẻ trong màn hình chính
17 Triển khai widget giảm giá
18 Tạo danh sách sản phẩm đang giảm giá
19 Triển khai widget văn bản xoay "đang giảm giá"
20 Triển khai hình ảnh fancy
21 Triển khai widget feeds và thêm nó vào màn hình chính
22 Lỗi Textfield
23 Làm cho widget giá trở nên động
24 Triển khai màn hình giảm giá
25 Xử lý giao diện nếu không có sản phẩm giảm giá. (Tạo giao diện mới cho nó)
26 Triển khai màn hình feeds
27 Triển khai widget giỏ hàng
28 Triển khai màn hình giỏ hàng
29 Bài tập 4
30 Triển khai màn hình chi tiết sản phẩm
31 Triển khai chức năng điều khiển số lượng
32 Triển khai màn hình danh sách yêu thích
33 Triển khai hộp thoại cảnh báo
34 Triển khai màn hình đơn hàng
35 Triển khai màn hình sản phẩm đã xem gần đây
36 Xử lý màn hình trống cho Đơn hàng, Giỏ hàng, Danh sách yêu thích và Đã xem gần đây
37 Lỗi package Badge
38 Sửa lỗi - Lỗi Package Badge Sau phiên bản 3.7
39 Triển khai widget huy hiệu cho giỏ hàng
40 Triển khai màn hình đăng nhập
41 Triển khai màn hình đăng ký
42 Triển khai màn hình quên mật khẩu
1 Lỗi Menu controller
2 Bắt đầu triển khai bảng quản trị
3 Về bài học tiếp theo
4 Triển khai widget sản phẩm và giải thích cách chạy ứng dụng web
5 Triển khai gridview sản phẩm
6 Triển khai màn hình tất cả sản phẩm
7 Triển khai widget đơn hàng trong màn hình Dashboard
8 Sửa lỗi ScrollController
9 Triển khai màn hình Đơn hàng
10 Triển khai các widget phía trên trong màn hình dashboard
11 Bắt đầu xây dựng màn hình thêm sản phẩm
12 Chỉnh sửa widget header
13 Triển khai menu thả xuống để chọn danh mục
14 Triển khai nút Radio để chọn Đơn vị đo lường
15 Triển khai widget chọn ảnh (WEB)
1 Cho phép admin chọn ảnh sản phẩm
2 Cho phép admin xóa ảnh đã chọn
3 Triển khai chức năng xóa form
1 Tạo lớp model cho sản phẩm
2 Hiển thị các sản phẩm khác nhau
3 Triển khai provider sản phẩm
4 Lấy chi tiết sản phẩm trong màn hình feeds mà không cần truyền nó
5 Đọc các thuộc tính khác trong widget feeds
6 Hoàn thiện quản lý trạng thái cho sản phẩm giảm giá
7 Hiển thị chi tiết sản phẩm
8 Hiển thị các sản phẩm khác nhau tùy theo danh mục của chúng
9 Triển khai model giỏ hàng
10 Triển khai provider giỏ hàng
11 Cho phép người dùng thêm vào giỏ hàng
12 Quản lý màn hình giỏ hàng
13 Hiển thị thông tin chính xác của các mặt hàng trong giỏ hàng
14 Cho phép người dùng xóa giỏ hàng, cập nhật số lượng và xóa một mặt hàng khỏi giỏ hàng
15 Thêm vào giỏ hàng từ trang chi tiết sản phẩm
16 Kiểm tra xem sản phẩm đã có trong giỏ hàng chưa
17 Triển khai provider danh sách yêu thích
18 Cho phép người dùng thêm vào danh sách yêu thích
19 Hoàn thiện quản lý trạng thái danh sách yêu thích
20 Hoàn thiện quản lý trạng thái đã xem gần đây
21 Hiển thị số lượng chính xác cho huy hiệu giỏ hàng
1 Firebase là gì?
2 Khóa SHA1
3 Kết nối ứng dụng với Firebase
4 Khởi tạo Firebase
5 Cho phép người dùng đăng ký bằng email và mật khẩu
6 Tạo widget quản lý loading
7 Hiển thị một widget loading khác
8 Kiểm tra xem người dùng có được phép thêm vào giỏ hàng không (Nếu người dùng đã đăng nhập)
9 Cho phép người dùng đăng xuất và kiểm tra ứng dụng
10 Cho phép người dùng đăng nhập
11 Triển khai phương thức đăng nhập google (Cho phép người dùng đăng nhập bằng tài khoản gmail)
12 Quên mật khẩu
13 Triển khai toast trong Flutter
14 Lưu thông tin người dùng vào Firebase Firestore
15 Lấy thông tin người dùng từ Firebase Firestore
16 Cho phép người dùng chỉnh sửa địa chỉ của mình
1 Kết nối ứng dụng Flutter WEB với Firebase
2 Kết nối bảng quản trị web với Firebase
3 Sửa lỗi - FirebaseOptions không thể null khi tạo ứng dụng mặc định
4 Cho phép admin tải lên một sản phẩm
5 Cảnh báo về các bài học sắp tới
6 Package đã ngừng hỗ trợ
7 Flutter web - Tải ảnh lên Firebase
8 Sửa lỗi tải ảnh / Được thêm vào sau khi xuất bản
9 Hiển thị sản phẩm trong bảng quản trị sau khi lấy từ Firebase
10 Triển khai màn hình Chỉnh sửa sản phẩm
11 Hiển thị dữ liệu chính xác trong màn hình Chỉnh sửa sản phẩm
12 Cho phép admin cập nhật chi tiết sản phẩm
13 Cho phép admin xóa một sản phẩm
1 Lấy sản phẩm từ Firebase
2 Hiển thị nền khác nhau trong khi lấy sản phẩm.mp4
3 Cho phép người dùng tìm kiếm sản phẩm
4 Sửa lỗi trùng lặp sản phẩm
1 Lưu giỏ hàng người dùng vào Firebase Firestore
2 Lấy giỏ hàng người dùng từ Firebase (Hiển thị các mặt hàng có trong giỏ hàng người dùng)
3 Lấy giỏ hàng người dùng trong khi ứng dụng đang tải
4 Sửa một số lỗi liên quan đến giỏ hàng người dùng
5 Hiển thị giá chính xác trong màn hình giỏ hàng
6 Cho phép người dùng xóa một mặt hàng khỏi giỏ hàng (Thực hiện xóa từ một mảng)
7 Cho phép người dùng xóa giỏ hàng và sửa một lỗi
8 Được thêm vào sau phần danh sách yêu thích của người dùng - Sửa một lỗi liên quan đến giỏ hàng - Người dùng null
1 Viết phương thức để lưu danh sách yêu thích trên Firestore
2 Hoàn thiện provider danh sách yêu thích (Lấy, thêm, xóa Từ Firebase)
3 Hoàn thiện danh sách yêu thích với Firebase
4 Hiển thị chỉ báo tiến trình trong khi thêm sản phẩm vào danh sách yêu thích
5 Sửa lỗi trong khi lấy danh sách yêu thích
1 41- Tạo lớp model và provider cho đơn hàng
2 Triển khai phương thức đặt hàng để lưu đơn hàng trên Firebase
3 Triển khai phương thức Lấy đơn hàng
4 Lỗi đơn hàng
5 Hoàn thiện đơn hàng và hiển thị cho người dùng
1 Lưu thông tin người dùng bổ sung khi đăng nhập bằng google
1 Cải thiện giao diện màn hình chỉnh sửa sản phẩm
2 Bắt đầu lấy đơn hàng và hiển thị trong bảng quản trị
3 Tái cấu trúc widget lấy đơn hàng
4 Hiển thị thông tin đơn hàng chính xác
1 Thiết lập Stripe
2 Triển khai Stripe với Firebase
3 Sử dụng Stripe trong màn hình giỏ hàng để người dùng đặt hàng và sửa lỗi
1 Một cách tiếp cận khác để thêm vào lịch sử
2 Lấy đơn hàng chính xác cho mỗi người dùng
3 Sửa lỗi đơn hàng "Lưu tất cả sản phẩm trong giỏ hàng"
1 Mã nguồn đầy đủ
2 Mã nguồn đầy đủ - Flutter 3.16.9 - Tháng 2 2024
3 Thay đổi biểu tượng khởi chạy ứng dụng
4 Màn hình Splash gốc
5 Sau khi hoàn thành khóa học

Giới thiệu khóa học

Course prerequisites:

  • Basic knowledge in programming to get started

  • Basic understanding of Flutter and good knowledge is recommended

  • Concepts are explained clearly. You will always learn what you're building and why and how to do it.

How this course can be of help:

  • Gaining more knowledge in Flutter and Firebase with Payment integration

  • Learn how to make a shopping application simply with a web admin panel

  • A fully functional app that is ready for use and deployment

What's in the course:

  • Complex UI has done simply

  • Build a Complete mobile app With a WEB admin portal

  • State management

  • Firebase

  • Clean code and avoid Boilerplate code

  • Styles for UI

  • State Management: setState, lifting state up via callbacks, global access, scoped access with Provider and ChangeNotifier

  • Navigation & Custom navigation

  • Dart

  • Forms, input handling, and validation

  • Managing and updating packages

  • Databases and Cloud Firestore

  • ListViews and multiple UI states

  • Firebase Authentication

  • Firebase Firestore

  • Firebase Storage

  • Dart Programming Language - Fundamentals and intermediate&expert topics

  • How to understand Flutter Mobile Development by building apps incrementally.

  • How to design, build, and debug Flutter apps

  • How to get Flutter apps to communicate with a real-time database - Firestore

  • How to build robust apps with Flutter

  • Flutter AppBar

  • Flutter Material Design

  • Flutter Row and Column

  • Flutter ListView Builder

  • Payment gateway

Course structure:

approximately 17 hours of content and updated regally 

Requirements:

  • Windows application development OR Mac application development

  • Access to a computer with an internet connection.

  • and you are ready for the journey

  • Love learning about applying cutting-edge algorithms to practical cases!

What Should I Expect After this Course?:

  • The ability to build a fully functional shopping application with Firebase and payment integration

  • New information regarding Flutter

Note that the course builds on Windows, so I didn't have a chance to cover the IOS configurations! But feel free to ask anything about it. I will be there to help.


Note:

This course has 2 apps, One for the user "ANDROID app in Portrait mode", and one for the admin "WEB".

Note that the ANDROID app is responsive only in portrait mode, it doesn't support landscape mode.


The search logic is done locally, and it is only available in the Android application since it is the same logic if you want to implement in the WEB Admin Panel.

The app is available on Playstore, please consider testing it before buying the course.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Firebase
Hiển thị tất cả khoá học Flutter
Hiển thị tất cả khoá học Mobile Development
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊