شروع کار با فلاتر: راهنمای عملی برای ایجاد و اجرای اولین برنامه

معرفی

سلام… در مقاله امروز، من شما را در تمام مراحل ایجاد اولین برنامه Flutter و اجرای آن برای اولین بار بر روی شبیه سازهای فیزیکی و مجازی و همچنین اجرای آن در مرورگر وب ما راهنمایی می کنم. (بله، شما می توانید از یک پایگاه کد فلاتر استفاده کنید و برای اندروید، iOS، وب و دسکتاپ توسعه دهید، و من در اولین مقاله از این سری فلاتر در مورد آن صحبت کردم). همچنین در این مقاله، برخی از دستورات بسیار مفید Flutter و همچنین نکات و ترفندهای مفید در Flutter را به شما معرفی می کنم.

مقاله قبلی

قبل از اینکه ادامه دهیم، به مقاله قبلی من مراجعه کنید، جایی که من راهنمای دقیقی در مورد نحوه راه اندازی ماشین محلی خود برای توسعه Flutter ارائه کردم.

اولین برنامه Flutter خود را ایجاد کنید

بنابراین، بدون هیچ مقدمه ای، بیایید همین جا بپریم!!!

ما با ایجاد یک برنامه Flutter ساده در خط فرمان (ترمینال) خود شروع می کنیم. پنجره ترمینال را روشن کنید و تایپ کنید flutter upgrade، مانند زیر
کاری که این دستور انجام می دهد این است که نسخه Flutter را ارتقا می دهد و همچنین چندین بسته را دانلود و ارتقا می دهد که برای اطمینان از اجرای روان Flutter در دستگاه محلی شما لازم است.
شما باید اجازه دهید دستور کار خودش را انجام دهد و به طور خودکار دستور را اجرا کند flutter version و flutter doctor دستورات در همان پنجره ترمینال.

شما باید دایرکتوری داشته باشید که در آن برنامه های Flutter در آن قرار دارند. مال من است “C:\Users\Dexter\flutter-apps“. با اجرای آن به دایرکتوری که برای ذخیره برنامه های Flutter خود ایجاد کرده اید تغییر می دهید cd flutter-apps دستور، درست مانند عکس زیر.
در مرحله بعد این دستور را تایپ کنید flutter create sample_app و enter را بزنید. این پوشه پروژه را ایجاد می کند و وابستگی های اساسی را بارگیری می کند که برنامه فوق العاده ما به نام “نمونه_برنامه” باید اجرا شود.
وقتی این کار تمام شد، باید نتایج زیر را با اطلاعات مفید در مورد نحوه اجرای برنامه و محل ورود آن به دست آورید.

با استفاده از Windows Explorer (یا Finder اگر در مک هستید)، باید بتوانید به فهرستی که برنامه ما در آن قرار دارد بروید.
با بازگشت به پنجره ترمینال خود، آن را اجرا کنید cd sample_app فرمان و به فهرست برنامه ما تغییر می کند.
اکنون که در دایرکتوری برنامه خود هستیم، آن را اجرا کنید code . فرمان

در حال اجرا code . دستور پنجره کد VS جدید برنامه ما را باز می کند.

به من اجازه دهید توضیح دهم که چند پوشه و فایل در عکس بالا چه کاری انجام می دهند:

1. “اندروید“و”iosپوشه‌ها حاوی فایل‌ها و وابستگی‌های ضروری هستند که هنگام ساخت فایل‌های APK/IPA و سپس استقرار برنامه‌های Android و/یا iOS به ترتیب در فروشگاه Google Play یا iOS App Store،

2. “lib“پوشه نقطه ورود برنامه ما است زیرا این همان جایی است که ما”اصلی.دارت“فایل ذخیره می شود،

