Flutter Documentation

Mobile App Development Framework

Prepared by Qasim Sarwari.

 ‫فهرست مطالب‬

‫مقدمه‪3..................................................................................................................‬‬

‫معرفی فالتر و شروع کار ‪4.......................................................................................‬‬

‫آشنایی با ویجتها و طراحی صفحه ‪5...............................................................................‬‬

‫مدیریت صفحات و ناوبری ‪6.........................................................................................‬‬

‫طراحی رابط کاربری پیشرفته ‪6.......................................................................................‬‬

‫مدیریت وضعیت و تفاوت ‪ Stateless‬و‪7........................................................... Stateful‬‬

‫نحوه ارتباط با ‪ API‬و دریافت دادههای آنالین ‪8.................................................................‬‬

‫نحوه بازکردن لینکها‪ ،‬شمارهگیری و ارسال پیامک ‪8............................................................‬‬

‫ذخیرهسازی دادهها در اپلیکیشن ‪9...................................................................................‬‬

‫آشنایی با احراز هویت و استفاده از‪10....................................... Firebase Authentication‬‬

‫‪2‬‬
 ‫مقدمه‬

‫در دنیای امروز‪ ،‬تلفنهای هوشمند و اپلیکیشنهای موبایل نقش بسیار مهمی در زندگی روزمره ما ایفا میکنند‪.‬‬
‫از ارتباطات گرفته تا خرید‪ ،‬آموزش و سرگرمی‪ ،‬همهچیز به کمک اپلیکیشنها سادهتر و سریعتر شده است‪ .‬به‬
‫همین دلیل یادگیری توسعه اپلیکیشنهای موبایل به یکی از مهارتهای پرتقاضا و ارزشمند در بازار کار تبدیل‬
‫شده است‪ .‬یکی از بهترین و محبوبترین ابزارها برای ساخت این اپلیکیشنها‪ ،‬فریمورک ‪ Flutter‬است که‬
‫توسط شرکت گوگل ارائه شده است‪.‬‬

‫‪Flutter‬به برنامهنویسان این امکان را میدهد که با استفاده از یک زبان برنامهنویسی ساده و قدرتمند به نام‬
‫‪ ،Dart‬اپلیکیشنهایی با کیفیت باال‪ ،‬سرعت عملکرد عالی و طراحی جذاب برای سیستمعاملهای مختلف مانند‬
‫اندروید و ‪ iOS‬بسازند‪ .‬یکی از مزیتهای برجسته‪ ، Flutter‬قابلیت نوشتن یک بار کد و استفاده آن در چند‬
‫پلتفرم است که این موضوع زمان توسعه را بهطور قابل توجهی کاهش میدهد و هزینهها را مدیریت میکند‪.‬‬

‫در این خالصه درس‪ ،‬شما با مفاهیم پایه و پیشرفته ‪ Flutter‬آشنا خواهید شد که شامل آشنایی با ویجتها‪،‬‬
‫مدیریت وضعیت برنامه‪ ،‬ناوبری بین صفحات‪ ،‬ارتباط با سرویسهای آنالین‪ ،‬ذخیرهسازی دادهها و همچنین احراز‬
‫هویت کاربران است‪ .‬هدف این مجموعه‪ ،‬فراهم کردن دانش الزم برای ساخت اپلیکیشنهای کاربردی و حرفهای‬
‫به زبان ساده و قابل فهم است‪.‬‬

‫در کنار مباحث نظری‪ ،‬مثالهای کاربردی و نکات مهمی ارائه شدهاند که به شما کمک میکنند مفاهیم را بهتر‬
‫درک کنید و در پروژههای عملی به کار ببرید‪ .‬همچنین تاکید شده است که مفاهیم به گونهای آموزش داده شود‬
‫که دانشجویان بتوانند در امتحانات نهایی به راحتی پاسخگو باشند و مهارتهای الزم برای ورود به بازار کار را‬
‫کسب کنند‪.‬‬

‫با یادگیری فالتر‪ ،‬نه تنها توانایی توسعه اپلیکیشنهای متنوع را خواهید داشت‪ ،‬بلکه به دنیایی از ابزارها و‬
‫کتابخانههای قدرتمند دسترسی پیدا میکنید که مسیر حرفهای شما را هموارتر میکند‪ .‬بنابراین توصیه میشود‬
‫تمام مباحث این خالصه درس را با دقت مطالعه کنید و تمرینهای عملی آن را انجام دهید تا به یک برنامهنویس‬
‫موبایل حرفهای تبدیل شوید‪.‬‬

‫‪3‬‬
 ‫معرفی فالتر و شروع کار‬

