آموزش Flutter 1.2 با برنامه فروشگاه Firebase&Stripe Build از ابتدا

سرفصل ها و درس ها

معرفی Introduction

• من کی هستم؟ و چرا این دوره؟ Who am I? And why this course?

• نمای کلی برنامه App overview

• چیزی را روشن کنید Clarify something

• بهترین مزایای این دوره را دریافت کنید Get the most benefit of this course

• با اتمام این دوره چه مزایایی خواهید داشت؟ What benefits will you get once you finish this course?

• کانال یوتیوب YouTube channel

• فلوتر؟ کیت کمکی بال زدن Flutterer ? Flutter helper kit

مقدمه - DONT SKIP Introduction - DONT SKIP

• نکته مهم Important note

• بهترین قیمت برای دوره Best price for the course

• من کی هستم؟ و چرا این دوره؟ Who am I? And why this course?

• Flutter 3.0 & Firebase با پنل مدیریت یک برنامه خواربار فروشی بسازید Flutter 3.0&Firebase Build a grocery app with Admin Panel

• نمای کلی برنامه App overview

• ایمنی تهی پروژه "MUST READ" با استفاده از 1.23 SDK انجام می شود NULL SAFETY "MUST READ" Project is done using 1.23 SDK

• با ایمنی پوچ مقابله کنید و در مورد الزامات صحبت کنید Deal with null safety, and talk about the requirements

• نحوه استفاده از ایمنی پوچ را با مثال توضیح دهید Explain how to use null safety with examples

• ***حتما بخوانید*** ***MUST READ***

• مواردی که با توجه به درخواست دانشجویان اضافه کردم Things that I added according to the students requests

• یه چیزی رو روشن کن Clarify something

• از این دوره بیشترین بهره را ببرید Get the most benefit of this course

• پس از اتمام این دوره چه مزایایی به دست خواهید آورد؟ What benefits will you get once you finish this course?

• کانال یوتیوب YouTube channel

• کیت کمکی فلوتر Flutter helper kit

• Stripe اضافه شد و برنامه را در پلی استور پیدا کنید Stripe added, and find the app on playstore

• حساب های اجتماعی برای رسیدن به من SOCIAL ACCOUNTS TO REACH ME

کدگذاری را شروع کنید Start Coding

• یک نوار پایین خالی ایجاد کنید Create a notched bottom bar

• استفاده از آیکون های سفارشی Usage of custom icons

• طراحی صفحه اطلاعات و تنظیمات کاربر را ایجاد کنید Build the user info and settings screen design

• بازیافت کد در صفحه اطلاعات کاربر Code recycling in the user info screen

• یک کاشی سوئیچ در صفحه اطلاعات کاربر اضافه کنید Add a switch tile in the user info screen

• یک نوار برنامه sliver را اجرا کنید Implement a sliver app-bar

• با افزودن یک دکمه متحرک FloatingActionBot در صفحه کاربر ، بهبود طراحی کنید Design improvement by adding an animated FloatingActionButton in the User screen

• یک تم تاریک/روشن به برنامه اضافه کنید Add a Dark/Light theme to the app

• با استفاده از موارد برگزیده مشترک ، حالت تم را ذخیره کنید Save theme state using shared prefs

• طراحی صفحه نمایش چرخ دستی خالی کاربر را پیاده سازی کنید Implement the user empty cart screen design

• طراحی صفحه نمایش کامل سبد خرید را از کاربر پیاده سازی کنید Implement the user Full cart screen design

• قسمت App Bar و Checkout را در صفحه سبد خرید ایجاد کنید Build the App Bar and checkout section in the cart screen

• بهبودهای بیشتر طراحی در صفحه سبد خرید More design improvements in the cart screen

• اجرای صفحه نمایش فیدهای محصولات را شروع کنید. (ایجاد طرح شکل فیدها) Start implementing the products feeds screen. (Create the feeds shape design)

• یک GridView را در صفحه خوراک پیاده سازی کنید Implement a GridView in the Feeds screen

