آموزش فلاتر ( Flutter ) - طراحی UI

سلام به همگی چند وقتی میشه با فلاتر آشنا شدم . نسبت به تجربه ای که تو اندروید داشتم طراحی UI تو فلاتر خیلی آسونتره واسه همین تصمیم گرفتم یه پروژه با فلاتر درست کنم و تصمیم دارم پروژمو این جا با شما به اشتراک بزارم. تو این مجموعه از پست ها چند تا از مهم ترین موضوعات فلاتر رو باهم بررسی می‌کنیم و در نهایت یک پروژه کامل رو به پایان میرسونیم . این پست دومین پست از این سری هستش واسه دیدن قسمت قبل به این لینک مراجعه کنید.

چیز هایی که تو این مجموعه یاد میگیریم به چند قسمت تقسیم میشن:

• مقدمه .
• طراحی UI اولیه اپلیکیشن .
• ساخت مدل ها و کد های مربوط به تبدیل اون به Json (از کتاب خونه معروف json_serializable استفاده می‌کنیم).
• ارتباط با سرور ( از کتاب خونه Dio تو این قسمت استفاده شده ).
• استفاده از کتاب خونه cached_network_image برای گفتن عکس از اینترنت و کش کردن اون.
• استفاده از انیمیشن در فلاتر.
• ساخت launcher icon دلخواه برای android و ios در فلاتر.

طراحی UI :

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

همونطور که در پست قبل گفتم UI این اپ رو تو یک ویدیو آموزشی در YouTube دیدم . و بعد از این که UI مورد نظر رو پیاده سازیش کردم تونستم قابلیت های دیگش رو ( مثل ارتباط با سرور ، دریافت عکس از اینترنت و ...) کامل کنم. میتونید از طریق این لینک ویدیو رو تماشا کنید و اپتون رو طراحی کنید .

نکته:

شاید UI که تو ویدیو می بینید با فایل گیف بالا یکم متفاوت باشه دلیلش هم این هست که من یه سری تغییرات بهش اضافه کردم. فعلا نگران تفاوت هاش نباشید در قسمت های بعدی کم کم کاملش میکنیم .

با نظراتتون من رو همراهی کنید.