آموزش جامع فلاتر (Flutter) و زبان Dart از صفر

  • مدرس : عماد قاسم پور
  • سطح آموزش : متوسط
  • مدت : ۳۷۸ دقیقه
  • تعداد دانشجو : ۱۸۱۵

آموزش جامع فلاتر (Flutter) و زبان Dart از صفر کاملا رایگان!

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

 

اصلا چرا باید فریمورک فلاتر رو یاد بگیریم و برای پروژه ها از فلاتر استفاده کنیم؟

برای قدم اول باید ببینیم flutter چی هست🕵️‍♀️

Flutter  یک فریمورک متن باز هست که توسط کمپانی گوگل در سال 2017 معرفی شد و در حال حاضر stable شده و طرفداران زیادی پیدا کرده به طوریکه بسیاری از native کارها، حداقل یکبار تستش کردن.

زبان برنامه نویسی فلاتر، دارت هست. اگر تجربه کار کردن با زبان های #c و java رو داشته باشین راحت تر میتونین dart رو یاد بگیرین. زبان دارت قابلیت های زیادی رو به فلاتر میده که مقداریش رو براتون شرح میدیم.

در قدم دوم باید مزیت های flutter رو بررسی کنیم تا ببینیم ارزش یاد گرفتن رو داره یا نه🤔

و اما مزیت های Flutter چی هست؟

Hot Reloading:

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

آموزش جامع فلاتر flutter و قابلیت هات ریلودینگ

hot reloading in flutter

 

Multi Platform:

یک بار کدنویسی کنین و برای اندروید، آی او اس، وب، دسکتاپ و… به راحتی خروجی بگیرید❗❕

Native Performance:

خروجی اپ هایی که می گیرید نیتیو (Native) خواهد بود لذا راندمانش بالاست.

طراحی رابط کاربری (UI)  در فلاتر:
به دلیل معماری لایه ای که در فلاتر وجود داره، میتونین رابط های کاربری زیبا، انعطاف پذیر و کاملا سفارشی رو طراحی کنین.همچنین فلاتر میتونه به ویژگی های بومی مربوط به پلتفرم های android و ios دسترسی پیدا کنه.مثلا شما میتونین  ui یک اپلیکیشن رو با flutter بنویسین و بقیه لایه های برنامه رو به زبان های دیگه مثل Java ،Swift ، ObjC و  Kotlin بسپارین لذا دست تون کاملا باز هست…

 

خوب پس معطل چی هستید؟ حالا که متوجه شدید چرا آموزش Flutter اونم از نوع ویلرنیش و رایگانش مهمه، در دوره ثبت نام کنین تا از تکنولوژی روز عقب نمونین مخصوصا که طبق اعلام گوگل، احتمالش زیاد هست که در سیستم عامل جدید گوگل با نام Fuchsia پرکاربرد باشه…

 

 

 

 