• به جای نمایش گرید معمولی ، یک نمایش متغیر Grid View را در صفحه های Feed پیاده سازی کنید Implement a staggered Grid View in Feeds screen instead of a normal Grid View

• پیشرفت های بیشتر در طراحی در صفحه اطلاعات کاربر More design improvements in the User info screen

• تغییرات بیشتر در صفحه اطلاعات کاربر More changes in the user info screen

• نشان طراحی محصولات را در صفحه Feeds اضافه کنید Add the a badge for the products design in the Feeds screen

• نشان را با استفاده از ابزارک مستقر تراز کنید Align the badge using the positioned widget

• طرح پس زمینه را در صفحه اصلی اضافه کنید Add a backdrop layout in the home screen

• یک ابزارک چرخ فلک در صفحه اصلی اضافه کنید Add a Carousel widget in the Home screen

• ابزارک Swiper را در صفحه اصلی اضافه کنید Add a Swiper widget in the Home screen

• طراحی ابزارک دسته را ایجاد کنید Create the Category widget design

• طراحی ویجت موارد محبوب را در صفحه اصلی ایجاد کنید Create the popular items widget design in the Home screen

• ویجت ریل ناوبری را برای ایجاد نام تجاری صفحه داخلی با استفاده از معرفی کنید Introduce the navigation rail widget to Create the brand Inner screen using

• طرح لایه پشتی را ایجاد کنید Create the backdrop back-layer design

• طراحی صفحه Wishlist خالی کاربر را پیاده سازی کنید Implement the user empty Wishlist screen design

• طراحی صفحه نمایش لیست دلخواه کاربر را اجرا کنید Implement the user Full Wishlist screen design

• کد کامل تا الان Full code until now

• UI صفحه نمایش جزئیات محصول را پیاده سازی کنید Implement the Product details screen UI

• کلاس مدل Product را ایجاد کنید Create the Product model class

• برای نمایش محصولات مختلف در صفحه خبرخوان از داده های پویا استفاده کنید Use dynamic data to show different products in the Feeds screen

شروع به کدنویسی کنید - باید مقالات را بخوانید Start Coding - MUST READ THE ARTICLES

• نکته مهم در مورد دسترسی به دوره و بازخورد Important Note on Course Access and Feedback

• جهت دستگاه را قفل کنید lock device orientation

• *باید بخوانید* به روز رسانی سخنرانی نوار پایین *MUST READ* Bottom bar lecture Update

• سخنرانی در سخنرانی 15 بازیافت شده است یک نوار پایین بریده ایجاد کنید Lecture has been recycled in lecture 15 Create a notched bottom bar

• توضیح عمیق صفحه نوار پایینی (پس از انتشار اضافه شد) Deep explanation of the bottom Bar screen (Added after publishing)

• نوار پایین با ایمنی پوچ Bottom bar with null safety

• عنوان منسوخ شده را در نوار پایین ویرایش کنید Edit deprecated title in the bottom bar

• به روز رسانی آیکون های سفارشی Custom Icons update

• استفاده از آیکون های سفارشی Usage of custom icons

• طراحی صفحه نمایش اطلاعات و تنظیمات کاربر را بسازید Build the user info and settings screen design

• بازیافت کد و ترفندهای بیشتر (پس از انتشار اضافه شد) Code recycling and more tricks ( Added after publishing)

• با استفاده از 2 روش مختلف یک کاشی سوئیچ اضافه کنید (پس از انتشار دوره اضافه شد) Add a switch tile using 2 different ways ( Added after publishing the course )

• ** مهم ** به روز رسانی نوار برنامه سخنرانی Sliver **IMPORTANT** Sliver appbar lecture Update

• یک نوار برنامه تکه ای را پیاده سازی کنید Implement a sliver app-bar

• اضافه کردن متحرک FloatingActionButton Add animated FloatingActionButton

• Sliver appBar کد نوشتن از ابتدا با توضیح دقیق Sliver appBar writing code from the beginning with detailed explanation

• بازیافت سخنرانی Sliver AppBar (اضافه شده پس از انتشار دوره باید تماشا کنید) Sliver AppBar lecture recycling (Added after publishing the course MUST WATCH)

