آموزش Flutter Web - ساخت یک برنامه وب Diary با Flutter و Cloud Firestore [ویدئو]

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

معرفی Introduction

• مقدمه و پیش نیاز دوره Introduction and Course Prerequisites

• آنچه در این دوره خواهید ساخت What You will be Building in this Course

راه اندازی ماشین - فقط کاربران ویندوز Machine Setup - Windows Users Only

• دستگاه ویندوز خود را برای توسعه وب Flutter تنظیم کنید Set Up Your Windows Machine for Flutter Web Development

راه اندازی ماشین - فقط کاربران مک Machine Setup - Mac Users Only

• دستگاه مک خود را برای توسعه وب Flutter تنظیم کنید Set Up Your Mac Machine for Flutter Web Development

یک برنامه وب DiaryBook Flutter بسازید Build a DiaryBook Flutter Web App

• پروژه DiaryBook را راه اندازی کنید Set Up DiaryBook Project

• اضافه کردن AppBar و لوگوی DiaryBook Adding AppBar and DiaryBook Logo

• Refactoring کد صفحه اصلی Refactoring the MainPage Code

• اضافه کردن منوی کشویی Adding a DropDown Menu

• تغییر وضعیت دکمه کشویی Changing the State of the DropDown Button

• تنظیم آواتار دایره ای و خروج از AppBar Setting Up AppBar's Circular Avatar and Signout

برنامه وب DiaryBook - بدنه اصلی DiaryBook Web App - The Main Body

برنامه وب DiaryBook - بدنه اصلی DiaryBook Web App - The Main Body

• تنظیم بدنه صفحه اصلی - سمت چپ Setting Up the Main Page Body - The Left Side

• تنظیم بدنه صفحه اصلی - سمت چپ Setting Up the Main Page Body - The Left Side

• افزودن بسته DatePicker Adding a DatePicker Package

• افزودن بسته DatePicker Adding a DatePicker Package

• اضافه کردن یک دکمه کارت و یک دکمه اکشن شناور Adding a Card Button and a Floating Action Button

• اضافه کردن یک دکمه کارت و یک دکمه اکشن شناور Adding a Card Button and a Floating Action Button

• راه‌اندازی نمای فهرست مکان - سمت راست Setting Up a Placeholder Listview - Right Side

• راه‌اندازی نمای فهرست مکان - سمت راست Setting Up a Placeholder Listview - Right Side

برنامه وب DiaryBook - FirebaseAuth و Cloud Firebase Firestore DiaryBook Web App - FirebaseAuth and Cloud Firebase Firestore

برنامه وب DiaryBook - FirebaseAuth و Cloud Firebase Firestore DiaryBook Web App - FirebaseAuth and Cloud Firebase Firestore

• راه اندازی Firebase و پروژه Firestore Setting Up Firebase and Firestore Project

• راه اندازی Firebase و پروژه Firestore Setting Up Firebase and Firestore Project

• خواندن موارد از Firestor Reading Items from Firestore

• خواندن موارد از Firestor Reading Items from Firestore

• راه اندازی صفحه شروع Setting Up the Getting Started Page

• راه اندازی صفحه شروع Setting Up the Getting Started Page

• حرکت به صفحه ورود Navigating to Login Page

• حرکت به صفحه ورود Navigating to Login Page

• راه اندازی فرم ورود Setting Up the Login Form

• راه اندازی فرم ورود Setting Up the Login Form

• فرم ورود - ایجاد دکوراسیون BuildInput Login Form - Creating the BuildInput Decoration

• فرم ورود - ایجاد دکوراسیون BuildInput Login Form - Creating the BuildInput Decoration

• افزودن فیلد رمز عبور و بازسازی فرم Adding the Password Field and Refactoring the Form

• افزودن فیلد رمز عبور و بازسازی فرم Adding the Password Field and Refactoring the Form

• فرم ورود - اضافه کردن اعتبار Login Form - Adding Validation

• فرم ورود - اضافه کردن اعتبار Login Form - Adding Validation

• ورود کاربر - FirebaseAuth Login a User - FirebaseAuth

• ورود کاربر - FirebaseAuth Login a User - FirebaseAuth

