حوزه های زیادی در دنیای برنامه نویسی وجود دارند که یکی از شیرین و جذاب ترین حوزه های آن، برنامه نویسی موبایل می باشد. در چند سال اخیر، این حوزه رشد بسیار زیادی داشته است و این رشد را مدیون به وجود آمدن فریم ورک های جدید و بروز می باشیم.
فلاتر، یکی از بهینه ترین و جذاب ترین فریم ورک های توسعه برنامه های موبایل است که شما با فعالیت در این حوزه ی شگفت انگیز، قادر به توسعه و طراحی برنامه هایی با سرعت بالا و نمای بصری زیبایی خواهید بود.
در مبحث طراحی رابط کاربری برنامه های فلاتری، ویجت ها نقشی کلیدی و اساسی را در برنامه بازی می کنند و به ما این اجازه را می دهند تا بتوانیم با به کارگیری آن ها در برنامه رابط کاربری بهینه تر و جذاب تری را بسازیم.
در این مقاله از آکادمی آموزش برنامه نویسی کدیاد، قصد داریم تا در مورد بهترین و پرکاربردترین ویجت های موجود برای طراحی رابط کاربری برنامه ی موبایلی صحبت کنیم و همچنین در مورد خود فریم ورک فلاتر و ویژگی ها و کاربرد های آن بحث خواهیم کرد.
فریم ورک فلاتر چیست؟
قبل از اینکه بخواهیم به دل مقاله برویم و راجب ویجت ها و محبوب ترین آن ها با هم صحبت کنیم، بهتر است تا ذهنیتی در مورد فریم ورک فلاتر داشته باشیم و کارکرد و کاربرد های این فریم ورک بی نظیر را متوجه شویم…
ما با استفاده از فلاتر و زبان اصلی آن که دارت می باشد، می توانیم برنامه های موبایل را با طراحی های شگفت انگیزی با سرعت بالا برای Platform های مختلف (Android - IOS - Windows - Web App - macOs و..) توسعه دهیم.
این فریم ورک در سال 2017 توسط شرکت عظیم گوگل برای توسعه دهندگان معرفی شد که دارای معماری قانون مند تر نسبت به فریم ورک های توسعه موبایل دیگر بود. این فریم ورک قدرتمند تا کنون توانسته است تا توسعه دهندگان زیادی را در سرتاسر جهان به خودش جذب کند و جامعه برنامه نویسان شگفت انگیزی را ایجاد کند.
کاربرد ها و ویژگی های فلاتر
فلاتر، یک فریم ورک نوپا اما بسیار قدرتمند است که در حوزه های مختلفی کاربرد های جذاب و جالبی از خودش به نمایش گذاشته است. در این قسمت از مقاله می خواهیم تا در مورد کاربرد های جذاب این فریم ورک باهم صحبت کنیم و متوجه شویم که در چه مواقعی میتوان به سمت فلاتر رفت.
فلاتر کاربرد ها و ویژگی های متنوعی دارد که عبارت اند از:
- سرعت توسعه بالا: مدیریت زمان برای فلاتر در درجه ی اول قرار دارد. شما می توانید با توسعه یک برنامه با فلاتر به صورت همزمان چند خروجی از آن دریافت کنید و این کار به صورت فوق العاده ای در وقت شما صرفه جویی می کند.
- ویجت های پرکاربرد و متنوع: برای طراحی صفحات برنامه ی خود، شما می توانید از ویجت های متنوعی استفاده کنید. برای مثال: Button , Appbar, Scaffold , Container و …
- بومی سازی: شما می توانید هر موقع که خواستید برنامه ی فلاتری خود را به صورت نیتیو توسعه و ادامه دهید.
- مستندات کامل و متنوع: برای یادگیری و درک بهتر مفاهیم، فلاتر Documentation های متنوعی را برای یادگیری معرفی کرده است که بصورت کامل همه مباحث را در اختیار شما قرار می دهد.
برخی دیگر از کاربرد ها و ویژگی های فلاتر:
- سازگاری با سیستم های مختلف
- فریم ورکی متن باز
- داشتن قابلیت Hot reloading
- کد نویسی با زبان قدرتمند دارت
- آسانی در شخصی سازی برنامه
و…
ویجت در فلاتر چیست؟
زمانی که ما برنامه ای را در موبایل، سیستم عامل ها (ویندوز) یا یک برنامه ی وب را باز می کنیم، اولین چیزی که به چشم می خورد، اشیا و المان هایی است که برنامه نویس در طراحی آن برنامه استفاده کرده است. این اشیا و المان ها به برنامه ی ما روح می بخشد و امکان تعامل بین نرم افزار و کاربر را فراهم میسازد. به عبارتی دیگر، اگر این المان ها در برنامه نبودند، برنامه هم وجود نداشت.
برای درک بهتر، یک وبسایت را در ذهن خود تصور کنید، در این وبسایت شما عکس، متن، دکمه، اسلایدر، کارت ها و… را مشاهده می کنید. در برنامه های فلاتری هم برای ایجاد المان ها و اشیا در صفحه ی برنامه از مفهومی به اسم ویجت ها استفاده می شود.
ویجت های به ما این امکان را می دهند تا المان های جذابی را با توجه به دیزاین و شخصی سازی برای برنامه طراحی کنیم. به عنوان مثال، برای ساخت یک خانه ما نیاز به آجر برای ساخت دیوار داریم. در برنامه هم به همین شکل است! برای طراحی رابط کاربری (User Interface) در فلاتر ما از ویجت (Widget) ها برای طراحی المان ها استفاده می کنیم.
انواع ویجت های فریم ورک فلاتر
ویجت ها در فلاتر انواع و دسته بندی های مختلفی دارند که باید به عنوان یک برنامه نویس فلاتر با آن ها آشنایی کاملی داشته باشیم تا متوجه شویم که چه موقع باید از چه نوع ویجتی استفاده کنیم. در این قسمت در مورد انواع ویجت های فلاتر صحبت خواهیم کرد…
نکته مهم: به صورت پیش فرض برنامه نویسان نمی توانند اطلاعات یک ویجت را تغییر دهند. اما برخی از ویجت ها شامل یک State می شوند که اطلاعاتی را در طول برنامه درون خود نگهداری می کنند که قابلیت تغییر اطلاعات را دارند که به آن ها Stateful widgets می گویند.
دسته بندی ویجت ها براساس کاربرد آن ها به دسته های مختلفی تقسیم می شوند که عبارت اند از:
- ویجت های Animation: برای ساخت و نمایش انیمیشن ها و حرکات در برنامه استفاده می شوند مانند Scale, Fade, Hero و…
- ویجت های Accessibility: ویجت های دسترسی هستند که به ما در دسترس پذیری برنامه کمک می کنند . برای مثال کنتراست برنامه یا تغییر اندازه فونت و…
- ویجت های Cupertino: ویجت هایی مختص طراحی رابط کاربری IOS
- ویجت های لایه ای
- ویجت های مخصوص نمایش تصویر، آیکون و متن
- ویجت های مخصوص تعامل با کاربر مثل دکمه ها
چرخه ویجت ها در فلاتر چگونه است؟
ویجت ها هم مانند برنامه ها، دارای یک چرخه حیات بسیار مهم هستند که هر برنامه نویس فلاتری باید از چرخه ایجاد تا اجرای یک ویجت در برنامه آگاهی داشته باشد. در این قسمت قصد داریم تا در مورد این چرخه به صورت تخصصی صحبت کنیم…
یک ویجت از مرحله ی تعریف (ایجاد) تا اجرا در برنامه باید از مراحل زیر عبور کند از جمله:
- initState (مناسب برای stateful Widget): این متد زمانی که یک ویجت به درخت ویجت های یک برنامه اضافه شود اجرا خواهد شد و این مرحله فقط یکبار انجام می پذیرد که در این مرحله متغیر های لازم به مقدار دهی به ویجت اضافه می شوند.
- Build: این متد هر بار که ویجت مجدد ساخته می شود اجرا می شود و محدودیتی در تعداد اجرا وجود ندارد.
- didChangeDependencies: این متد بعد از متد initState اجرا می شود و هر موقع که وابستگی های یک ویجت تغییر کند دوباره این متد اجرا خواهد شد.
- didUpdateWidget: این متد زمانی که تنظیمات یک ویجت تغییر کند اجرا می شود.
- deActivate: این متد زمانی که ویجت مورد نظر از درخت ویجت ها حذف شود اجرا می شود.
- Dispose: این متد هم در زمانی که نمونه ی واقعا و به صورت دائمی از درخت حذف شود، اجرا خواهد شد.
برای درک بهتر این چرخه، تصویر زیر را با دقت مشاهده کنید:
9 تا از مهم ترین و پرکاربردترین ویجت های فلاتر
ویجت های بسیار زیادی در فریم ورک فلاتر وجود دارند که می توانیم در هر شرایطی بسته به نیاز خودمان از یک سری ویجت ها در برنامه استفاده کنیم. همانطور که میدانید، ویجت ها المان های اصلی یک برنامه ی موبایلی هستند که کاربرد اصلی آن ها به وجود آوردن رابط کاربری و رابطه بودن میان کاربر و برنامه می باشند. اگر ویجت ها در یک برنامه وجود نداشته باشند، برنامه ای هم وجود نخواهد داشت. در این قسمت از مقاله ما سعی داریم تا در مورد 9 ویجت مهم و پرکاربرد فریم ورک فلاتر صحبت کنیم. یادگیری این ویجت های اصلی در بحث یادگیری فلاتر یک امر ضروریست.
شاید سوالی که در حال حاضر ذهن شما را مشغول کرده است این باشد که کاربرد این ویجت ها در برنامه چیست و چرا برای یک برنامه نوشته شده با فلاتر بسیار حیاتی هستند؟ جواب این سوال بسیار ساده می باشد. هر فریم ورکی که در دنیای برنامه نویسی وجود دارد، دارای ساختار دقیق برای پیاده سازی می باشد. فلاتر هم به همین گونه است. شما برای ساخت یک برنامه به صورت پیش فرض و دارا بودن ساختار دقیق باید از این ویجت های استفاده کنید تا برنامه به صورت اصولی پیش برود.
برخی از ویجت های کاربردی و مهم در این فریم ورک عبارت اند از:
- ویجت Scaffold: اولین و مهم ترین ویجت فلاتر، Scaffold می باشد که باعث ساخته شدن ساختار اولیه برنامه بر اساس استاندارد طراحی Material Design می شود.
- ویجت Text: این ویجت برای قرار دادن متنی با استایل دلخواه می باشد.
- ویجت Appbar: با این ویجت شما می توانید یک سربرگ بالایی برای برنامه ی خود طراحی کنید که دربردارنده ی ویجت های دیگر است.
- ویجت Column: این ویجت برای طراحی ستون ها به صورت عمودی به کار می رود.
- ویجت Container: یک ویجت که ترکیبی از موقعیت یابی معمول size و painting ویجت های دیگر است.
- ویجت Row: یک Layout به صورت افقی برای نگهداری ویجت های دیگر می سازد.
- ویجت Image: برای قرار دادن یک تصویر در برنامه استفاده می شود.
- ویجت Safe Area: زمانی که ما نمی خواهیم از AppBar استفاده کنیم، مورد استفاده قرار میگیرد. به عبارت دیگر زمانی که میخواهید همه ی صفحه ی موبایل در اختیار خودتان قرار بگیرد می توانید از این ویجت استفاده کنید.
- ویجت Rich Text: این ویجت زمانی در برنامه به کار می رود که بخواهیم قسمتی از متن را با دیگر قسمت های متن به صورت متفاوت تری نمایش دهیم.
و…
ویجت های بسیار زیاد دیگری هم وجود دارند که در این قسمت سعی کردیم تا محبوب ترین های آنها را به شما عزیزان معرفی کنیم.
معرفی دوره آموزش فلاتر کدیاد
اگر شما تا به اینجای کار به فریم ورک قدرتمند و کاربردی فلاتر علاقه مند شده اید و این سوال را در سر دارید که چگونه باید این مسیر پر از چالش را طی کنید، آکادمی آموزش برنامه نویسی کدیاد این اطمینان خاطر را به شما عزیزان و همراهان می دهد که در این مسیر شگفت انگیز با دوره ی بی نظیر آموزش صفر تا صد فلاتر همراه با پروژه های عملی متنوع در کنار شما باشد.
شما می توانید با ثبت نام در دوره فلاتر آینده ی شغلی و مهارتی خود را تضمین کنید و پس از گذراندن این دوره ی جذاب، به بازار کار بپیوندید.
پس اگر قصد یادگیری این فریمورک محبوب را دارید، دوره آموزش فلاتر آکادمی کدیاد می تواند در طی کردن این مسیر به شما کمک زیادی کند و مسیر هموار تری را در اختیار شما قرار دهد. راستی برای آموزش فلاتر باید زبان برنامه نویسی دارت را به خوبی فرا گرفته باشید. به همین خاطر، آکادمی کدیاد یک دوره آموزش رایگان زبان دارت را طراحی کرده تا 0 تا 100 این زبان برنامه نویسی را به صورت پروژه محور به شما عزیزان آموزش دهد!
کلام آخر
بعد از خواندن این مقاله از شما انتظار می رود تا به خوبی با فلاتر و ویجت های محبوب و پرکاربرد آن آشنا شده باشید. همچنین، گفتیم که آکادمی کدیاد با دوره های آموزش فلاتر و آموزش رایگان دارت، تمامی این موارد را به ساده ترین زبان آموزش می دهد و دیگر نیازی به یادگیری از ده ها منبع گوناگون نخواهید داشت!
اگر در رابطه با این فریم ورک یا هر موضوعی در مورد ویجت ها سوالی داشتید، می توانید در قسمت کامنت ها از ما بپرسید و ما سریعا پاسخگوی شما عزیزان خواهیم بود.
سوالات متداول
- با فریم ورک فلاتر، برای چه سیستم عامل هایی می توان خروجی گرفت؟
تقریبا برای همه OS ها می توان خروجی دقیق گرفت برای مثال، سیستم عامل های IOS , Android , Windows, macOS, Web App.
- تفاوت فریم ورک با کتابخانه در چیست؟
تفاوت اصلی و دقیق را می توان اینگونه گفت که، کتابخانه یعنی کد آماده ای که به کد شما متصل می شود و شما از کارایی و ویژگی های آن کتابخانه استفاده می کنید. اما فریم ورک یعنی اینکه شما باید کدتان را طبق دستورات و قوانین آن چارچوب بنویسید.
- کارایی ویجت ها در برنامه های فلاتری چیست؟
ما با قرار دادن ویجت ها، المان های ساختار یک برنامه را برای ارتباط کاربر با برنامه قرار می دهیم.
- برای استفاده تمام صفحه باید از چه ویجتی استفاده کرد؟
برای اینکه بتوانید یک فضای تمام صفحه در یک اکتیویتی داشته باشید باید از ویجت خارق العاده Safe Area استفاده کنید.
- چرا با فریم ورک فلاتر می توان در زمان صرفه جویی کرد؟
به دلیل اینکه شما می توانید با یکبار کدنویسی، برای تمام سیستم عامل ها خروجی جذاب و بدون نقص بگیرید.