• نوار برنامه تکه‌ای با ایمنی پوچ Sliver appbar with null safety

• به روز رسانی موضوع سخنرانی Theme lecture update

• یک تم تیره/روشن به برنامه اضافه کنید Add a Dark/Light theme to the app

• ذخیره وضعیت طرح زمینه با استفاده از پیش فرض های مشترک Save theme state using shared prefs

• طراحی صفحه نمایش سبد خرید خالی کاربر را پیاده سازی کنید Implement the user empty cart screen design

• طراحی صفحه نمایش کامل سبد خرید کاربر را پیاده سازی کنید Implement the user Full cart screen design

• نوار برنامه و بخش پرداخت را در صفحه سبد خرید بسازید Build the App Bar and checkout section in the cart screen

• بهبود طراحی بیشتر در صفحه سبد خرید More design improvements in the cart screen

• اجرای صفحه فید محصولات را شروع کنید. (طرح شکل فیدها را ایجاد کنید) Start implementing the products feeds screen. (Create the feeds shape design)

• یک GridView را در صفحه Feeds پیاده سازی کنید Implement a GridView in the Feeds screen

• به‌جای نمای شبکه‌ای معمولی، یک نمای شبکه‌ای پلکانی را در صفحه فیدها اجرا کنید Implement a staggered Grid View in Feeds screen instead of a normal Grid View

• بهبود طراحی بیشتر در صفحه اطلاعات کاربر More design improvements in the User info screen

• تغییرات بیشتر در صفحه اطلاعات کاربر More changes in the user info screen

• یک نشان برای طراحی محصولات در صفحه Feeds اضافه کنید Add the a badge for the products design in the Feeds screen

• نشان را با استفاده از ویجت قرار داده شده تراز کنید Align the badge using the positioned widget

• یک طرح پس زمینه در صفحه اصلی اضافه کنید Add a backdrop layout in the home screen

• به روز رسانی چرخ فلک و سوایپر Carousel and Swipper update

• یک ویجت چرخ فلک را در صفحه اصلی اضافه کنید Add a Carousel widget in the Home screen

• یک ویجت Swiper را در صفحه اصلی اضافه کنید Add a Swiper widget in the Home screen

• طراحی ویجت دسته را ایجاد کنید Create the Category widget design

• طراحی ویجت موارد محبوب را در صفحه اصلی ایجاد کنید Create the popular items widget design in the Home screen

• ویجت راه آهن ناوبری را برای ایجاد صفحه نمایش داخلی با نام تجاری با استفاده از آن معرفی کنید Introduce the navigation rail widget to Create the brand Inner screen using

• طراحی لایه پشتی پس زمینه را ایجاد کنید Create the backdrop back-layer design

• طراحی صفحه نمایش لیست خواسته های خالی کاربر را پیاده سازی کنید Implement the user empty Wishlist screen design

• طراحی صفحه نمایش لیست کامل خواسته های کاربر را پیاده سازی کنید Implement the user Full Wishlist screen design

• کد کامل تا الان Full code until now

• رابط کاربری صفحه جزئیات محصول را پیاده سازی کنید Implement the Product details screen UI

• کلاس مدل Product را ایجاد کنید Create the Product model class

• از داده های پویا برای نمایش محصولات مختلف در صفحه فیدها استفاده کنید Use dynamic data to show different products in the Feeds screen

مدیریت دولتی State management

• چرا ما به مدیریت دولتی نیاز داریم؟ Why do we need state management?

• کلاس ارائه دهنده محصولات را ایجاد کنید Create the products provider class

• بهبود کد به جای تزریق وابستگی Code improvement instead of dependency injection

• محصولات را با توجه به دسته بندی آنها در ابزارک دسته صفحه اصلی نمایش دهید Display products according to their categories in the home screen category widgt

• خطای تهی ایمنی NULL SAFETY ERROR

• مدیریت دولت دسته ها را نهایی کنید Finalize the categories state management

• محصولات را با توجه به مارک آنها در ویجت مارک های صفحه اصلی نمایش دهید Display products according to their Brand in the home screen Brands widget

