آموزش راهنمای کامل Flutter 2024: ساخت برنامه های اندروید، iOS و وب

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

معرفی Introduction

• فلاتر چیست؟ What is Flutter?

• ساختن اپلیکیشن با فلاتر چقدر آسان است؟ How easy is it to create an app with Flutter?

• Google Flutter دقیقا چگونه کار می کند؟ How exactly Google Flutter works?

• چگونه برجسته شویم؟ How to stand out?

راه اندازی و نصب فلاتر Flutter Setup and Installation

• نصب جاوا (ویندوز) Install Java (Windows)

• نصب Git (ویندوز) Install Git (Windows)

• نصب فلاتر (ویندوز) Install Flutter (Windows)

• اندروید استودیو برای فلاتر (ویندوز) را نصب کنید Install Android Studio for Flutter (Windows)

• شبیه ساز/تنظیم دستگاه فیزیکی Emulator/Physical device setup

• مجوزهای اندروید (ویندوز) Android licenses (Windows)

• نصب Firebase برای Flutter (ویندوز) Firebase installation for Flutter (Windows)

• اشکال نصب Firebase Firebase installation bug

• راه اندازی برنامه توسعه دسکتاپ برای ویندوز (اختیاری) Desktop app Development Setup for windows (Optional)

• نصب کامل Flutter Mac Flutter Mac complete installation

• اشکالات Bugs

• خطاهای ویرایش Editing errors

برنامه My Dashatar - با اصول اولیه شروع کنید تا اولین برنامه Flutter خود را ایجاد کنید My Dashatar app - Start with the basics to create your First Flutter App

• اهداف Goals

• ایجاد اپلیکیشن فلاتر - 1 Creating Flutter app - 1

• ایجاد برنامه فلاتر - 2 Creating Flutter app - 2

• برنامه نویسی My Dashatar با Flutter قسمت 1 Coding My Dashatar App with Flutter part 1

• خلاصه فلاتر. Summary Flutter.

• افزودن تصاویر [Coding My Dashatar App with Flutter Part 2] Adding images [Coding My Dashatar App with Flutter part 2]

• تغییر آیکون Flutter Launcher روش جدید. Change Flutter Launcher Icon New method.

• تغییر نماد راه‌انداز [کدگذاری برنامه داشاتار من با فلوتر قسمت 3] Changing launcher Icon [Coding My Dashatar App with Flutter part 3]

• باز کردن یک صفحه جدید رفع اشکال Opening a new page bug fix

• رفع اشکالات فلوتر Flutter Bugs FIx

• من را استخدام کن! Hire me!

چالش نینجا 1 Ninja Challenge 1

• چالش چیست؟ What is the challenge?

• راه حل چالش Solution to the challenge

• رفع اشکال Bug Fix

برنامه داشاتار من - درک عمیق طرح‌بندی‌های فلاتر My Dashatar App - Understanding Flutter layouts in depth

• مقدمه و تنظیمات شبیه ساز Introduction and emulator settings

• بارگذاری مجدد داغ در مقابل راه اندازی مجدد داغ Hot reload vs Hot restart

• ویجت های Flutter List و Column Flutter List and Column widgets

• سطرها و ستون ها Rows and Columns

• ListView و SingleChildScrollView ListView and SingleChildScrollView

• ویجت‌های Flutter Wrap و Stack Flutter Wrap and Stack widgets

• رفع اشکال Bug fix

برنامه نویسی دارت Dart Programming

• برنامه نویسی شی گرا با دارت Object oriented programming with Dart

• کلاس ها، اشیاء و "سلام جهان" Classes, objects and "Hello World"

• فراخوانی یک متغیر با استفاده از یک شی برای برنامه نویسی دارت Calling a variable using an object for Dart programming

• نوع برگشتی روش/تابع || برنامه نویسی دارت Return type method/function || Dart programming

• سازندگان Constructors

• فراخوانی یک تابع Invoking a function

• اعداد زوج را بررسی کنید Check for even numbers