‫‪Flutter‬یک فریمورک متنباز از گوگل است که برای توسعه اپلیکیشنهای موبایل‪ ،‬وب و دسکتاپ طراحی‬
‫شده است‪ .‬مهمترین ویژگی ‪ Flutter‬این است که با یک کدبیس واحد میتوان اپلیکیشنهایی با عملکرد باال و‬
‫ظاهر زیبا برای چند پلتفرم مختلف ساخت‪.‬‬

‫ویژگیها و مزایا‪:‬‬

‫استفاده از زبان ‪ Dart‬که ساده و قدرتمند است‪.‬‬ ‫‪‬‬

‫رندر سریع و روان بدون نیاز به رابطهای بومی‪(Native).‬‬ ‫‪‬‬

‫پشتیبانی از ‪ Hot Reload‬برای دیدن سریع تغییرات کد‪.‬‬ ‫‪‬‬

‫جامعه بزرگ و مستندات کامل‪.‬‬ ‫‪‬‬

‫امکان استفاده از ویجتهای آماده و سفارشیسازی آسان‪.‬‬ ‫‪‬‬

‫شروع کار‪:‬‬

‫نصب ‪ Flutter SDK‬از وبسایت رسمی‪flutter.dev‬‬ ‫‪‬‬

‫نصب ابزارهای موردنیاز مثل ‪ Android Studio‬یا ‪ VS Code‬همراه با افزونه‪Flutter‬‬ ‫‪‬‬

‫ساخت پروژه جدید با دستور‪:‬‬ ‫‪‬‬

‫‪flutter create my_app‬‬

‫اجرای پروژه روی شبیهساز یا دستگاه واقعی با دستور‪:‬‬ ‫‪‬‬

‫‪flutter run‬‬

‫نکات مهم‪:‬‬

‫قبل از شروع‪ ،‬حتما ‪flutter doctor‬را اجرا کنید تا محیط توسعه شما کامل و بدون خطا باشد‪.‬‬ ‫‪‬‬

‫با مفاهیم اصلی زبان ‪ Dart‬آشنا شوید تا برنامهنویسی راحتتر شود‪.‬‬ ‫‪‬‬

‫برای توسعه بهتر ‪ UI‬بهتر است با اصول طراحی رابط کاربری و ویجتها آشنا باشید‪.‬‬ ‫‪‬‬

‫‪4‬‬
 ‫آشنایی با ویجتها و طراحی صفحه‬

‫در ‪ Flutter‬همه اجزای صفحه نمایش با ویجتها ساخته میشوند؛ ویجتها میتوانند ساده مثل متن یا پیچیده‬
‫مثل فرمها باشند‪.‬‬

‫ویجتها به دو دسته اصلی تقسیم میشوند‪:‬‬

‫‪StatelessWidget:‬ویجتی که دادههایش ثابت است و تغییر نمیکند‪.‬‬ ‫‪‬‬

‫‪StatefulWidget:‬ویجتی که دادههایش قابل تغییر است و به تغییرات واکنش نشان میدهد‪.‬‬ ‫‪‬‬

‫چند ویجت پرکاربرد‪:‬‬

‫‪Text‬برای نمایش متن‬ ‫‪‬‬

‫‪Container‬برای قاببندی‪ ،‬رنگدهی و تعیین اندازه‬ ‫‪‬‬

‫‪Row‬و ‪Column‬برای چینش افقی و عمودی ویجتها‬ ‫‪‬‬

‫‪Image‬برای نمایش عکسها‬ ‫‪‬‬

‫نکات مهم‪:‬‬

‫هر ویجت میتواند دارای فرزند یا چند فرزند باشد و با ترکیب آنها میتوان صفحات پیچیده ساخت‪.‬‬ ‫‪‬‬

‫ویجتها باید سبک و بهینه باشند تا سرعت اپ حفظ شود‪.‬‬ ‫‪‬‬

‫استفاده صحیح از ‪ Padding‬و ‪ Margin‬باعث زیبایی و خوانایی بهتر رابط کاربری میشود‪.‬‬ ‫‪‬‬

‫‪5‬‬
 ‫مدیریت صفحات و ناوبری‬

‫در اپلیکیشنهای چندصفحهای‪ ،‬جابجایی بین صفحات اهمیت زیادی دارد ‪. Flutter‬این کار را با کالس‬
‫‪Navigator‬انجام میدهد که عملکردی مشابه یک پشته دارد‪.‬‬

‫عملیات اصلی ناوبری‪:‬‬

‫‪Navigator.push‬برای رفتن به صفحه جدید‬ ‫‪‬‬

‫‪Navigator.pop‬برای بازگشت به صفحه قبلی‬ ‫‪‬‬

‫ناوبری با مسیرهای نامگذاری شده‪:‬‬

‫با تعریف مسیرها در یک‪ ، Map‬میتوان ناوبری را ساده و قابل مدیریت کرد‪.‬‬