3. “لینوکس“،”سیستم عامل مک“،”وب“، و”پنجره هاپوشه‌ها حاوی وابستگی‌هایی هستند که هنگام استفاده از Flutter برای ساخت و توسعه برنامه‌ها برای پلتفرم‌های Linux، MacOS، Windows و همچنین برای مرورگرهای وب مورد نیاز است.

4. “pubspec.yaml“بسیار مهم است زیرا این فایلی است که وقتی می‌خواهیم از بسته‌های فلاتر در برنامه‌هایمان استفاده کنیم پس از دانلود آن‌ها از بسته‌های Dart، ویرایش می‌کنیم، و

5. “README.md“فایل Markdown است که حاوی تمام اطلاعات و اسناد مربوط به برنامه شما است.

توجه داشته باشید – مکان فایل “pubspec.yaml” را حذف یا تغییر ندهید زیرا این کار باعث ایجاد مشکلات و اشکالاتی می شود که برای آنها آماده نیستید.

راه اندازی دستگاه فیزیکی/شبیه ساز

اکنون، زمان آن رسیده است که به جنبه های شاداب این مقاله بپردازیم – جایی که ما برنامه خود را بر روی یک دستگاه/شبیه ساز فیزیکی اجرا می کنیم – و من می خواهم روند راه اندازی یک دستگاه فیزیکی را به عنوان شبیه ساز خود انجام دهیم.

برای این بخش، من از Redmi 9T توسط Xiaomi استفاده می‌کنم و در حال حاضر اندروید 11 را اجرا می‌کند. اکنون، ممکن است تجربه شما مانند من نباشد، زیرا ممکن است از دستگاه‌های دیگری مانند سامسونگ، نوکیا یا هر دستگاه اندرویدی دیگری استفاده می‌کنید، اما چنین است. معمولاً روند مشابهی دارد، بنابراین بیایید شروع کنیم. همچنین، کابل USB شما در اینجا بسیار مفید خواهد بود.

در حال حاضر، شما دستگاه توسعه و دستگاه اندروید خود را در کنار هم دارید🙃

1. هدایت به “تنظیمات” در دستگاه تلفن همراه خود و شما باید چیزی شبیه به عکس زیر داشته باشید. عبارت «درباره تلفن» یا چیزی مشابه را جستجو کرده و آن را انتخاب کنید.

2. از بالا، باید با این صفحه در زیر به شما خوشامد گفت که در آن می توانید اطلاعاتی در مورد دستگاه اندرویدی خود مشاهده کنید. بسته به دستگاهی که استفاده می کنید، باید ببینید “شماره ساخت“، مال من می گوید”نسخه MIUI“اما آنها یک چیز هستند. به سرعت روی ” ضربه بزنیدشماره ساخت” (حدود 5 تا 7 بار) تا زمانی که پیامی را دریافت کنید که می گوید “شما اکنون یک توسعه دهنده هستید“. انجام این کار فعال می شود”گزینه های توسعه دهنده“در دستگاه تلفن همراه شما.

3. به صفحه اصلی «تنظیمات» برگردید و «گزینه‌های برنامه‌نویس» را جستجو کنید. من مجبور شدم اسکرول کنم زیرا مال من در قسمت “تنظیمات اضافی” بود. پیش بروید و آن را انتخاب کنید.
   

4. از جانب مرحله 3 در بالا، به پایین بروید تا زمانی که گزینه ای را ببینید که می گوید:گزینه های توسعه دهندهو آن را انتخاب کنید. اگر این گزینه را نمی بینید، باید کل این فرآیند را از آنجا شروع کنید مرحله 1.
   

5. وقتی وارد شدید، به پایین بروید تا دو گزینه را پیدا کنید که می گوید:اشکال زدایی USB“و”برنامه ها را از طریق USB نصب کنید“.
   روی ” ضربه بزنیداشکال زدایی USBگزینه ” و ممکن است (یا نه) یک صفحه محاوره ای ظاهر شود که از شما درخواست تایید بیشتر می کند، مانند زیر. مطمئن شوید که کادرهای لازم را علامت زده و ضربه بزنید “خوب“.
   