• تغییر حالت ایجاد فرم حساب و فرم ورود Toggling Create Account Form and Login Form

• تغییر حالت ایجاد فرم حساب و فرم ورود Toggling Create Account Form and Login Form

• ورود کاربر و بردن آنها به صفحه اصلی Login User and Taking them to the Main Page

• ورود کاربر و بردن آنها به صفحه اصلی Login User and Taking them to the Main Page

برنامه وب DiaryBook - نمایه کاربر DiaryBook Web App - The User Profile

برنامه وب DiaryBook - نمایه کاربر DiaryBook Web App - The User Profile

• ساختار ایجاد کاربر User Creation Structure

• ساختار ایجاد کاربر User Creation Structure

• ایجاد یک کاربر و افزودن به مجموعه کاربران Firestore Crating a User and Adding to Firestore Users Collection

• ایجاد یک کاربر و افزودن به مجموعه کاربران Firestore Crating a User and Adding to Firestore Users Collection

• ایجاد کلاس داده های کاربر Creating a User Data Class

• ایجاد کلاس داده های کاربر Creating a User Data Class

• ایجاد یک کلاس سرویس و کد Refactoring - ورود برای کاربران ایجاد شده و نمایش آنها Creating a Service Class and Code Refactoring - Login Created for Users and Showing Them

• ایجاد یک کلاس سرویس و کد Refactoring - ورود برای کاربران ایجاد شده و نمایش آنها Creating a Service Class and Code Refactoring - Login Created for Users and Showing Them

• فیلتر کردن کاربران و نمایش نام ها در AppBar Filtering Users and Showing Names on AppBar

• فیلتر کردن کاربران و نمایش نام ها در AppBar Filtering Users and Showing Names on AppBar

• نمایش آواتار کاربر و تغییر رندر وب فلاتر Showing User Avatar and Changing the Flutter Web Renderer

• نمایش آواتار کاربر و تغییر رندر وب فلاتر Showing User Avatar and Changing the Flutter Web Renderer

• ایجاد کلاس CreateUserProfile Creating the CreateUserProfile Class

• ایجاد کلاس CreateUserProfile Creating the CreateUserProfile Class

• ساخت کلاس CreateUserProfile - گفتگوها و فیلدها Constructing the CreateUserProfile Class - Dialogs and Fields

• ساخت کلاس CreateUserProfile - گفتگوها و فیلدها Constructing the CreateUserProfile Class - Dialogs and Fields

• به روز رسانی نمایه کاربری Updating a User Profile

• به روز رسانی نمایه کاربری Updating a User Profile

• Code Refactor - به‌روزرسانی کلاس گفتگوی نمایه کاربر Code Refactor - Update User Profile Dialog Class

• Code Refactor - به‌روزرسانی کلاس گفتگوی نمایه کاربر Code Refactor - Update User Profile Dialog Class

• خروج از سیستم کاربر Signing User Out

• خروج از سیستم کاربر Signing User Out

برنامه وب DiaryBook - ایجاد، به روز رسانی، حذف و نمایش نوشته های خاطرات DiaryBook Web App - Creating, Updating, Deleting, and Showing Diary Entries

برنامه وب DiaryBook - ایجاد، به روز رسانی، حذف و نمایش نوشته های خاطرات DiaryBook Web App - Creating, Updating, Deleting, and Showing Diary Entries

• مقدمه - ایجاد نوشته های خاطرات Introduction - Creating Diary Entries

• مقدمه - ایجاد نوشته های خاطرات Introduction - Creating Diary Entries

• دیالوگ هشدار ورود خاطرات - اضافه کردن دو دکمه Diary Entry Alert Dialog - Adding Two Buttons

• دیالوگ هشدار ورود خاطرات - اضافه کردن دو دکمه Diary Entry Alert Dialog - Adding Two Buttons

• Diary Entry Alert Dialog - افزودن ظرف تصویر Diary Entry Alert Dialog - Adding the Image Container

• Diary Entry Alert Dialog - افزودن ظرف تصویر Diary Entry Alert Dialog - Adding the Image Container

• گفتگوی هشدار ورود خاطرات - افزودن فیلدهای متنی Diary Entry Alert Dialog - Adding TextFields