• مستندسازی برای حلقه‌ها، فهرست‌ها و تصمیم‌گیری. Documentation for loops, lists, and decision making.

• کلیدواژه‌های فلاتر: «دیر»، «تداوم»، «نهایی» Flutter Keywords: 'late' , 'const', 'final'

• حلقه ها و لیست های دارت Dart Loops and Lists

• باز کردن رمز و راز نقشه ها در دارت: راهنمای دوستانه Unlocking the Mysteries of Maps in Dart: A Friendly Guide

• به نقشه‌های برنامه‌نویسی دارت و Google Flutter عمیق بروید Deep dive into Maps for Dart programming & Google Flutter

• پیمایش امنیت پوچ در دارت: راهنمای مکالمه Navigating Null Safety in Dart: A Conversational Guide

• مجموعه چالش ها 1 Challenges set 1

• مجموعه چالش ها 2 Challenges set 2

• درج و حذف برای لیست پیوند: جاوا، دارت در دسترس نیست. Insertion and deletion for a Linklist: Java, Dart Unavailable.

مدیریت دولتی - مبانی State management - Basics

• ویجت های Stateful در مقابل بدون تابعیت Stateful vs Stateless widgets

• خلاصه ابزارک فلاتر Flutter Widgets Summary

• مدیریت دولتی در عمل State management in action

• بسته پخش کننده های صوتی AudioPlayers package

• نواختن بیت ها Playing the beats

• امتحان Quiz

چالش نینجا 2 - برنامه Launchpad Ninja challenge 2 - Launchpad app

• اشکالات فلاتر Flutter Bugs

• مشکل The problem

• راه حل - مقدمه Solution - Introduction

• تزیینات فلاتر لانچ پد Flutter LaunchPad decorations

• اضافه کردن تاخیر و پخش صدا Adding delay and playing audio

• اضافه کردن مسیر صدا Adding sound path

چیدمان ها، ژست ها و انیمیشن ها: وب سایت صفحه فرود [ نمونه کارها ] Layouts, Gesture and animations: Landing Page Web [ Portfolio ]

• هدف این ماژول Goal of this module

• نکات! بشکن و بساز Tips! Break and build

• ایجاد یک پروژه فلاتر جدید Creating a new Flutter project

• تغییر آیکون های برنامه Flutter Changing Flutter app icons

• سفارشی سازی نماد برنامه Flutter Flutter App icon customization

• Flutter web Change icon/Favicon Flutter web Change icon/Favicon

• کدنویسی main.dart Coding main.dart

• تجزیه و تحلیل فلاتر.yaml || لینتر Flutter analysis.yaml || Linters

• Flutter const vs final Flutter const vs final

• ویجت منطقه فلوتر ماوس Flutter mouse region widget

• CircleAvatar CircleAvatar

• ویجت پد فلوتر Flutter padding widget

• sansBold sansBold

• جزئیات تماس Contact details

• بخش درباره About section

• بخش سوم Third section

• تزیین کارت برای فلاتر Decorating the card for Flutter

• اضافه کردن کارت های بیشتر Adding more cards

• با من تماس بگیر Contact me

• Flutter TextFormFields Flutter TextFormFields

• ساخت ویجت بدون حالت Making a stateless widget

• Flutter TextFormFields Flutter TextFormFields

• کاوش در خواص جدید Exploring new properties

• فلاتر RegExp Flutter RegExp

• نحوه اعتبارسنجی متن در Flutter TextFormFields How to validate the text in Flutter TextFormFields

• اعداد صحیح و دوتایی Integers and double

• انیمیشن های فلاتر Flutter Animations

• استفاده عملی از Flutter AnimationController Practical use of Flutter AnimationController

• کارت های متحرک فلاتر Flutter animated cards

• نحوه میزبانی برنامه وب flutter خود در میزبانی Firebase (راه آسان) How to host your flutter web app on Firebase hosting (Easy way)

• ایجاد یک پروژه در Firebase برای Flutter Creating a project in Firebase for Flutter

• کاوش بیشتر Firebase Further exploring Firebase