‫;)))(‪Navigator.push(context, MaterialPageRoute(builder: (_) => PageTwo‬‬

‫نکات مهم‪:‬‬

‫ناوبری بهینه و درست‪ ،‬تجربه کاربری را به شدت بهبود میبخشد‪.‬‬ ‫‪‬‬

‫میتوان از انیمیشنهای سفارشی برای جابجایی صفحات استفاده کرد‪.‬‬ ‫‪‬‬

‫مدیریت پارامترهای ورودی به صفحات اهمیت دارد (مثالً ارسال شناسه یا دادهها به صفحه جدید)‪.‬‬ ‫‪‬‬

‫طراحی رابط کاربری پیشرفته‬

‫برای طراحی صفحات پیچیده و حرفهای در ‪ Flutter‬از ویجتهای متنوع استفاده میشود‪.‬‬

‫ویجتهای کاربردی‪:‬‬

‫‪ListView:‬برای ساخت لیستهای اسکرولپذیر‬ ‫‪‬‬

‫‪GridView:‬نمایش دادهها به صورت شبکهای‬ ‫‪‬‬

‫‪Stack:‬چینش ویجتها روی هم‬ ‫‪‬‬

‫‪Card:‬قاببندی زیبا برای نمایش دادهها‬ ‫‪‬‬

‫‪6‬‬
 ‫طراحی ظاهری با‪BoxDecoration:‬‬
‫با این ویجت میتوان رنگ پسزمینه‪ ،‬سایه‪ ،‬گوشههای گرد و تصاویر پسزمینه را تنظیم کرد‪.‬‬

‫نکات مهم‪:‬‬

‫رعایت اصول طراحی ‪ UI/UX‬برای تجربه بهتر کاربری ضروری است‪.‬‬ ‫‪‬‬

‫استفاده از تمها و استایلهای مشترک باعث یکپارچگی ظاهر برنامه میشود‪.‬‬ ‫‪‬‬

‫‪Responsive Design‬برای نمایش صحیح در اندازههای مختلف صفحه نمایش بسیار مهم است‪.‬‬ ‫‪‬‬

‫مدیریت وضعیت و تفاوت ‪ Stateless‬و‪Stateful‬‬

‫مدیریت وضعیت یا ‪ State Management‬یعنی کنترل دادههایی که روی نمایش برنامه تاثیر میگذارند‪.‬‬

‫‪StatelessWidget:‬‬
‫ویجتی که بعد از ساخته شدن تغییر نمیکند‪ .‬مثالً دکمهای که فقط یک متن ثابت دارد‪.‬‬

‫‪StatefulWidget:‬‬
‫ویجتی که میتواند تغییر کند و با تغییر دادهها صفحه دوباره رندر شود‪.‬‬

‫نحوه استفاده از‪setState():‬‬

‫زمانی که دادهها تغییر میکنند‪ ،‬باید با فراخوانی )(‪setState‬وضعیت جدید را به ‪ Flutter‬اطالع داد تا ‪UI‬‬
‫بروزرسانی شود‪.‬‬

‫{ )((‪setState‬‬
‫;‪count++‬‬
‫;)}‬

‫نکات مهم‪:‬‬

‫استفاده بیجا از ‪ StatefulWidget‬میتواند باعث کاهش کارایی شود‪.‬‬ ‫‪‬‬

‫مدیریت وضعیت پیچیدهتر با روشهایی مثل‪Bloc ، Provider‬یا ‪ GetX‬بهتر انجام میشود‪.‬‬ ‫‪‬‬

‫شناخت دقیق نوع داده و چرخه حیات ویجتها در انتخاب صحیح کمک میکند‪.‬‬ ‫‪‬‬

‫‪7‬‬
 ‫نحوه ارتباط با ‪ API‬و دریافت دادههای آنالین‬

‫برای کار با دادههای آنالین و ارتباط با سرور از پروتکل ‪ HTTP‬استفاده میشود‪ .‬پکیج ‪http‬در ‪ Flutter‬این‬
‫امکان را فراهم میکند‪.‬‬

‫مراحل دریافت داده‪:‬‬

‫‪ .1‬ارسال درخواست به سرور‪POST ، (GET‬و)‪...‬‬

‫‪ .2‬دریافت پاسخ به صورت‪JSON‬‬
‫‪ .3‬تبدیل ‪ JSON‬به مدل دادهای در‪Dart‬‬
‫‪ .4‬نمایش دادهها در‪UI‬‬

‫مثال دریافت داده‪:‬‬

‫;))'‪final response = await http.get(Uri.parse('https://api.example.com/data‬‬

‫{ )‪if (response.statusCode == 200‬‬
‫;)‪final data = jsonDecode(response.body‬‬
‫}‬

‫نکات مهم‪:‬‬
‫مدیریت خطاها مثل قطع بودن اینترنت یا پاسخ ناموفق سرور مهم است‪.‬‬ ‫‪‬‬

‫استفاده از ‪FutureBuilder‬برای نمایش دادههای ناهمزمان بسیار کاربردی است‪.‬‬ ‫‪‬‬

‫بهینهسازی درخواستها و کش کردن دادهها باعث افزایش سرعت و کاهش مصرف اینترنت میشود‪.‬‬ ‫‪‬‬

‫نحوه بازکردن لینکها‪ ،‬شمارهگیری و ارسال پیامک‬

‫برای تعامل با سایر برنامههای دستگاه مانند مرورگر‪ ،‬شمارهگیر یا پیامک از پکیج ‪url_launcher‬استفاده‬
‫میشود‪.‬‬

‫مثالها‪:‬‬

‫باز کردن یک سایت در مرورگر‬ ‫‪‬‬

‫;))"‪launchUrl(Uri.parse("https://flutter.dev‬‬
‫‪8‬‬
 ‫‪ ‬شمارهگیری‬

