فلاتر با هادی=> قسمت اول:‌ شروع کدنویسی!

فلاتر با هادی=> قسمت اول:‌ شروع کدنویسی!

سلام دوستان گلخوبیین گلای تو خونه(میدونم کلیشه‌ای شده)؟خب قسمت اول فلاتر با هادی رو شروع میکنم.خب میخوایم با هم پروژه اصلی فلاتر رو پیاده سازی کنیم.با من همراه باشید.برای ide هم میتونید از FlutLab.io – Flutter IDE online که حتی شبیه سازم داره. باورم نمیشه. تازه پیداش کردم.ولی بازم پیشنهادم VSCode هست.اول UI کلی رو پیاده میکنیم.پوشه lib رو باز کنید و فایل main.dart رو هم باز کنید.خب هرچی کده رو پاک کنید.کد اصلی رو میزارم و خط به خط پیش میرم.گرفته شده با CodeSnap در VSCodeخط اول: ایمپورت کردن کتابخانه متریال گوگل(در فلاتر)خط ۳ تا ۵:‌ متد اجرا یا همون اصلی. تو خط چهار از متد runApp برای اجرا برنامه مون استفاده می‌کنیم.نکته: ما همیشه خط ۱ تا ۵ رو داریم همیشه.خط ۷ تا ۱۱ : ویجت استیت‌لس(توضیح دادم)(اگه افزونه هایی که گفته بودم رو نصب کرده باشید میتونید فقط با نوشتن stetatelessW یا ۵ تا حرف اول ویجت رو بسازید و اسم بزارید براش، همنیطور برای ویجت استیت‌فول)خط ۱۲ تا ۱۸: تو خط ۱۲ ما ریترن(برمیگردونیم) میکنیم متد Material App رو برای ساخت بخش اصلی.خط ۱۳ کاری کردیم که بنر دیباگینگ رو نشون نده(تست کنید میبیند چیه)خط ۱۴ تایتل دادیم به برنامه.خط ۱۵ گفتیم خونه یه صفحه Home ویجت استیت‌فول با نام Virgoolه.خط۲۰ تا ۲۹ هم که یه ویجت استیت‌فول ساختیم.بعد خط ۳۰ ویجت اسکفولد رو برگردوندیم و از اینجا شروع می کنیم.هر کدی که میزنم بعد خط ۳۰ هست.فقط فقط بین خط های ۲۷ و ۲۸ یه متغیر بسازیدint view = 0;خب میریم سر اصل مطلب:این کد از خط ۲۰ شروع شده…خط ۲: تعریف متغیرخط ۳ تا ۷: تو این خط یه متد ساختم که از setState استفاده میکه(یعنی میاد ویجت مارو بروز میکنه) و به عدد متغیر یکی اضافه میکنه.(هر متد و متغیری که میخواین تویه ویجت استیت‌فول استفاده کنید حتما قبل از override باشه.)خط ۱۱ تا۱۴: به ویژگی ویژگی appBar متد AppBar دادم و تاتیل رو هم ویجت Text گذاشتم. تو ویجت Text همیشه اول یه استرینگ(متن) میگره.خط بعد هم معلومه کاری کردم تایتل وسط باشه.خط ۱۵ تا ۲۴: body صفحه اصلی ماست یا همون جایی که ما کارامونو میکنیم. بعد از ویجت Center استفاده کردم تا ویجت Text بیاد وسط(یه نکته: بعضی از ویجت ها بچه یا چنتا بچه میگرن).بعد از ویجت Text استفاده کردم(“”” یعنی اینکه متنمون چند خطه بعد اینکه اگر $ بزارین میتونید از دستورات دارت استفاده کنید.)خط ۲۵ تا آخر: اول به ویژگی floatingActiconButton ویجت FloatingActiconButton دادم و به بچه این ویجت یه آیکن دادم(فلاتر تمام آیکون های متریال رو داره و این عاااالیه) و بعد از اون هم گفتم اگر روی این دکمه کلیک شد یه متد رو اجرا کنه.تمام.خب حالا خروجی رو ببنید. https://api.flutlab.io/res/projects/84892/egyiexvr0cztppeugvdo/index.html این لینک همون ide آنلاینه که اول پست بهتون معرفی کردم.خب این پست تموم شد.لایک و کامنت یادتون نره.خوشحال میشم به انتشارات ما سر بزنید.به این پست و پست قبلی از ۰ تا ۱۰ یه نمره بدید.موفق باشید.

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *