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

این صفحه چگونگی " راه‌اندازی آزمایشی " را شرح می‌دهد: یک app موبایل جدید را ایجاد کرده ، آن را اجرا کرده ، و یاد میگیرید که چطور تغییرات را با hot reload انجام دهید.

فلاتر یک ابزار انعطاف‌پذیر است ، بنابراین لطفا با انتخاب یک ابزار مناسب برای نوشتن، شروع به ساختن و اجرای برنامه فلاتر کنید.

Android Studio: یک محیط کامل و یکپارچه برای فلاتر.

ایجاد یک پروژه جدید

  1. انتخاب گزینه File>New Flutter Project
  2. انتخاب Flutter application از قسمت نوع پروژه و زدن گزینه Next
  3. در قسمت بعدی نام پروژه خود را وارد کنید.(برای مثال: myapp), و گزینه Next را انتخاب کنید.
  4. بر روی Finish کلیک کنید.
  5. چند لحظه ای تامل کنید تا SDK های مورد نیاز نصب شود و پروژه ایجاد شود

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

فرمان بالا یک دایرکتوری پروژه فلاتر به نام myapp ایجاد می‌کند که شامل یک برنامه آزمایشی ساده است که از Material Components استفاده می‌کند.

در شاخه پروژه، کد برنامه شما در lib/main.dart قرار دارد.

اجرای برنامه

  1. در صفحه اصلی Android Studio به نوار ابزار بالا توجه کنید.
    Main IntelliJ toolbar
  2. در قسمت target selector, یک دستگاه آندروید برای اجرای برنامه انتخاب کنید. اگر هیچ دستگاهی در این قسمت مشاهده نکردید از قسمت Tools>Android>AVD Manager یک شبیه ساز آندروید ایجاد کنید. برای ایجاد یک شبیه ساز لینک مدیریت AVD ها مراجعه کنید.
  3. آیکونRun در نوار ابزار را کلیک کنید.
  4. اگر مشکلی نباشد ،برنامه شما باید روی دستگاه یا شبیه‌ساز اجرا شود. چیزی شبیه تصویر زیر
    Starter App on Android

از ویژگی hot reload استفاده کنید.

فلاتر یک چرخه توسعه سریع با ویژگی hot reload ایجاد کرده که قابلیت بارگذاری کد برنامه در حالت اجرا بدون شروع مجدد برنامه یا از دست دادن وضعیت برنامه فراهم می کند. کافیست به سادگی یک تغییر در کد خود ایجاد کنید، به IDE یا ابزار خط فرمان خود بگویید که می‌خواهید بارگذاری شود، و تغییر در شبیه‌ساز شما، یا موبایل خود را ببینید. در زیر مثالی ساده برای درک این موضوع ارائه شده.

  1. رشته ی قرار گرفته شده
    'You have pushed the button this many times:' را به
    'You have clicked the button this many times:' تغییر دهید.
  2. دکمه " Stop " را فشار ندهید؛ بگذارید اجرای برنامه ادامه یابد.
  3. برای مشاهده تغییرات گزینه Save All, را بزنید یا اینکه گزینه Hot Reload را بزنید.(دکمه ای با آیکون شبیه به صاعقه ).

شما باید رشته تغییر داده شده را در برنامه تقریبا بلافاصله پس زدن دکمه مشاهده کنید.

VS Code: یک ویرایشگر سبک با اجرای فلاتر به همراه ابزارهایی برای debug کردن.

ایجاد یک پروژه

  1. VS Code را اجرا کنید
  2. گزینه View>Command Palette… را انتخاب کنید.
  3. در فیلد جستجو ‘flutter’ را وارد کرده و گزینه ‘Flutter: New Project’ را انتخاب کنید.
  4. نام پروژه خود را وارد کنید (e.g. myapp) و Enter بزنید.
  5. مسیر قرارگیری پروژه خود را انتخاب کنید و گزینه آبی رنگ OK را کلیک کنید.
  6. منتظر بمانید تا اقدامات اولیه ساخت پروژه انجام شود و مشاهده خواهید کرد که فایل main.dart در ویرایشگر نمایان می شود.

دستور بالا یک دایرکتوری پروژه فلاتر ایجاد می کند myapp یک یک دمو ساده می باشد. که از متریال برای ظاهر خود استفاده کرده است.

در مسیر پروژه، کد برنامه شما در lib/main.dart.

قرار دارد.

برنامه را اجرا کنید.

  1. مطمئن شوید که موبایل یا شبیه ساز اندروید در گوشه سمت راست پایین VSCode انتخاب شده باشد.
  2. F5 را بفشارید و یا اینکه گزینه Debug>Start Debugging فراخوانی کنید.
  3. منتظر بمانید تا اپ بر روی دستگاهتان اجرا شود.
  4. اگر همه چیز درست باشد، باید برنامه خود را در دستگاه یا شبیه ساز مشاهده کنید، چیزی شبیه به تصویر زیر:
    Starter App on Android

از قابلیت Hot Reload استفاده کنید.

فلاتر یک چرخه توسعه سریع با ویژگی hot reload ایجاد کرده که قابلیت بارگذاری کد برنامه در حالت اجرا بدون شروع مجدد برنامه یا از دست دادن وضعیت برنامه فراهم می کند.

  1. فایل lib/main.dart از کنید.
  2. عبارت
    'You have pushed the button this many times:' را به
    'You have clicked the button this many times:' تغییر دهید.
  3. توجه داشته باشید برنامه را باید اجرا شده باشد و گزینه Stop در قسمت فوقانی ویرایشگر را نیز نباید زده باشید.
  4. فایل را ذخیره کنید (cmd-s / ctrl-s), یا اینکه دکمه Hot Reload را انتخاب کنید (فلش دایره ای سبز رنگ).

تقریبا چند لحظه کوتاه بعد باید رشته های به روز شده در برنامه در حال اجرا را ببینید.

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

بیایید برخی از مفاهیم اصلی فلاتر را با ایجاد یک آپ کوچک یاد بگیریم.

نوشتن اولین برنامه با فلاتر