‫;))"‪launchUrl(Uri.parse("tel:+1234567890‬‬
‫‪ ‬ارسال پیامک‬

‫;))"‪launchUrl(Uri.parse("sms:+1234567890‬‬

‫نکات مهم‪:‬‬

‫پیش از استفاده بهتر است بررسی شود که دستگاه امکان اجرای عملیات را دارد‪.‬‬ ‫‪‬‬

‫تجربه کاربری با بازخوردهای مناسب هنگام عملیات بهبود مییابد‪.‬‬ ‫‪‬‬

‫مجوزهای الزم )‪ (Permissions‬باید در فایلهای تنظیمات اپلیکیشن تعریف شود‪.‬‬ ‫‪‬‬

‫ذخیرهسازی دادهها در اپلیکیشن‬

‫برای ذخیره دادههای کوچک و ساده مثل تنظیمات یا اطالعات کاربر از ‪shared_preferences‬استفاده میشود‪.‬‬
‫این روش دادهها را به صورت کلید‪-‬مقدار در حافظه دستگاه ذخیره میکند‪.‬‬

‫ذخیره مقدار‪:‬‬

‫;)(‪final prefs = await SharedPrefrences.getInstance‬‬

‫;)'‪prefs.setString('username', 'Ali‬‬

‫خواندن مقدار‪:‬‬

‫;)'‪String? username = prefs.getString('username‬‬

‫برای دادههای پیچیدهتر یا پایدارتر میتوان از پایگاه دادههای محلی مثل ‪ SQLite‬یا پکیج ‪ Hive‬استفاده‬
‫کرد‪.‬‬

‫‪9‬‬
 ‫نکات مهم‪:‬‬

‫دادههای حساس باید به صورت رمزنگاری شده ذخیره شوند‪.‬‬ ‫‪‬‬

‫ذخیرهسازی زیاد در ‪ SharedPreferences‬بهینه نیست‪.‬‬ ‫‪‬‬

‫استفاده از پایگاه دادههای ‪ NoSQL‬یا ‪ SQL‬برای دادههای پیچیده و حجیم پیشنهاد میشود‪.‬‬ ‫‪‬‬

‫آشنایی با احراز هویت و استفاده از‪Firebase Authentication‬‬

‫‪Firebase Authentication‬یک سرویس آماده برای مدیریت ورود‪ ،‬ثبتنام و امنیت کاربران است‪ .‬این‬
‫سرویس روشهای مختلفی مثل ایمیل‪/‬پسورد‪ ،‬شماره موبایل‪ ،‬حسابهای گوگل و فیسبوک را پشتیبانی میکند‪.‬‬

‫مراحل کلی‪:‬‬

‫‪ .1‬ثبت اپلیکیشن در کنسول‪Firebase‬‬

‫‪ .2‬نصب و تنظیم پکیجهای ‪ Firebase‬در پروژه‪Flutter‬‬
‫‪ .3‬پیادهسازی ورود و ثبتنام با استفاده از توابع آماده‬
‫‪ .4‬مدیریت وضعیت ورود کاربر و خروج‬

‫مثال ثبتنام‪:‬‬

‫(‪await FirebaseAuth.instance.createUserWithEmailAndPassword‬‬
‫‪email: email, password: password‬‬
‫;)‬

‫نکات مهم‪:‬‬

‫امنیت دادهها و تایید صحت کاربران اهمیت زیادی دارد‪.‬‬ ‫‪‬‬

‫در ‪ Firebase‬میتوان قوانین امنیتی برای دسترسی به دیتابیس و ‪ Storage‬تعریف کرد‪.‬‬ ‫‪‬‬

‫میتوان از امکانات پیشرفته مثل تایید دو مرحلهای نیز بهره برد‪.‬‬ ‫‪‬‬

‫‪10‬‬