• فقط محصولات محبوب را در صفحه اصلی نمایش دهید Display only popular products in the Home screen

• در حال اتمام صفحه جزئیات محصولات Finishing up the products details screen

• مشاهده همه مارک ها در صفحه اصلی Handling view all brands in the Home screen

• مشاهده همه محصولات محبوب در صفحه اصلی Handle view all popular products in the Home screen

مدیریت دولت سبد خرید Cart state management

• کلاس مدل سبد خرید ایجاد کنید Create a cart model class

• کلاس ارائه دهنده سبد خرید را پیاده سازی کنید Implement the cart provider class

• روش افزودن به سبد خرید را در جایی ایجاد کنید که کاربران بتوانند محصولات را به سبد خرید خود اضافه کنند Create add to cart method where users will be able to add products to their cart

• استفاده از تزریق وابستگی برای سبد خرید (انتقال داده ها از طریق سازنده) Using the dependency injection for the cart (passing data through constructor)

• اگر کالایی در سبد خرید یافت شد نشان دهید و اگر پیدا شد دکمه افزودن به سبد را غیرفعال کنید. Show if the product is found in cart and disable add to cart button if found.

• به جای تزریق وابستگی از ارائه دهنده مدل سبد خرید استفاده کنید Use the cart model provider instead of dependency injection

• به کاربر اجازه دهید از طریق ابزارک محصولات محبوب به سبد خرید خود اضافه کند Allow the user to add to their cart from the popular products widget

• به کاربر اجازه دهید مقدار محصولات را در سبد خرید تغییر دهد Allow user to change the products quantity in the cart

• به کاربر اجازه دهید یک محصول را از سبد خرید خود حذف کرده و آن را پاک کند Allow the user to delete one product from his cart and clear it

• نمایش قیمت کل در صفحه سبد خرید Show total price in the cart screen

• یک روش گفتگوی هشدار پویا ایجاد کنید Create a dynamic alert dialog method

مدیریت دولتی لیست علاقه مندی ها Wishlist state management

• مدیریت دولتی لیست علاقه مندی ها Wishlist state management

• رنگ نماد را در ابزارک محصولات محبوب ویرایش کنید Edit the icon color in the popular products widget

UI و پیشرفت های بیشتر More UI and improvements

• یک نشان برای لیست خواسته ها و سبد خرید اضافه کنید Add a badge for the Wishlist and the Cart

• یک appBar برای صفحه Feeds اضافه کنید Add an appBar for the Feeds screen

• گفتگوی محصولات را در صفحه خبرمایه ایجاد کنید Make the products dialogs in the feeds screen

• جزئیات محصول را به جای داده های ساختگی در گفتگوی Feeds نشان دهید Show the product details in the Feeds dialog instead of dummy data

• UI و Logic صفحه جستجو را پیاده سازی کنید Implement the search screen UI and Logic

• قسمت Landing page 1 را ایجاد کنید Create a Landing page part 1

• صفحه Landing قسمت 2 را ایجاد کنید Create the Landing page part 2

• صفحه ورود را پیاده سازی کنید Implement the Login screen

• برای ذخیره فرم ، روش ارسال فرم را اضافه کنید Add the submit form method to save the form

• صفحه ثبت نام را پیاده سازی کنید Implement the Signup screen

• ابزارک برتر را در صفحه ثبت نام پیاده سازی کنید (ابزارک پیش نمایش نمایه) Implement the top widget in the sign up screen (Profile preview widget)

• به کاربر اجازه می دهد تا تصویری را انتخاب کند Allow the user to pick up an image

• به کاربر اجازه دهید از صفحه فرود به صفحه اصلی برنامه حرکت کند Allow the user to navigate From the landing page to the main screen in the app

• صفحه آپلود محصول جدید را اجرا کنید Implement the Upload a new product screen

• به کاربر اجازه دهید برای رفتن به صفحه آپلود محصول، انگشت خود را به سمت چپ بکشد Allow the user to swipe to the left to navigate Into the upload a product screen

Firebase Firebase

• برنامه ما را به Firebase وصل کنید Connect our app to Firebase