6. اکنون یک سر کابل USB خود را به تلفن خود وصل کنید و سر دیگر را به دستگاه توسعه خود وصل کنید و آن را وصل کنید. پس از انجام این کار، دوباره به مسیر “گزینه های توسعه دهنده“. اکنون، می توانید ” را انتخاب کنیدبرنامه ها را از طریق USB نصب کنیدگزینه “، و شما باید صفحه ای مشابه صفحه من در زیر داشته باشید، با “اشکال زدایی USB“و”برنامه ها را از طریق USB نصب کنید“گزینه ها فعال شد.
   
   در برخی مواقع، یک پاپ آپ روی تلفن شما ظاهر می شود که از شما می پرسد آیا به رایانه ای که به آن متصل شده اید اعتماد دارید یا خیر، فقط کافی است روی ” ضربه بزنید.خوب” (مال من قبلاً این کار را انجام داد و من کاملاً فراموش کردم از آن اسکرین شات بگیرم). این ADB (پل اشکال زدایی اندروید) است که در پس زمینه اجرا می شود و کمک می کند روند گردش کار شما روان تر و یکپارچه تر شود.

اجرای برنامه بر روی دستگاه فیزیکی/شبیه ساز

در حالی که تلفن شما هنوز متصل است، به VS Code در دستگاه توسعه خود برگردید، زیرا زمان اجرای برنامه ما فرا رسیده است. برای رسیدن به VS Code، باید صفحه‌ای مشابه تصویر زیر داشته باشید.
کد VS من به طور خودکار دستگاه من را انتخاب کرد، اما ممکن است مال شما مشابه نباشد. اگر VS Code شما به طور خودکار شبیه ساز فیزیکی شما را انتخاب نمی کند، فقط مراحل زیر را دنبال کنید.

1. در کد VS خود، دکمه را نگه دارید Ctrl + Shift + P کلیدها در همان زمان و یک گفتگو باید در بالای پنجره کد VS شما ظاهر شود.

2. تایپ کنید “دستگاه ها” را در کادر متن و ” را انتخاب کنیدفلاتر: دستگاه را انتخاب کنیدگزینه ” در بالای لیست.

3. دستگاه/شبیه ساز فیزیکی شما باید در بالای لیست دستگاه ها باشد و باید علامت “سیار” کنار آن را تگ کنید. ادامه دهید و آن را انتخاب کنید.
   وویلا! شما دستگاه مورد نظری را انتخاب کرده اید که می خواهید برنامه Flutter شما روی آن اجرا شود.