دروس جامع فلاتر (Flutter) و زبان Dart از صفر

  • درس 1 : معرفی دوره آموزشی فلاتر (Flutter)

    ۱۲ دقیقه

    در این ویدئو توصیح میدیم که در دوره آموزش جامع فلاتر چی میخوایم بگیم و به کجا برسیم؟

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

     

    اصلا چرا فلاتر؟ چرا یادگیری زبان جدیدی مثل Dart ؟

    مقایسه Google Flutter با React Native

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • درس 2 : آموزش نصب و راه اندازی فلاتر (Flutter) در اندروید استودیو

    ۱۰ دقیقه

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید


    برای نصب و راه اندازی فلاتر ما نیاز به نرم افزار Android Studio داریم که میتونید از طریق این لینک دانلود کنید.دقت داشته باشید که برای دانلود برنامه ، پراکسی وصل باشد.

  • درس 3 : نصب و راه اندازی شبیه ساز اندروید

    ۷ دقیقه

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

    ما برای توسعه اپلیکیشن های اندروید نیاز داریم یک شبیه ساز قدرتمند رو در سیستم عامل خودمون نصب کنیم که بتونیم از طریق اون اپلیکیشن مورد نظرمون رو بررسی و توسعه بدیم
    دو شبیه ساز MEmu Android Emulator و Genymotion و Bignox هستن که این قابلیت رو به ما میدن که ما میریم سراغ MEmu.
    نرم افزار MEmu Android Emulator یک شبیه ساز اندروید بسیار قدرتمنده که شما میتونید اون رو در ویندوز نصب و راه اندازی کنید و از طریق اون بتونید اپ هایی که توسعه دادین رو مشاهده و بررسی کنید.
    برای دانلود نرم افزار MEmu روی این لینک کلیک کنید.دقت داشته باشید که برای دانلود برنامه پراکسی فعال باشد.

  • ۱۴ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

    در زبان Dart ما 6 نوع Data Type داریم که عبارتند از int , double , string , bool , list , map
    int برای نمایش اعداد صحیح به کار می رود (به طور مثال 15690 یا 1340 یا 10 و …)

    double برای نمایش اعداد اعشاری به کار می رود

    string برای نمایش مقادیر رشته ای کاربرد دارد

    bool برای نمایش مقادیر صحیح یا غلط به کار می رود

    list شما در متغیر list میتونید انواع متغیرها (int , double , string , bool) رو ذخیره کنید

    همونطور که مشاهده میکنید ما در متغیر all که از نوع list هست 4 متغیر از نوع int و double و string و bool ذخیره کردیم که خیلی تو زبان Dart این متغیر list کاربرد داره.

    همچنین شما میتونید در زبان Dart برای تعریف متغیرها همانند جاوااسکریپت از کلید واژه var استفاده کنید که مخفف کلمه Variable هست.
    دقت داشته باشید که بعد از تعریف متغیر از طریق var دیگه نمیتونید نوع اون رو تغییر بدین. به طور مثال داریم

    خب مشاهده میکنید که متغیر y از نوع string هست و طبیعتا ما دیگه نمیتونیم نوع این متغیر رو تغییر بدیم و به طور مثال در خط بعدی بنویسیم

    چون y از نوع رشته هست دیگه نمیتونه به هیچ نوع دیگه ای تغییر پیدا کنه و به طور مثال int باشه

    نکته : برای نمایش مقادیر متغیر ها در کنسول نرم افزار Android Studio میتونید از دستور print استفاده کنید

  • ۷ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

    دستور if دقیقا مثل JavaScript و PHP و … برای بررسی یک شرط کاربرد داره. در صورتیکه شرط درست باشه ، کدهای درون دستور if اجرا میشه و اگر شرط نادرست باشه کد پس از پایان دستور if اجرا میشه.
    به طور مثال داریم

    حالا بیایم یک مثال دیگه بزنیم که بررسی کنیم یک عدد فرد هست یا زوج

  • ۳ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

    حلقه for به تعداد معینی یک قطعه کد را بصورت حلقه ای تکرار می کند.
    به طور مثال داریم

  • ۱۵ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد


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

    در مثال زیر تابع welearn پس از فراخوانی توسط تابع main ، مقدار “Welearn Academy” را به تابع main برمیگردونه

  • ۱۷ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

    در فلاتر تمام المان ها ، تم ها و … توسط Widgets مدیریت میشه. Widgets اصلی ترین عنصر برای ساخت و طراحی رابط کاربری هستن.توی جاوا ما بحث view رو داشتیم اما در فلاتر (Flutter) از طریق زبان برنامه نویسی Dart ما Widget رو داریم.
    ویجت ها در فلاتر (Flutter) قابل تغییر نیستند و از این جهت با ویو در جاوا متفاوت هستند. وقتی Widgets با توجه به عملکرد اپلیکیشن تغییر میکنند و یا وضعیت آنها تغییر میکند فلاتریک درخت عملکردی از آنها در چهارچوب Widget ایجاد میکند که جزئیات را نمایان می سازد.

    همانطور که میدانیم در اندروید ویو ها یک بار اصطلاحا draw یا کشیده می شوند و مجددا تکرار نمی شود.

  • ۱۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۲۲ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۲۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۸ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد


    در بخش قبل یک کتابخانه به نام http رو به برنامه اضافه کردیم و در نهایت یک Request ارسال کردیم به یک وب سرویس و Response رو در کنسول برنامه اندروید استودیو دریافت کردیم. حالا در این بخش قصد داریم این Response که در کنسول دریافت کردیم و در برنامه و App قرار بدیم
    حالا در این بخش قصد داریم json object رو در داخل یک کلاس تعریف کنیم تا بتونیم به هر کدام از آیتم های (نام محصول ، شناسه ، قیمت ، تصویر و …) داخل این json object دسترسی داشته باشیم.
    حالا در پوشه libs یک فایل (Dart File) به نام Product ایجاد و یک کلاس به نام product نیز تعریف می کنیم.

    طبیعتا این کلاس باید آیتم های json object رو داشته باشه. پس باید یک سری متغیر در این کلاس تعریف می کنیم.

    حالا برای مقدار دهی اولیه 6 آیتم کلاس product از constructor استفاده می کنیم. در اندروید استودیو میتونید با کلید ترکیبی Alt+Insert آیتم constructor رو انتخاب کنید.

    حالا همه آیتم های کلاس رو برای افزودن به constructor انتخاب می کنیم.

    خب constructor کلاس product ایجاد شد

    حالا فایل Product.dart رو به فایل اصلی پروژه import می کنیم.

    در قدم بعدی در داخل کلاس _StoreState یک لیست از product به نام items با مقدار اولیه آرایه ایجاد می کنیم.

    حالا در GridView به جای مقدار استاتیک 10 (نمایش تعداد محصولات) لیست items رو قرار می دهیم.

  • ۳۹ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۹ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد


    در این بخش قصد داریم نقشه گوگل رو در برنامه نمایش بدیم و با یک مثال کاربری و جذاب ، لیست شعبه های فروشگاه آنلاین با اطلاعات اون رو در نقشه گوگل نمایش بدیم.
    برای استفاده از نقشه گوگل وارد وب سایت pub.dev می شیم.

    با جستجو عبارت google map کتابخانه google map flutter رو انتخاب کنید. این کتابخانه در برنامه های اندروید و ios نیز کار میکنه.

    حالا گام های زیر رو پیش برید
    1- وارد بخش Google Map میشیم و یک پروژه تعریف می کنیم. دقت کنید که قبل از ایجاد پروژه باید با حساب کاربری گوگل وارد شده باشید و از پروکسی مناسبی استفاده کنید.
    2- بر روی گزینه Console کلیک کنید.سپس بر روی گزینه Apps کلیک کنید و New Project رو انتخاب کنید.

    3- پس از ایجاد پروژه ، با کلیک بر روی Create Project: welearnflutter (طبق تصویر زیر) وارد صفحه پروژه می شوید.

    4- بر روی APIs & Services کلیک کنید
    5- بر روی ENABLE APIS AND SERVICES کلیک کنید
    6- در این بخش میتونید انواع ویژگی هایی (Maps SDK for Android ، Maps SDK for iOS ، Maps JavaScript API و …) که گوگل ارائه میده رو استفاده کنید.
    7- وارد بخش Maps SDK for Android بشید و بر روی گزینه ENABLE کلیک کنید
    8- حالا دوباره وارد بخش Dashboard وب سایت بشید (کلیک بر روی لینک Google Cloud Platform) و از طریق بخش APIs & Services گزینه Credentials رو انتخاب کنید.
    9- طبق تصویر زیر بر روی Create credentials کلیک و API key رو انتخاب کنید تا یک API key دریافت کنید.

  • ۱۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۲۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۳ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۱۴ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۲۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

نظرات آموزش جامع فلاتر (Flutter) و زبان Dart از صفر

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما