تبلیغات
تبلیغات

آموزش راه اندازی فلاتر (Flutter) و شروع به کار در ویندوز

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

حداقل سیستم مورد نیاز برای راه‌اندازی فلاتر:

  • Windows 7 SP1 یا بالاتر (64بیتی)
  • 400 مگابایت فضای‌خالی (فقط برای خود فلاتر)
  • ابزارها:

قدم اول: نصب SDK فلاتر

  1. وارد «این لینک» شده و SDK فلاتر را از انتهای مطلب دانلود کنید.
  2. محتوای آن را در جایی استخراج کنید.
  3. داخل SDK، پوشه‌ای به نام bin وجود دارد که باید مسیر آن به Path سیستم معرفی شود. بدین منظور، از آموزش «این لینک» برای معرفی مسیر به Path سیستم استفاده کنید.
  4. وارد CMD شده و دستور flutter doctor را اجرا کرده و منتظر گزارش وضعیت نصب فلاتر باشید.

قدم دوم: تنظیم یک ویرایشگر

امکان توسعه‌ی فلاتر، در ویرایشگرهای متنی مختلفی وجود دارد؛ اما توسعه‌دهندگان آن، استفاده از پلاگین مختص این کار را در اندروید استودیو توصیه کرده‌اند؛ که قابلیت کدنویسی فلاتر را به آن اضافه می‌کند. این پلاگین، برای IntelliJ و VS Code نیز در دسترس قرار دارد.

Android Studio یا Intellij

در صورت  استفاده از:

  • اندروید استودیو، باید ورژن آن 3.0 به بالا باشد.
  • IntelliJ IDEA Community یا IntelliJ IDEA Ultimate، باید ورژن آن 2017.1 به بالا باشد.

نصب فلاتر و پلاگین دارت:

قبلا در «این‌لینک»، نصب پلاگین در اندروید استودیو را توضیح داده شده است؛ که برای Intellij نیز به همان صورت است. پس طبق آن مراحل، کافیست تا پلاگین «Flutter» را جستجو کرده و آن را نصب کنید.

VS Code

  1. از منوی View، روی Command Palette… کلیک کنید.
  2. عبارت install را تایپ کرده و روی Extensions: Install Extensions کلیک کنید.
  3. عبارت flutter را سرچ کرده و آن را نصب کنید.

قدم دوم: تست درایو

حالا وقت آن است تا یک اپلیکیشن فلاتر ایجاد کنیم. سپس آن را اجرا کرده و قابلیت hot reload آن را تجربه کنیم.

Android Studio یا Intellij

توضیحات زیر، براساس نسخه‌ی 3.5.3 اندروید استودیو می‌باشد.

  1. اگر داخل پروژه‌ای قرار دارید:
    • یا آن را ببندید و در پنجره‌ی خوش آمدگویی اندروید استودیو، روی Start a new Flutter project کلیک کنید.
    • یا از منوی File، روی New Flutter Project کلیک کنید.
  2. روی Flutter Application کلیک کنید.
  3.  اطلاعات را تکمیل کنید:
    • Project name: نام پروژه مثلا myapp
    • Flutter SDK Path: مسیر SDK فلاتر که لینک دانلود آن در «اینجا» نیز قرار دارد. (یا می‌توانید از طریق Install SDK آن را نصب کنید)
      توجه: اگر به‌صورت دستی فلاتر را دانلود کرده و آن را در جایی استخراج کنید، بایستی مسیر پوشه‌ی bin داخل آن را به Path سیستم معرفی کنید! (لینک آموزش معرفی مسیر به Path – به زودی)
      همچنین پس از این‌کار، بایستی دستور flutter doctor را در CMD اجرا کنید. این دستور را پس از هربار آپدیت SDK نیز بایستی اجرا کنید.
    • Project location: مسیر ذخیره‌سازی پروژه
    • Description: توضیحات کوتاهی درباره‌ی پروژه
    • Create project offline: دقیقا همانند حالت آفلاین گریدل (Gradle) در هنگام استفاده از جاوا
  4. روی Next کلیک کنید.
  5. اطلاعات را تکمیل کنید:
    • Company domain: ابتدای پکیج برنامه که معمولا نام دامنه‌ی سایت توسعه دهنده است؛ برای مثال: fullkade.com و در این صورت، پکیج برنامه برابر با com.fullkade.myapp خواهد شد.
    • Package name: اگر Company domain را وارد کنیم، به صورت خودکار پکیج تولید می‌شود که از این قسمت می‌توان آن را به صورت دستی تغییر داد.
    • AndroidX: آیا از معماری اندروید X استفاده شود یا خیر
    • Perform channel language: پشتیبانی از یک زبان دیگر در پروژه برای سیستم‌عامل‌های مختلف
      • Kotlin برای اندروید
      • Swift برای iOS
  6. روی Finish کلیک کنید.
  7. صبر کنید تا اندروید استودیو پروژه را ایجاد کند.

کدنوشته شده برای اپلیکیشن، داخل lib/main.dart قرار دارد. پوشه‌هایی با نام ios و andoid نیز وجود دارند که برای موارد جدای خود هستند.


اجرای برنامه

به تولبار اصلی اندروید استودیو دقت کنید:

  • Target Selector: گوشی‌های متصل به سیستم یا شبیه‌سازهایی که برای اجرا وجود دارند را می‌توانید از این قسمت انتخاب نمایید.
    (همچنین از قسمت Tools > Android > AVD Manager می‌توان یک شبیه ساز اندروید ایجاد کرد)
  • Config selector: تغییر کانفیگ (پیکربندی) پروژه
  • Run: اجرا
  • Debug: اجرا در حالت دیباگ
  • Stop: توقف روی گوشی
  • Reload: اجرای مجدد

پس از اجرای پروژه:


تست قابلیت hot reload:

قبلا در «این‌لینک»، این قابلیت را توضیح داده شد؛ حالا بیایید تا آن را آزمایش کنیم. (در این مرحله، از تولبار، برنامه‌ی خود را متوقف نکنید)

  1. فایل lib/main.dart را باز کنید.
  2. عبارت زیر را به عبارت دلخواه خود تغییر دهید:
    Flutter Demo Home Page
    برای مثال:
    FuLLKade Demo Home Page
  3. تغییرات را ذخیره کنید؛ یعنی Ctrl +S را زده یا روی Hot Reload (علامت رعدبرق در تولبار) کلیک کنید. سپس شما تغییر را بلافاصله در اپلیکیشن مشاهده خواهید کرد.

VS Code

توضیحات این بخش فعلا آماده نیست.


در بخش بعدی، به ایجاد اولین برنامه‌ی Flutter خواهیم پرداخت.

بخش بعدی (به زودی)
کانال تلگرام فول کده
تبلیغات

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

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای
برنامه‌نویس فول استک

پاسخ دهید

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

نظرات ثبت شده 2 دیدگاه