• گفتگوی هشدار ورود خاطرات - افزودن فیلدهای متنی Diary Entry Alert Dialog - Adding TextFields

• Diary Entry Alert Dialog - Refactor Code Diary Entry Alert Dialog - Refactor Code

• Diary Entry Alert Dialog - Refactor Code Diary Entry Alert Dialog - Refactor Code

• Diary Entry Alert Dialog - ذخیره یک ورودی ساختگی و افزودن انیمیشن ذخیره Diary Entry Alert Dialog - Saving a Dummy Entry and Adding Saving Animation

• Diary Entry Alert Dialog - ذخیره یک ورودی ساختگی و افزودن انیمیشن ذخیره Diary Entry Alert Dialog - Saving a Dummy Entry and Adding Saving Animation

• ایجاد کلاس مدل Diary و ذخیره خاطرات با همه فیلدها Creating the Diary Model Class and Saving the Diaries with All Fields

• ایجاد کلاس مدل Diary و ذخیره خاطرات با همه فیلدها Creating the Diary Model Class and Saving the Diaries with All Fields

• افزودن و نمایش خاطرات فیلتر شده توسط UserId Adding and Showing Filtered Diaries by UserId

• افزودن و نمایش خاطرات فیلتر شده توسط UserId Adding and Showing Filtered Diaries by UserId

• انتقال تاریخ به دیالوگ Passing the Date to the Dialog

• انتقال تاریخ به دیالوگ Passing the Date to the Dialog

• نمایش و ذخیره تاریخ همراه با ثبت خاطرات Showing and Saving the Date along with the Diary Entry

• نمایش و ذخیره تاریخ همراه با ثبت خاطرات Showing and Saving the Date along with the Diary Entry

• Refactoring کد DiaryListView ما Refactoring our DiaryListView Code

• Refactoring کد DiaryListView ما Refactoring our DiaryListView Code

برنامه وب DiaryBook - فهرست خاطرات و ذخیره تصاویر در فضای ذخیره سازی Firebase DiaryBook Web App - Diary Listview and Saving Images to Firebase Storage

برنامه وب DiaryBook - فهرست خاطرات و ذخیره تصاویر در فضای ذخیره سازی Firebase DiaryBook Web App - Diary Listview and Saving Images to Firebase Storage

• Refactoring و راه اندازی Diary Listview Card Refactoring and Setting Up the Diary Listview Card

• Refactoring و راه اندازی Diary Listview Card Refactoring and Setting Up the Diary Listview Card

• رفع مشکلات در حال گسترش و افزودن توضیحات و تصویر ساختگی به کارت Listview Fixing the Expanding Issues and Adding Description and Dummy Image to Listview Card

• رفع مشکلات در حال گسترش و افزودن توضیحات و تصویر ساختگی به کارت Listview Fixing the Expanding Issues and Adding Description and Dummy Image to Listview Card

• فرمت تاریخ - نمایش کامل تاریخ و زمان Date Format - Show Full Date and Time

• فرمت تاریخ - نمایش کامل تاریخ و زمان Date Format - Show Full Date and Time

• افزودن ImagePicker و نمایش تصویر انتخاب شده Adding an ImagePicker and Showing the Picked Image

• افزودن ImagePicker و نمایش تصویر انتخاب شده Adding an ImagePicker and Showing the Picked Image

• راه اندازی Firebase Storage و زیرساخت برای ذخیره تصاویر در Storage Setting Up Firebase Storage and the Infrastructure to Save Images to Storage

• راه اندازی Firebase Storage و زیرساخت برای ذخیره تصاویر در Storage Setting Up Firebase Storage and the Infrastructure to Save Images to Storage

• ذخیره و نمایش تصاویر از Cloud Storage Saving and Showing Images from Cloud Storage

• ذخیره و نمایش تصاویر از Cloud Storage Saving and Showing Images from Cloud Storage

• حذف یک ورودی Deleting an Entry

• حذف یک ورودی Deleting an Entry

• دیالوگ ورودی حذف ما را Refactor کنید Refactor Our Delete Entry Dialog

• دیالوگ ورودی حذف ما را Refactor کنید Refactor Our Delete Entry Dialog

