آموزش فلاتر

آموزش فلاتر

قدم به قدم برنامه نویسی اپلیکیشن موبایل با فلاتر

سلام خدمت دوستان عزیز و همراهان گرامی و همیشگی هولوسن.

امیدوارم که حالتون خوب و پر از انرژی مثبت باشید.

امروز (۲۵ بهمن ماه ۱۳۹۹) این بلاگ رو شروع به نوشتن کردم. از اونجایی که یکی از خدماتی که هولوسن میده بولت ژورنال هست، تیم ما تصمیم گرفته که یک اپلیکیشن برای این منظور پیاده سازی کنه. چند وقت پیش من یک اپلیکیشن تحت اندروید نوشتم و تا مرز انتشارش هم رفتیم، ولی بعدا به این نتیجه رسیدیم که بدون داشتن اپلیکیشن ios این ورژن رو دادن بی فایده است. پس در تیم فنی تصمیم گرفتیم که استارت اپلیکیشن ios هم بزنیم.

حالا از اینجا به بعد جلسه به جلسه توضیح دادم که چه کارهایی در حین برنامه نویسی این پروژه انجام دادم. پس با من همراه باشید…

روز اول – چرا رفتیم سراغ برنامه نویسی فلاتر؟

۲۵ بهمن ۱۳۹۹

چند روز پیش میخواستم ضبط دوره کاتلین رو شروع کنم و داشتم روی اون کار میکردم. با خودم گفتم چرا از کاتلین برای این منظور استفاده نکنیم؟ همین شد که رفتم سراغ کاتلین. خب اولش یکم تحقیق کردم و دیدم کاتلین یه قابلیتی داره که میشه باهاش اپلیکیشن ios و android رو با هم نوشت. بعد از روی مستنداتی که خوندم متوجه شدم که کاتلین Multi-Platform هست و Cross-Platform نیست. یعنی مجبوری برنامه نویسی swift هم مثلا بلد باشی. برای همین گفتم چه کاریه. ولش کن. میریم سراغ یه کراس پلتفرم.

قبلا یه پروژه با React Native زده بودم و میدونستم چقدر دردسر داره. اما گفتم یه فرصت دیگه بهش بدم. فرصت دادن همانا و پاشیدن ارور در سر و صورتمان هم همانا. از همون اول مسیر خودشو نشون داد. برای همین از گزینه های روی میز حذف شد.

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

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

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

امیدوارم که با هم قدم های مثبتی برای رشد همدیگه برداریم.

این هم از اولین ویدیوی این مسیر. امیدوارم که لذت ببری.

روز دوم – از اول یه چیزایی رو باید ببینی

۲۷ بهمن ۱۳۹۹

بعضی وقتا خوبه که اجایل (agile) بود و سریع رفت سراغ استارت پروژه و کد زدن. اما بعضی وقتها باید دو قدم جلوترت رو هم ببینی (البته خیلی اتفاق افتاده که خودم همین اصل ساده رو رعایت نکردم).

خب منظورم چیه دقیقا؟

داشتم به ساختار پروژه نگاه میکردم و متوجه شدم که مثل اندروید که یه فایل strings.xml داره توی فلاتر همچین چیزی نداریم. حالا اگه من میخواستم جایی متنی رو عوض کنم باید توی خود سورس کد میگشتم دنبالش. حالا اگه قرار بود اپلیکیشن من MultiLanguage باشه چی؟ باید چه گلی به سرمون بزنیم؟

فکر کنم منظورم رو متوجه شده باشید. برای همین گشتم دنبال اینکه ببینم چطوری میتونم چندزبانه بودن رو توی فلاتر داشته باشم. از بین ویدیوهایی که توی یوتیوب دیدم این ویدیویی که لینکش رو میذارم از همه بهتر بود.

https://www.youtube.com/watch?v=lDfbbTvq4qM

خب حالا یه نگاهی هم به ویدیویی که از نتیجه کار گرفتم میندازیم.

روز سوم – ساختار اولیه

۲۹ بهمن ۱۳۹۹

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

چون ساختار اپلیکیشن رو اینطوری دیدم که پایین اپلیکیشنم یه منو داشته باشم پس از bottom navigation bar استفاده کردم. برای اینکه ببینم توی فلاتر چطوری باید این رو پیاده سازی کنم از این لینک کمک گرفتم.

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

همه ی کلماتی که باید ترجمه میشدن رو ترجمه کردم.

یه چیزی میخواستم مثل فایل colors.xml توی اندروید که همه رنگ بندی های اصلی برنامم رو یکجا داشته باشه. برای همین یه کلاس به اسم UiColors نوشتم.

حالا وقتش رسیده بود که قسمت هایی که میشد شکوند رو بشکونم. یعنی چی؟ یعنی باید کدهارو به قسمت های کوچکتری تبدیل میکردم. برای همین رفتم ببینم چطوری میتونم یه ویجت برای خودم بنویسم.

https://flutter.dev/docs/development/ui/interactive

بعد از اینکه یاد گرفتم، رفتم تمام کدهارو تا جایی که میشد ویجت ویجت کردم.

یه فونت خوشگل هم به اپلیکیشن فلاتریمون اضافه کردم.

https://flutter.dev/docs/cookbook/design/fonts

و شد آنچه شد. حتما ویدیورو ببینید تا نتیجه کار رو ببینید. خودم که خیلی حال کردم.

بدون نظر

فرم ارسال نظر
امتیاز شما*

۲۰٪ شکستن سد برنامه نویسی
۲۰٪ صفر تا صد جاوا
۲۰٪ صفر تا صد اندروید
۲۰٪ صفر تا صد کاتلین
۳۰٪ صفر تا صد جاوا
۳۰٪ شکستن سد برنامه نویسی
۳۰٪ صفر تا صد اندروید
۳۰٪ صفر تا صد کاتلین
توی زندگیت آدم خوش شانسی هستی؟ یه امتحان بکن.

ایمیل خودتو وارد کن و شانستو تست کن.

قوانین:

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