فریم ورک فلاتر را می توانیم با IDE های مختلفی مانند اندروید استودیو، اینتلیج و … مورد استفاده قرار دهیم. یکی دیگر از بهترین انتخاب هایی که در این زمینه می توانیم داشته باشیم همان ویژوال استودیو کد یا همان vscode است. از جمله مزیت هایی که برای این IDE مطرح می شود می توانیم به سبک‌تر و کم حجم بودن و همچنین روان تر بودن کار کردن با آن عنوان کنیم.

در این مطلب می خواهیم به آموزش نصب فلاتر در vscode بپردازیم و ببینیم که چطور می توانیم در این محیط یک پروژه فلاتر جدید به وجود آوریم. در ادامه با ما همراه باشید.

آموزش نصب فلاتر در vscode; پیش نیازها

نخستین گام در آموزش نصب فلاتر در vscode این است که در مورد پیش نیازهایی که سیستم ما برای نصب این IDE نیاز دارد اطلاعات به دست آوریم. اینگونه متوجه می شویم که آیا سیستم ما توانایی این را دارد که فلاتر را روی آن نصب کنیم یا خیر. پیش نیازهایی که برای نصب فلاتر در vscode به انها نیاز داریم به شرح زیر هستند:

سیستم عامل مورد نیاز

برای نصب فلاتر روی وی اس کد سیستم عامل شما می بایست ویندوز 10 شصت و چهار بیتی یا بالاتر از آن باشد.

فضای مورد نیاز

شما برای نصب فلاتر روی وی اس کد به حداقل فضای 1.64 گیگابایت نیاز دارید. دقت کنید که این فضا شامل ابزارها و ide نمی شود.

ابزارهای مورد نیاز

در محیطی که قصد نصب فلاتر را دارید می بایست حتما ابزارهای زیر را داشته باشید. چون فلاتر با تکیه بر این ابزارهاست که می تواند به درستی کار کند:

ویندوز پاورشل 5.0 یا نسخه های جدیدتر آن. دقت کنید که اگر از ویندوز 10 استفاده می کنید این ابزار به صورت از پیش نصب شده ووجود دارد.

گیت فور ویندوز x که می بایست حتما آپشن های Git from the Windows Command Prompt را در اختیار داشته باشد. در صورتی که گیت فور ویندوز از قبل روی سیستم شما نصب بوده است باید چک کنید که آیا در قسمت کامند پرامپت فرمان git به درستی اجرا می شود یا خیر.

شاید به این مقاله نیاز داشته باشید: اموزش نصب فلاتر بر روی ویندوز

نصب vscode

حال کع با پیش نیازهای نصب فلاتر در وی اس کد آشنا شدید نوبت به ان می رسد که وی اس کد را نصب کنید. وقتی این پلتفرم را به هر صورتی که می‌دانید نصب کردید می بایست وارد بخشی به نام extentionsشوید. در بهش افزونه ها یا همان extentions می بایست flutter را سرچ کنید.

پس از این که ان را پیدا کردید نوبت به آن می رسد که فلاتر را نصب کنید. نکته مهم دیگری که در این زمینه وجود دارد این است که پس از نصب فلاتر روی وی اس کد می بایست DevTools را فعال کنید. چرا که برای build گرفتن قطعا به آن نیاز پیدا میکنید. از لینک

راهنمای آموزش نصب فلاتر در vscode

در این بخش از آموزش نصب فلاتر در vscode برای نصب فلاتر روی وی اس کد مبنا را بر این می گیریم که شما در همان ابتدا پیش نیازهای لازم را که در بخش قبلی به آنها اشاره کردیم تمام و کمال در اختیار دارید و از این نظر هیچ مشکلی وجود ندارد. حال می بایست SDK فلاتر را برای سیستم خود دانلود کرده و سپس آن را نصب کنبد.

شما می توانید از لینک https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_1.22.6-stable.zip

استفاده کرده و اس دی کی فلاتر را به راحتی دانلود کنید. پس از اتمام دانلود یک فال زیپ در اختیار دارید. آن را به حالت unzip در آورده و از میان فولدرهای آن فولدر فلاتر را پیدا کنید. این فایل را در محلی که می خوانهید sdk فلاتر قرار داشته باشد کپی کنید. مثلا C:\source\flutter