• ایجاد گفتگوی ویرایش-به روز رسانی: تنظیمات عملکرد را حذف کنید Creating the Edit-Update Dialog: Delete Functionality Setup

• ایجاد گفتگوی ویرایش-به روز رسانی: تنظیمات عملکرد را حذف کنید Creating the Edit-Update Dialog: Delete Functionality Setup

• راه اندازی گفتگوی به روز رسانی جزئیات Setting Up the Update-Details Dialog

• راه اندازی گفتگوی به روز رسانی جزئیات Setting Up the Update-Details Dialog

• رفع: مشکلات سرریز و افزودن FutureDelay هنگام ذخیره تصاویر - رفع اشکال احتمالی FIX: Overflow Issues and Adding FutureDelay when Saving Images - Potential Bug Fix

• رفع: مشکلات سرریز و افزودن FutureDelay هنگام ذخیره تصاویر - رفع اشکال احتمالی FIX: Overflow Issues and Adding FutureDelay when Saving Images - Potential Bug Fix

• تغییر شکل کارت لیست Refactoring the List Card

• تغییر شکل کارت لیست Refactoring the List Card

برنامه وب DiaryBook - گفتگوی به‌روزرسانی را تنظیم کنید DiaryBook Web App - Set Up the Update Dialog

برنامه وب DiaryBook - گفتگوی به‌روزرسانی را تنظیم کنید DiaryBook Web App - Set Up the Update Dialog

• تنظیم گفتگوی ورودی به‌روزرسانی Setting Up the Update Entry Dialog

• تنظیم گفتگوی ورودی به‌روزرسانی Setting Up the Update Entry Dialog

• گفتگوی به روز رسانی - اضافه کردن آیکون ها و تصویر Update Dialog - Adding Icons and Image

• گفتگوی به روز رسانی - اضافه کردن آیکون ها و تصویر Update Dialog - Adding Icons and Image

• گفتگوی به‌روزرسانی - ایجاد فیلدها و کشیدن داده‌های خاطرات Update Dialog - Creating Fields and Pulling in the Diary Data

• گفتگوی به‌روزرسانی - ایجاد فیلدها و کشیدن داده‌های خاطرات Update Dialog - Creating Fields and Pulling in the Diary Data

• به روز رسانی دیالوگ - کد Refactoring Update Dialog - Refactoring Code

• به روز رسانی دیالوگ - کد Refactoring Update Dialog - Refactoring Code

• گفتگوی به‌روزرسانی - تنظیم دکمه‌های انتخابگر و حذف تصویر Update Dialog - Setting Up the Image Picker and Delete Buttons

• گفتگوی به‌روزرسانی - تنظیم دکمه‌های انتخابگر و حذف تصویر Update Dialog - Setting Up the Image Picker and Delete Buttons

• گفتگوی به روز رسانی - تنظیم کد به روز رسانی Update Dialog - Setting Up the Update Code

• گفتگوی به روز رسانی - تنظیم کد به روز رسانی Update Dialog - Setting Up the Update Code

• رفع برخی از مشکلات پوچ Fixing Some Null Issues

• رفع برخی از مشکلات پوچ Fixing Some Null Issues

• ارسال یک ویجت به عنوان پارامتر Passing a Widget as Parameter

• ارسال یک ویجت به عنوان پارامتر Passing a Widget as Parameter

برنامه وب DiaryBook - فیلتر کردن ورودی ها بر اساس تاریخ و به روز رسانی ListView DiaryBook Web App - Filtering Entries by Date and Updating the ListView

برنامه وب DiaryBook - فیلتر کردن ورودی ها بر اساس تاریخ و به روز رسانی ListView DiaryBook Web App - Filtering Entries by Date and Updating the ListView

• فیلتر کردن ورودی ها بر اساس تاریخ Filtering Entries by Date

• فیلتر کردن ورودی ها بر اساس تاریخ Filtering Entries by Date

• راه اندازی روش GetSameDayDiaries Setting Up the GetSameDayDiaries Method

• راه اندازی روش GetSameDayDiaries Setting Up the GetSameDayDiaries Method