• دارایی تصویر Flutter SVG Flutter SVG Image Asset

• افزودن رسانه های اجتماعی Adding social media

• طراحی وب اپلیکیشن Designing the web app

• Async، انتظار و توابع - قسمت 1 Async, await and functions - part 1

• Async، انتظار و توابع - قسمت 2 Async, await and functions - part 2

ناوبری در فلاتر Navigation in Flutter

• ناوبری فلوتر: راه اول Flutter Navigation: First way

• Flutter Navigation: راه دوم Flutter Navigation: Second way

• Flutter Navigation: راه سوم Flutter Navigation: Third way

• Flutter Navigation: Routes Part 1 Flutter Navigation: Routes part 1

• Flutter Navigation: Routes Part 2 Flutter Navigation: Routes part 2

• فلاتر برو روتر Flutter go router

صفحه فرود موبایل - نمونه کارها فلوتر Mobile Landing Page - Flutter Portfolio

• مسیرهای فلوتر برای طراحی واکنشگرا Flutter Routes for responsive design

• اضافه کردن AppBar Adding AppBar

• فلاتر کشو Flutter Drawer

• Flutter Tabs سفارشی موبایل Custom Flutter Tabs mobile

• راه‌انداز URL Flutter: دکمه پیوند رسانه‌های اجتماعی Flutter URL launcher : Social media link button

• افزودن آواتار دایره Adding circle avatar

• افزودن TextEditingController به برنامه Flutter Adding TextEditingController to Flutter app

• افزودن TextEditingController به برنامه Flutter 2 Adding TextEditingController to Flutter app 2

• بخش درباره About section

• بخش تجربه Experience section

• بخش تماس Contact section

• ناوبری ها Navigations

صفحه تماس - [ نمونه کارها فلاتر ] Contact Page - [ Flutter Portfolio ]

• مسیرها و پیوندها Routes and links

• Sliver AppBar Sliver AppBar

• Tabs Web Tabs Web

• Flutter Web: CanvasKit در مقابل HTML Flutter Web : CanvasKit vs HTML

• اضافه کردن TextForms Adding TextForms

• با نمای موبایل تماس بگیرید Contact Mobile View

• موبایل SliverAppBar SliverAppBar mobile

• فرم متن موبایل Text Form Mobile

درباره صفحه - نمونه کارها فلاتر About Page - Flutter Portfolio

• AppBar و کشو AppBar and Drawer

• بخش مقدمه Introduction section

• بخش Back-End Back-End section

• درباره وب About Web

• درباره من وب بخش اول About me First section web

• پایان دادن به صفحه درباره Ending the About page

صفحه وبلاگ و آثار - نمونه کارها فلاتر Blog and Works Page - Flutter Portfolio

• ایجاد مسیرها و اضافه کردن کشو Creating Routes and adding Drawer

• ویجت های متن سفارشی Custom Text widgets

• نوار برنامه برش Sliver appBar

• ویجت پست وبلاگ Blog Post widget

• پست وبلاگ 2 Blog Post 2

• پست وبلاگ 3 Blog Post 3

• بازاندیشی در طراحی Re-thinking the design

• نوار برنامه کار می کند Works appBar

• نمایش اپلیکیشن ها Showcasing apps

• کدگذاری کشو - کار می کند Coding the Drawer - works

راه اندازی Flutter Firebase برای Android، IOS و وب Flutter Firebase setup for Android, IOS, and web

• نصب Flutter Firebase با استفاده از FlutterFire CLI Flutter Firebase installation using FlutterFire CLI

• اندروید و IOS Android and IOS

• kIsWeb kIsWeb

• وب Web

خواندن داده ها از Firebase با استفاده از Flutter: صفحه وبلاگ Read data from Firebase using Flutter: Blog Page

• مقدمه ای بر Cloud Firestore برای Flutter Firebase Introduction to Cloud Firestore for Flutter Firebase

• واکشی داده در Flutter Fetching data in Flutter

• فلوتر استریم ها Flutter Streams

• نمایش وبلاگ از Firestore Displaying blog from Firestore

