آموزش استفاده از Google Flutter در پروژه های اندروید استودیو – اندروید نویسی

  •   شما اینجا هستید :
  •   شنبه, ۱۵ اردیبهشت ۱۳۹۷
  •   آموزش, اندروید استودیو, بلاگ
  •   علیرضا بوالحسنی
  •   بدون دیدگاه
  •   1131
  • به نام خدا با سلام ،

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

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

    Google Flutter یک ابزارک رابط کاربری (UI) است که وعده داده که دقیقا همان کاری را انجام دهد، به شما اجازه می دهد راهی برای توسعه UI ها برای آندروید و iOS از یک پایگاه داده ی مجزایی داشته باشید.

     

    Android Studio installation, explored some of its core features, and created a “Hello World” application, written entirely in Google Flutter. “>در پایان این مقاله پشتیبانی از Flutter را به نصب Android Studio اضافه کنید، برخی از ویژگی های اصلی آن را بررسی کرده و یک برنامه Hello World ایجاد کرده اید که به طور کامل در Google Flutter نوشته شده است.

     

    چرا باید از Google Flutter استفاده کنم؟

    Java.”>Google Flutter بر اساس Kotlin یا جاوا نیست. اگر می خواهید برای آن توسعه دهید، باید Dart را یاد بگیرید.

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

    framework, and libraries, Flutter lets you create a single UI to run on both Android and iOS.”>Cross-platform: با استفاده از یک رندر، چارچوب و کتابخانه ها، Flutter به شما امکان می دهد یک UI واحد را برای اجرا در هر دو Android و iOS ایجاد کنید. برای اطمینان از اینکه برنامه شما به همان اندازه در هر دو پلتفرم در خانه احساس می شود، Flutter ویدجت ها را با توجه به دستورالعمل های Cupertino (iOS) و Material Design (Android)، و تعدادی از بسته های Flutter که دسترسی به برخی از سرویس ها و API های خاص خود را دارند، فراهم می کند.
    سازگار با زبان های برنامه نویسی دیگر: Flutter با کد جاوا در اندروید و ObjectiveC و Swift در iOS ادغام می شود، بنابراین شما مجبور نیستید برنامه های موجود خود را برای استفاده از Flutter بازنویسی کنید.
    بازنگری داغ این روش معمول است که بر روی کد برنامه شما کار کند، در حالی که برنامه خود را بر روی یک دستگاه Android اجرا می کند تا آزمایشات را انجام دهد. زمان استراحت اندروید استودیو برای فشار دادن هر مجموعه ای از تغییرات به برنامه در حال اجرا واقعا می تواند به زمان توسعه خود را بخورند. source code into a running Dart Virtual Machine (VM).”>برای کمک به شما بیشتر مولد، Flutter دارای قابلیت بارگزاری داغ است که می تواند کد منبع به روز شده را به یک ماشین مجازی در حال اجرا (VM) بچسبانید. با استفاده از بازنگری داغ، شما به طور معمول نتایج تغییرات خود را در زیر یک ثانیه مشاهده خواهید کرد. حالت برنامه نیز حفظ شده است، بنابراین شما نیازی به صرف زمان صرفه جویی در حالت مورد نظر را به صورت دستی. اگر برنامه شما دارای یک صفحه ورود به سیستم باشد مجبور نیستید مجددا وارد حساب کاربری خود شوید پس از هر بار مجدد بارگیری .

     

    نصب Google Flutter و Dart

    گوگل Flutter SDK شامل تقریبا همه چیزهایی است که برای شروع کار با Flutter از جمله Dart SDK نیاز دارید. با این حال، در GitHub میزبانی شده است، شما احتمالا این SDK را با استفاده از Git به جای آن که آن را دانلود کنید، کلون کنید.

    یکی از مزایای اصلی کلون کردن یک پروژه، این است که بسیار آسان تر است که با نسخه های جدید به روز شود.

    هنگامی که آخرین نسخه Git را نصب کرده اید، آماده هستیم که Flutter را کلون کنیم:

    به صفحه GitHub Flutter بروید.
    روی «کلون یا دانلود» کلیک کنید و سپس URL را کپی کنید.
    پنجره پنجره Command Prompt (Windows) یا Terminal (Mac) را باز کنید و نوع “git clone” را “followed by” “-b beta” (از آنجایی که ما شعبه بتا Flutter را شبیه سازی می کنیم) و نشانی اینترنتی پروژه:

     

     

    بعد، با استفاده از دستور زیر، Flutter را به مسیر خود اضافه کنید:

     

     

    بررسی کنید که آیا با استفاده از فرمان Command Prompt / Terminal زیر هر وابستگیهای گم شده یا وظایف برجسته ای که باید انجام دهید، انجام دهید:

     

     

    اگر گزارش بعدی شما را هشدار دهد که نصب Flutter شما “x” روزه است، سپس موارد زیر را اجرا کنید:

     

     

    Google Flutter همچنین ممکن است هشدار دهد که نصب Xcode شما ناقص است. شما برای Xbox فقط برای Xos نیاز دارید. اگر فقط به اندروید علاقمند هستید، صرف نظر از این هشدار، زمان و فضای دیسک خود را ذخیره کنید.

     

    افزودن Google Flutter و Dart به Android Studio

    شما می توانید از Google Flutter با هر ویرایشگر متن استفاده کنید، اما استفاده از پلاگین های Flutter و Dart اختصاصی Android Studio بسیار ساده تر است.

    فرض کنید شما در حال اجرای Android Studio 3.0 یا بالاتر هستید:

    “Android Studio> Preferences …” را از نوار ابزار انتخاب کنید.
    “Plugins” را از منوی چپ انتخاب کنید.
    دکمه “Browse repositories…” کلیک کنید
    برای “Flutter” جستجو کنید. هنگامی که افزونه ظاهر می شود، دکمه “Install” همراه آن را کلیک کنید.
    در این مرحله، یک پنجره باید از شما بخواهد Dart را نصب کنید. روی “بله” کلیک کنید.
    راه اندازی مجدد اندروید استودیو.

     

    ایجاد اولین برنامه Google Flutter شما

    بهترین روش برای یادگیری یک فناوری جدید، استفاده از آن است، بنابراین اجازه دهید برنامه Hello World را با استفاده از Flutter و Dart ایجاد کنیم:

    از نوار ابزار Android Studio گزینه “New> New Flutter Project …” را انتخاب کنید.
    “Flutter application > Next” را انتخاب کنید.
    نام پروژه خود را به پروژه خود مشخص کنید و محل ذخیره آن را مشخص کنید.
    Point Android Studio به سمت Flutter SDK خود، با کلیک کردن بر روی آیکون “…” کوچک و رفتن به پوشه “Flutter” (در مک، این معمولا در پوشه Home شما ذخیره می شود). روی «Open» کلیک کنید.
    دامنه شرکت خود را وارد کنید و سپس روی “finish” کلیک کنید.

    فایل flutter_app / java / main.dart پروژه خود را باز کنید. قالب “Flutter application” شامل بسیاری از کد (که ما بعدا بررسی خواهیم کرد) اما اکنون اجازه دهید همه چیز را ساده و برنامه ای ایجاد کنیم که پیام “Hello World” را نمایش دهد. همه چیز را در این فایل پاک کنید و آن را با موارد زیر جایگزین کنید:

     

     

    برای اجرای این برنامه، این مراحل را دنبال کنید:

    یک دستگاه مجازی آندروید (AVD) را راه اندازی کنید یا یک دستگاه فیزیکی اندرویدی را به دستگاه توسعه خود وصل کنید.
    کشویی “Flutter Device Selection” (جایی که مکان نما در تصویر زیر قرار دارد) را باز کنید و دستگاه خود را انتخاب کنید.
    “Run> main.dart” را از نوار ابزار Android Studio انتخاب کنید.

    Google Flutter

    این برنامه ممکن است ساده باشد، اما برخی از مفاهیم اصلی توسعه با Flutter را نشان می دهد، پس بگذارید آن را از بین ببریم:

     

     

    در Dart، عبارت => عبارت کوچک برای {expression expression است؛ }

     

     

    در Flutter، تقریبا همه چیز یک ویجت است. برخی از ویجت های Flutter معادل تقریبی نمایش های Android هستند. برای مثال ویجت متن معادل TextView است. با این حال، در سطوح Flutter، ستون ها، بالشتک ها و حتی برنامه ها نیز به عنوان ویدجت طبقه بندی می شوند، به همین دلیل است که کلاس برنامه ما از چیزی به نام StatelessWidget گسترش می یابد.

    StatelessWidgets ویدجتهایی هستند که حاوی هیچ کشوری نیستند. همه ارزش های StatelessWidget نهایی هستند و نمی توانند در زمان اجرا تغییر کنند، بنابراین StatelessWidget به سادگی ارائه آنچه که به سازندگان آن منتقل می شود.

    مخالفت با StatelessWidget StatefulWidget است که می تواند در زمان اجرا تغییر کند.

     

     

    روش build() نحوه نمایش یک ویجت را توضیح می دهد. Flutter وقتی ساخت ویجت را در سلسله مراتب ویجت فراخوانی می کند، build() را ایجاد می کند و هر بار که ویجت باید به روز شود، دوباره اجرا می شود.

     

     

    Flutter همراه با پیاده سازی طراحی مواد است که شما می توانید با اعلان MaterialApp به عنوان ویجت سطح بالا برنامه خود اعمال کنید.

    در اینجا، ما از موضوع MaterialApp خارج از جعبه استفاده می کنیم، اما شما می توانید این موضوع را با ایجاد یک نمونه جدید از ThemeData () که شامل تغییرات مورد نظر شماست، سفارشی کنید، مثلا:

     

     

     

    استدلال “home” اشاره به ویجت است که UI اصلی را تعریف می کند، که در این مثال، داربست است.

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

     

     

    در اینجا، ما متن را برای نوار برنامه ما تنظیم می کنیم. در حالی که برنامه هایی مانند Scaffold و AppBar مخصوص برنامه های Material Design هستند، Text یک ویجت عمومی است که می توانید در هر برنامه استفاده کنید.

     

     

    مرکز یک ویجت طرح است که یک کودک تنها را می گیرد و آن را در وسط صفحه قرار می دهد، مانند LinearLayout با جاذبه مرکزی.

    ایجاد برنامه دوم Flutter ما: تعامل کاربر و StatefulWidgets

    ما اولین برنامه Google Flutter خود را ایجاد کرده ایم، اما این دقیقا یک برنامه هیجان انگیز نیست. یادگیری یک ابزار جدید و یک زبان برنامه نویسی کامل، کمی فراتر از محدوده این مقاله است، بنابراین برای برنامه دوم ما، تقلب و استفاده از یک الگو:

    انتخاب “New> New Flutter Project …”
    الگو “Flutter application” را انتخاب کنید و سپس “Next” را کلیک کنید.
    اجرای پروژه استاندارد را کامل کنید.
    اجرای این برنامه، با باز کردن “انتخاب دستگاه Flutter Device” کشویی و انتخاب دستگاه خود را از لیست.
    “Run> main.dart” را از نوار ابزار Android Studio انتخاب کنید.

    این برنامه شمارش تعداد دفعاتی که شما دکمه عملیاتی شناور را به شما نشان داده است.

    گوگل Flutter نسخه ی نمایشی

    اگر فایل flutter_app / java / main.dart را باز کنید، زیر را مشاهده خواهید کرد:

     

     

    این کد به طور خودکار تولید شده است تعدادی از ویژگی های Flutter ما هنوز در دست نیست:


    StatefulWidgets

    در Google Flutter، ویدجت یا بی ثبات و یا حالت عمومی است. StatefulWidget اطلاعات دولتی است که در پاسخ به تعامل کاربر می تواند در زمان اجرا تغییر کند.

    StatefulWidget این موارد را تشکیل می دهد:

    یک ویجت که کلاس StatefulWidget را گسترش می دهد، غیر قابل تغییر است. StatefulWidget واقعی یک شیء موقت است که برای ساختن برنامه در حالت فعلی خود استفاده می شود.
    یک کلاس دولتی که حاوی اطلاعات قابل تغییر است که ممکن است در طول عمر ویجت تغییر کند. اشیاء دولتی بین calls to build () برقرار می شوند، بنابراین می توانند اطلاعات را حفظ کنند.

    با استفاده از createState، ابعاد حالت را به داخل درخت ویجت وارد کنید.

    شما همچنین باید یک روش setState را تعریف کنید، که Flutter را هنگامی که وضعیت ویجت تغییر می کند، ایجاد می کند و این چارچوب را برای بازسازی این ویجت خاص تنظیم می کند.

     

     

    ردیف ها و ستون ها

    در Flutter، ویدجت ها را با قرار دادن آنها در داخل ویدجت های دیگر، اغلب در دو جهت، ترتیب می دهید:

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

    هر دو ردیف و ستون ویژگی های مختلفی دارند که به شما اجازه می دهد دقیقا همان جایی که هر کودک روی صفحه ظاهر می شود کنترل شود و چقدر فضای آنها در ردیف یا ستون اشغال می شود. در اینجا، ما از یک ویژگی mainAxisAlignment استفاده می کنیم تا مشخص کنیم که ویجت های کودک باید در محور اصلی والد قرار گیرند.

     

     

    اگر والد یک ستون باشد، محور اصلی محور عمودی است. اگر والد یک ردیف باشد، محور اصلی محور افقی است.

    تشخیص تعامل کاربر

    تفاوت بزرگ دیگری بین این برنامه و پروژه “Hello World” ما وجود دارد – این می تواند ورودی کاربر را تشخیص دهد!

    اگر یک ویجت از قبل تشخیص رویداد را پشتیبانی کند، شما فقط باید یک تابع را که می تواند تعامل مورد نظر را اداره کند منتقل کند، مثلا:

     

     

    ساده ترین راه برای بررسی اینکه آیا یک ویجت از شناسایی رویداد پشتیبانی می کند، بررسی اسناد آن است. به عنوان مثال، صفحه FloatingActionButton به این پشتیبانی از ویجت onPressed را روشن می کند.

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

    در این قطعه، GestureDetector به ورودی کاربر با فراخوانی onTap و سپس چاپ پیام به کنسول پاسخ می دهد:

     

     

    تغییرات زیر را در یک ثانیه انجام دهید

    اگر با برنامه «Instant Run» Android Studio آشنا هستید، می توانید با کشیدن تغییرات به صورت انتخابی صرفه جویی کنید، و نه ایجاد یک APK جدید هر بار که کد برنامه خود را تغییر دهید.

    گوگل Flutter ویژگی مشابه “Hot Reload” دارد که به شما اجازه می دهد کد و منابع به روزرسانی Dart VM را در حالی که حالت برنامه را پشتیبانی می کند، به روز کنید. این نرم افزار برای نمایش بارگیری مجدد گرم مناسب است:

    چند بار دکمه FAB را فشار دهید، بنابراین شمارنده نشانگر چیزی غیر از ۰ است.
    تغییر نام دلخواه به کد پروژه، به عنوان مثال تغییر:

     

     

    به:

     

     

    دکمه کوچک “Flutter Hot Reload” را در نوار ابزار اندروید استودیو (با استفاده از همان نماد مشابه Instant Run) را کلیک کنید.
    نگاهی به درخواست شما داشته باشید. عنوان باید بدون بازنشانی مقابله با صفر تغییر کند، نشان داده شده است که وضعیت برنامه حفظ شده است.

     

    در این مقاله، ما مقدمه ای برای Google Flutter و Dart ارائه کردیم – چه چیزی، چگونگی تنظیم آن و نحوه ایجاد برخی از برنامه های ساده.

    منتظر نظرات شما هستیم 🙂


  • 1 Star2 Stars3 Stars4 Stars5 Stars (3 رای, متوسط: 5٫00 از 5)
    Loading...

  • پک کامل UI
    روید ادز
    
      خبرنامه رویدکت
    باعضویت در خبرنامه رویدکت به دنیای اندروید متصل بمانید. برای عضویت اینجا کلیک کنید
      نویسنده
  • علیرضا بوالحسنی
  • زمان شما کوتاه است، پس آن را صرف زندگی کردن برای دیگران نکنید!
  • دیدگاه بگذارید

    اولین نفری باشید که دیدگاه میگذارد

    Notify of
    avatar
    wpDiscuz

    جستجو در بین مطالب بلاگ



    تبلیغات ویژه

    سورس فروشگاه خواروبار



    کسب درآمد


  • کسب و کار رویدکت در مرکز توسعه تجارت الکترونیکی وزارت صنعت، معدن و تجارت شناسایی شده و دارای نماد اعتماد الکترونیکی می باشد. برای تایید صلاحیت بر روی نماد ها کلیک کنید.
    اعتبار ما، اعتماد شما
  • logo-samandehi