• نمایه سازی پایگاه داده Firestore و بررسی اینکه آیا ورودی ها را فیلتر می کنیم Indexing Firestore Database and Checking that We are Filtering Entries

• نمایه سازی پایگاه داده Firestore و بررسی اینکه آیا ورودی ها را فیلتر می کنیم Indexing Firestore Database and Checking that We are Filtering Entries

• تنظیم فهرستی از خاطرات Setting Up a List of Diaries

• تنظیم فهرستی از خاطرات Setting Up a List of Diaries

• نمایش خاطرات فیلتر شده بر اساس تاریخ انتخاب Showing Filtered Diaries by Date Picked

• نمایش خاطرات فیلتر شده بر اساس تاریخ انتخاب Showing Filtered Diaries by Date Picked

• بازسازی دفتر خاطرات فیلتر شده برای نمایش و نمایش کارت خاطرات خالی Restructuring the Filtered Diaries to be Shown and Showing the Empty Diary Card

• بازسازی دفتر خاطرات فیلتر شده برای نمایش و نمایش کارت خاطرات خالی Restructuring the Filtered Diaries to be Shown and Showing the Empty Diary Card

• افزودن همه ورودی ها به یک شی ارائه دهنده Adding All Entries to a Provider Object

• افزودن همه ورودی ها به یک شی ارائه دهنده Adding All Entries to a Provider Object

• فیلتر کردن DiaryList بر اساس کاربر فعلی و اضافه کردن یک ارائه دهنده کاربر Filtering DiaryList by Current User and Adding a User Provider

• فیلتر کردن DiaryList بر اساس کاربر فعلی و اضافه کردن یک ارائه دهنده کاربر Filtering DiaryList by Current User and Adding a User Provider

برنامه وب DiaryBook - فیلتر کردن نوشته های خاطرات بیشتر - اولین و جدیدترین DiaryBook Web App - Filtering Diary Entries Further - Earliest and Latest

برنامه وب DiaryBook - فیلتر کردن نوشته های خاطرات بیشتر - اولین و جدیدترین DiaryBook Web App - Filtering Diary Entries Further - Earliest and Latest

• فیلتر کردن نوشته های خاطرات بیشتر - قدیمی ترین و جدیدترین Filtering Diary Entries Further - Earliest and Latest

• فیلتر کردن نوشته های خاطرات بیشتر - قدیمی ترین و جدیدترین Filtering Diary Entries Further - Earliest and Latest

• فیلتر کردن بر اساس آخرین و اولین خاطرات اضافه شده Filtering by Latest and Earliest Added Diaries

• فیلتر کردن بر اساس آخرین و اولین خاطرات اضافه شده Filtering by Latest and Earliest Added Diaries

• افزودن onPress به FAB Adding onPress to FAB

• افزودن onPress به FAB Adding onPress to FAB

• افزودن یک انیمیشن تاخیری به لیست ویو Adding a Delayed Animation to the Listview

• افزودن یک انیمیشن تاخیری به لیست ویو Adding a Delayed Animation to the Listview

برنامه وب DiaryBook - مسیریابی پیشرفته DiaryBook Web App - Advanced Routing

برنامه وب DiaryBook - مسیریابی پیشرفته DiaryBook Web App - Advanced Routing

• مسیریابی پیشرفته Advanced Routing

• مسیریابی پیشرفته Advanced Routing

• صفحه یافت نشد و تغییر ساختار مسیریابی Page Not Found and Restructuring Routing

• صفحه یافت نشد و تغییر ساختار مسیریابی Page Not Found and Restructuring Routing

• اظهارات پایانی Final Remarks

• اظهارات پایانی Final Remarks

استقرار برنامه وب در میزبانی Firebase Deploying the Web App to Firebase Hosting

استقرار برنامه وب در میزبانی Firebase Deploying the Web App to Firebase Hosting

• راه اندازی CLI - دستورالعمل ها CLI Setup - Instructions

• راه اندازی CLI - دستورالعمل ها CLI Setup - Instructions

• استقرار برنامه وب در میزبانی Firebase Deploying the Web App to Firebase Hosting

• استقرار برنامه وب در میزبانی Firebase Deploying the Web App to Firebase Hosting