• نمایش وبلاگ از Firebase قسمت 2 Displaying blog from Firebase part 2

• افزودن داده به بلاگ فلاتر Adding data to Flutter Blog

با استفاده از Flutter داده ها را به Firestore اضافه کنید: صفحه تماس: نمونه کارها Flutter Add data to Firestore using Flutter : Contact page : Flutter Portfolio

• عملکرد مقالات Flutter Stream Flutter Stream articles function

• کنترلر ویرایش متن Flutter Text-editing controller Flutter

• Flutter Validator Flutter Validator

• اضافه کردن تابع پاسخ Add response function

• پاسخ را در فلاتر آپلود کنید Upload response in Flutter

• برنامه وب Flutter را در میزبانی Firebase مستقر کنید Deploy the Flutter web app to Firebase Hosting

قوانین امنیتی Firebase Firebase security rules

• مقدمه ای بر قوانین امنیتی Flutter Firebase Introduction to Flutter Firebase security rules

• قوانین امنیتی Google Flutter Firebase Message Google Flutter Firebase Message security rules

• قوانین مقالات و تست: فلاتر Articles rules and testing: Flutter

• انتقال نام دامنه برنامه Flutter در Firebase به Google Domains (اختیاری) Domain name transfer of Flutter app on Firebase to Google Domains (Optional)

چگونه از کد در برنامه Flutter خود استفاده مجدد کنیم؟ (برنامه نمونه کارها) How to reuse code in your Flutter app? (Portfolio app)

• مقدمه ای بر استفاده مجدد از کد: Google Flutter Introduction to reusing code: Google Flutter

• Flutter: برگه ناوبری استفاده مجدد از وب Flutter: navigations tab Web reuse

• استفاده مجدد: وب کشوی ناوبری Google Flutter Reuse: Google Flutter navigation drawer web

• استفاده مجدد: راه‌انداز آدرس اینترنتی Google Flutter و کشو ناوبری برای موبایل Reuse : Google Flutter Url launcher and Navigation Drawer for mobile

• استفاده مجدد از flutter صفحه وبلاگ: قسمت 1 Reuse flutter Blog Page: Part 1

• استفاده مجدد از صفحه وبلاگ Flutter: قسمت 2 Reuse Flutter Blog Page: Part 2

• فرم تماس: کد استفاده مجدد فلاتر Contact Form: Flutter reuse code

• چرا از ویجت های متن سفارشی در فلاتر استفاده می کنم؟ Why do I use Custom Text widgets in Flutter?

• فلاتر تماس با فرم موبایل Flutter contact Form Mobile

• استفاده مجدد از توسعه فلاتر ظروف چای سبز Reuse Teal Container Flutter development

مدیریت پیشرفته دولتی Advanced State management

• مقدمه ای بر مدیریت حالت پیشرفته فلاتر Introduction to Flutter Advanced state management

• Flutter Provider قسمت 1 Flutter Provider part 1

• Flutter Provider قسمت 2 Flutter Provider part 2

• فلاتر ریورپاد قسمت 1 Flutter Riverpod part 1

• فلاتر ریورپاد قسمت 2 Flutter Riverpod part 2

• فلاتر موب ایکس Flutter MobX

• Flutter Multithreading: جداسازی فلاتر Flutter Multithreading : Flutter isolates

معماری نرم افزار فلاتر Flutter Software Architectures

• معرفی Introduction

• Flutter MVC- Model View Controller Flutter MVC- Model View Controller

• مثال فلوتر MVC Flutter MVC example

• Flutter MVVM- Model View ViewModel Flutter MVVM- Model View ViewModel

• مثال Flutter MVVM Flutter MVVM example

• فلاتر بلوک Flutter Bloc

• فلوتر بلوک مثال Flutter Bloc Example

• معماری پاک + طراحی دامنه محور - فلاتر: قسمت 1 Clean Architecture + Domain Driven Design- Flutter: Part 1

• معماری پاک + طراحی دامنه محور - فلاتر: قسمت 2 Clean Architecture + Domain Driven Design - Flutter: Part 2