• امکان ثبت نام کاربران با استفاده از ایمیل و رمز عبور قسمت (1) Allow the users to register using Email and Password part (1)

• امکان ثبت نام کاربران با استفاده از ایمیل و رمز عبور قسمت (2) Allow the users to register using Email and Password part (2)

• رسیدگی به خطا Error Handling

• به کاربران اجازه ورود به سیستم را بدهید Allow the users to login

• نمایش صفحه های مختلف بسته به کاربرانی که وارد شده اند یا نه Show different screens depending on the users if logged in or not

• روش خروج از سیستم را اجرا کنید Implement the sign out method

• ورود به سیستم گوگل Google Sign In

• مدیریت خطای ورود به سیستم Google Google Sign In error handling

• Firebase Firestore چیست و چگونه کار می کند؟ What is Firebase Firestore and how does it works?

• اطلاعات کاربر اضافی را در Firebase Firestore آپلود کنید Upload extra user data to the Firebase Firestore

• تصویر را در Firebase Storage آپلود کنید و پیوند آن را به Firestore اضافه کنید Upload image to Firebase Storage, And add its link to the Firestore

• اطلاعات کاربر را از Firestore واکشی کنید Fetch user info from the Firestore

• نمایش اطلاعات روی صفحه و رسیدگی به خطاها Display the information on the screen and handle errors

• به جای Firestore، نام نمایشی و URL عکس را از کاربر دریافت کنید Get the display name and the photo URL from the user instead of the Firestore

• به کاربران اجازه دهید به صورت ناشناس وارد سیستم شوند Allow the users to sign in anonymously

• اطلاعات کاربر را در Firestore در ورود به سیستم گوگل ذخیره کنید Save user info to the Firestore on google sign in

• محصولات را در Firestore آپلود کنید Upload products to the Firestore

• محصولات را از Firestore واکشی کنید و آن را نمایش دهید. Fetch products from the Firestore and display it.

• برای اینکه کاربر بتواند رمز عبور خود را بازنشانی کند، صفحه فراموشی رمز عبور را پیاده سازی کنید Implement Forget password screen to allow the user to reset his password

• رفع خطای ایجاد شده توسط محصولات پیشنهادی (خطای شاخص محدوده) Fix an error that is being made by the suggested products (Range index Error)

درگاه پرداخت خطی Stripe payment gateway

• Stripe deprecated به جای آن از این آموزش استفاده کنید! Stripe deprecated use this tutorial instead!

• با درگاه پرداخت راه راه شروع کنید Get start with stripe payment gateway

• ادغام راه راه Stripe integration

اجرای سفارشات Orders implementation

• اجرای طراحی سفارشات Implement the orders design

• کلاس مدل سفارشات ایجاد کنید Create orders model class

• سفارشات کاربر را در Firestore آپلود کنید Upload the user orders to the Firestore

• هنگام ثبت سفارش، خطا را برطرف کنید Fix an error while placing an order

• ارائه دهنده سفارشات را ایجاد کنید Create the orders provider

• واکشی سفارشات و نمایش آن بر روی صفحه با استفاده از FutureBuilder Fetching the orders and display it on the screen using FutureBuilder

• واکشی فقط سفارشات خبرنگار برای هر کاربر Fetch only correspondent orders for each user

• بسته به اینکه آیا سفارشی در Firestore وجود دارد، صفحه متفاوتی را نشان دهید Show different screen depending if there is any order in the Firestore

• به کاربران اجازه دهید از سفارشات خود حذف کنند Allow the users to delete from their orders

• فقط در صورت موفقیت آمیز بودن تراکنش، سفارش دهید Place an order only if the transaction is successful

رفع می کند Fixes

• محصولات خالی در مارک ها و دسته بندی را مدیریت کنید Handle empty products in the brands and the category

• حالت تاریک تم را برطرف کنید Fix the dark theme state

• یک نشانگر تازه‌سازی در صفحه فیدها اضافه کنید Add a refresh indicator in the feeds screen

محتویات جایزه Bonus contents

• محتویات جایزه Bonus contents

• پس از اتمام دوره Upon finishing the course