4. در مرحله بعد، به ترمینالی که در VS Code تعبیه شده است بروید و با نگه داشتن دکمه می توانید این کار را انجام دهید Ctrl + Shift + ` کلیدها به طور همزمان حالا که وارد شدید، عبارت را تایپ کنید flutter devices در ترمینال خود فرمان دهید و آن را اجرا کنید. شما باید شبیه ساز فیزیکی خود را در نتیجه مشاهده کنید.

5. بعد، عبارت را تایپ کنید flutter run دستور نصب و اجرای برنامه را در دستگاه فیزیکی خود. بسته به مشخصات سیستم شما، این باید چند دقیقه طول بکشد زیرا برای اولین بار است که آن را اجرا می کنید، بنابراین صبور باشید. این نکته بسیار مشکل است زیرا باید همزمان به VS Code و دستگاه Android خود توجه کنید. شاید این بهترین زمان برای دور شدن از رایانه شما نباشد.
   من بیشتر از آنچه انتظار داشتم طول کشید زیرا کد VS من باید برخی از وابستگی‌های اندروید مانند ابزارهای SDK، پلتفرم‌های SDK و مجوزهای نصب شده در Android Studio را تأیید می‌کرد.

بعد از چند دقیقه (مال من نزدیک به یک ساعت بود)، “اجرای وظیفه Gradle: ‘assembleDebug’فرآیند باید انجام شود و سپس پیام سبز رنگی دریافت می کنید که برنامه شما ساخته شده است.

مراحل نصب برنامه بعد از چند ثانیه شروع می شود و باید یک پنجره بازشو در دستگاه فیزیکی خود دریافت کنید که از شما درخواست تأیید اجازه دادن به برنامه ما را می کند.نمونه_برنامه“از طریق USB نصب می شود. پنجره بازشو باید چیزی در خطوط ” بگویداجازه این ارتباط را در آینده بدهید“،”هرگز دوباره برای این دستگاه درخواست نکنید” یا مشابه، پس فقط پیش بروید و کادر را علامت بزنید و سپس روی ” ضربه بزنیدخوبو شما روی دستگاه فیزیکی شما نصب می شود و سپس به صورت خودکار اجرا می شود.

اجازه دهید کل فرآیند به پایان برسد و منتظر بمانید تا ترمینال شما شبیه ترمینال من در زیر شود، جایی که برنامه شما اکنون بر روی دستگاه/شبیه ساز فیزیکی شما نصب شده است.

براوو! شما با موفقیت دستگاه تلفن همراه شخصی خود را راه‌اندازی کرده‌اید تا در هنگام ساخت با Flutter به عنوان دستگاه/شبیه‌ساز فیزیکی شما عمل کند. شما باید صفحه ای شبیه به صفحه زیر داشته باشید.

بیایید رنگ تم برنامه خود را از “آبی” به “نارنجی” (یا رنگ دیگری به انتخاب شما) تغییر دهیم. ما این کار را با ویرایش ” انجام می دهیماصلی.دارت“فایل در”libدایرکتوری “. وقتی رنگ را از “آبی” به رنگ دیگری تغییر دادید، وارد ترمینال خود شده و ” را بزنید “r“اجرای چیزی که یک” نامیده می شودبارگذاری مجدد داغ“تا تغییر رنگ را در برنامه ما اعمال کنیم.
پس از تغییر رنگ تم، اکنون این برنامه در دستگاه فیزیکی ما به این شکل است.

برای پایان دادن به فرآیند، وارد ترمینال خود شده و روی “qبرای ترک، و باید چیزی شبیه به من در زیر داشته باشید. این عملیات همچنین برنامه را در دستگاه فیزیکی شما می‌بندد.

شبیه سازها: دستگاه فیزیکی در مقابل دستگاه مجازی (دستگاه مجازی اندروید – AVD)

این پاراگراف بسیار مورد توجه است زیرا من ترجیح می دهم از یک دستگاه فیزیکی به جای یک دستگاه مجازی استفاده کنم. این به دلیل مشخصات دستگاه توسعه فعلی من است زیرا اگر من مستقیماً AVD را اجرا کنم، رایانه من شروع به تهویه بیش از حد می کند (به صورت مجازی)، اما خیالتان راحت باشد که از AVD روی دستگاه های پیشرفته تر استفاده کنید زیرا سریع تر است و در زمان توسعه صرفه جویی می کند. در مقاله بعدی، من شما را از طریق راه اندازی یک دستگاه مجازی (AVD) راهنمایی می کنم، اما تا آن زمان.

بله، من از دستگاه های فیزیکی و AVD استفاده کرده ام و با اطمینان می توانم به شما بگویم که سرعت کار با AVD ها ده برابر بیشتر است.

چیزی اضافی

یکی از دستورات آسانی که می توانید در ترمینال اجرا کنید تا لیستی از دستورات Flutter را ببینید flutter -h.

نتیجه

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

PS

من در حال ویرایش این مقاله در یک عصر یکشنبه فوق العاده هستم … پس خدا را شکر که دوباره دوشنبه است💪🏽🚀⚡🔥