• معماری پاک + طراحی دامنه محور - فلاتر: قسمت 3 Clean Architecture + Domain Driven Design- Flutter: Part 3

برنامه بودجه با استفاده از معماری Flutter Riverpod و MVVM Budget App using Flutter Riverpod and MVVM architecture

• مقدمه: MVVM، ویجت مصرف کننده، ریورپاد Introduction: MVVM, Consumer widget, Riverpod

• ایجاد یک ویجت قابل استفاده مجدد سفارشی Creating a custom reusable widget

• ردیف ها و ثبت نام کاربر Rows and user registration

• خطا در پنجره های بازشو Error pop-ups

• فلاتر RegExp Flutter RegExp

• ایجاد دکمه ورود به سیستم با Flutter Creating the log in button with Flutter

• Flutter Authentication: ثبت نام و ورود به برنامه Flutter Authentication: Registering and logging in to the app

• ایجاد دکمه ورود به سیستم گوگل Creating the Google Sign-In button

• Flutter Authentication: Flutter Google Authentication برای وب و موبایل. Flutter Authentication: Flutter Google Authentication for Web and Mobile.

• اتصال Flutter Google Sign-In به Firebase auth Connecting Flutter Google Sign-In to Firebase auth

• کدگذاری وب ورود به سیستم Coding the Login View web

• افزودن دارایی های تصویر Adding image assets

• فیلد ایمیل Flutter Flutter Email field

• قسمت Flutter Password Flutter Password field

• دکمه های ثبت نام و ورود به سیستم Register and Sign in buttons

• ایجاد دکمه "ورود به سیستم با Google" در Flutter web Creating ' Sign in with Google' button on Flutter web

• Flutter Google با موفقیت وارد شد Flutter Google sign in successful

• قوانین امنیتی Flutter firebase Flutter firebase Security rules

• فلاتر کشو Flutter Drawer

• دکمه خروج Flutter Flutter Log out button

• لینک های رسانه های اجتماعی Social media links

• داشبورد Dashboard

• نظرات TODO TODO comments

• ظرفی برای نام متغیرها Container for the variable names

• نام متغیرها و تقسیم کننده Variable names and divider

• اضافه کردن هزینه موبایل Add expense mobile

• اضافه کردن تابع هزینه Add expense function

• ویجت TextForm Flutter TextForm widget Flutter

• ویجت TextForm 2 Flutter TextForm widget 2 Flutter

• مجموعه کاربر User collection

• چگونه از Flutter به Cloud Firestore داده اضافه کنیم How to add data to Cloud Firestore from Flutter

• ایجاد دکمه افزودن درآمد Creating the Add income button

• اضافه کردن تابع درآمد Add income function

• فیلدهای نام و مقدار Name and amount fields

• عملکرد دکمه ذخیره فلوتر Flutter Save button function

• لیست هزینه ها The expenses list

• لیست هزینه ها 2 The expenses list 2

• لیست درآمدها Incomes list

• استخراج اسناد از Firebase و لیست های پاک Extracting the docs from Firebase & clean lists

• اجرای توابع Running the functions

• عملکرد بازنشانی Reset function

• Flutter Web AppBar Flutter Web AppBar

• اضافه کردن وب هزینه Add expense web

• اضافه کردن وب درآمد Add income web

• مجموع محاسبات Total calculations

• لیست هزینه ها Expenses list

• لیست درآمدها Incomes list

برنامه بودجه: بهینه سازی عملکرد و استفاده مجدد از کد. Budget App: Performance optimization and code reuse.

• بهینه سازی عملکرد و استفاده مجدد از کد Performance optimization and code reuse.

Flutter Networking: برنامه های قوی با یکپارچه سازی API بسازید Flutter Networking: Build Robust Apps with API Integration

• بررسی اجمالی Overview

• API چیست؟ What is an API?

• انواع API [REST، graphQL، gRPC] Types of API [ REST, graphQL, gRPC]

• مقدمه ای بر REST API Introduction to REST APIs