نکته مهم: به هیچ عنوان فلاتر را در دایرکتوری هایی که اصلی هستند و امتیازات بالایی دارند –مثل program files – نصب نکنید.

اگر نمی خواهید از لینکی که گداشته شده که یک بسته نرم افزرای ثابت است استفاده کنید می توانید به جای مرحله های گفته شده در بالا سورس کد sdk فلاتر را از گیت هاب یا رپو فلاتر خودتان شخصا دریافت کنید.اما ممکن است لازم باشد روی شاخه ها و یا تگ ها تغییراتی اعمال کنید.

Run کردن دستور فلاتر داکتر

در این بخش از آموزش نصب فلاتر در vscode نوبت به مرحله اجرای دستور flutter doctor می رسد. شما باید به جایی که فهرست فلاتر در آن قرار گرفته است مراجعه کنید. سپس دستوری که در زیر می بینید را run کنید.

C:\source\flutter>flutter doctor

به کمک این دستور شما می توانید متوجه شوید آیا برای این که تنظیمات مورد نیاز را کامل کنید به سیستم عامل مورد نظر وابسته هستید یا نه؟

به طور کلی دستور فلاتر داکتر محیط نصب را مورد بررسی قرار داده و گزارشی به شما ارائه می دهد که اوضاع نصب فلاتر روی سیستم تان را به خوبی نشان می دهد.

تنظیم SDK فلاتر

یکی از مهمترین مرحله هایی که در نصب فلاتر وجود دارد تنظیم SDK فلاتر است. اگر با کمی دقت این مرحله را پشت سر بگذارید یکی از پیجیده ترین مرحله ها در آموزش نصب فلاتر در vscode را به اتمام رسانده اید. برای شروع ابتدا باید مسیری که برای فولدر SDK هست را پیدا کرده و آن را کپی کنید.

حال باید وارد قسمت متغیرهای محیطی یا همان Environment Variables بروید. برای این کار ابتدا در منوی استارت سیستم خود عبارت env را سرچ کنید. گزینه ای به نام edit the system Environment Variables برای شما به نمایش درمی آید. سپس باید گزینه Environment Variables را انتخاب کنید.

حال در قسمت بالایی  به دنبال گزینه ای تحت عنوان User Variable for {username} بگردید. سپس گزینه New را انتخاب کنید. دو دستور زیر را کپی کنید و در ان وارد کنید:

۱Variable Name: ANDROID_SDK_ROOT

۱Variable value: {آدرس فولدر SDK که آن را کپی کرده اید}

در قسمت SDK فلاتر وارد پوشه bin شوید. مسیر آن را کپی کنید و دوباره به قسمت Environment Variables بروی. دو دستور زیر را وارد کنید:

۱Variable Name: Path

 Variable value: {آدرس فولدر SDK که آن را کپی کرده اید}

و تمام! شما خیلی راحت و با موفقیت توانستید مرحله های نصب را پشت سر بگذاربد و این پلتفرم را روی وی اس کد نصب کنید.

نصب شبیه‌ساز برای vscode

در این بخش از آموزش نصب فلاتر در vscode نوبت به مرحله نصب شبیه‌ساز برای وی اس کد می رسد که پیشنها ما به شما nox است. به کمک لینک شما می توانید به راحتی nox را به وی اس کد متصل کنید. بعد از این که این شبیه‌ساز را نصب کردید لازم است تا به گیت هاب رفته و سپس وارد فولدر EXE شوید. از آنجا  nox-adb-connector.exe را دانلود کرده و در فوادری که NOX در داخل آن نصب شده است paste کنید.

حال نوبت به آن می رسد که شبیه سازتان را اجرا کنید و پس از بالا آمدن آن فایلی که گفته شد یعنی nox-adb-connector.exe هم اجرا کنید. وقتی این کار تمام می شود میبینید که نام دیوایس شما به صورت اتوماتیک در قسمت پایینی وی اس کد و سمت راست آن به نمایش درمی آید.

خلاصه

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

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