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

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

آموزش ویجت های فلاتر؛ ویجت چیست؟

در نخستین بخش از آموزش ویجت های فلاتر می‌خواهیم با هم ببینیم که اصلاً ویجت چیست و چه کاری انجام می‌دهد؟ به طور کلی ویجت ها را آبجکت‌های سطح بالایی به شمار می‌آورند که به منظور توصیف بخش‌های مختلف از یک برنامه مورد استفاده قرار می‌گیرند. ویجت ها برخلاف UI و عناصر آن که محدود به دکمه هستند این‌طور نیستند. برای مثال چیدمان‌های یک برنامه اعم از padding و یا alignment و…، داده‌ها از جمله تنظیمات و یا تم‌های برنامه و سایر مواردی از این دست همگی یک ویجت به شمار می‌آیند.

در ادامه 8 مورد از مهم‌ترین ویجت های فلاتر را آورده‌ایم و می‌خواهیم به بررسی آن‌ها بپردازیم پس با ما همراه باشید.

آشنایی با ویجت های فلاتر

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

ویجت Scaffold

کاری که این ویجت انجام می‌دهد این است که ساختار ابتدایی یک چینش دیداری را برای material desigh پیاده‌سازی می‌کند. به کمک این ویجت می‌توانید api ها را به منظور نمایش المان‌هایی مانند drawer, bottomsheet و یا snackbar در اختیار داشته باشید.

ویجت AppBar

این ویجت هم یکی از ویجت هایی است که از نوع material design بوده و برای شما یک app bar فراهم می‌آورد. در این ویجت المان‌هایی از جمله تولبار، تب بار، فلکس اسپیس بار و سایر مواردی از این دست وجود دارند.

ویجت text

با این ویجت می‌توانید متن مورد نظرتان را با هر شیوه style به نمایش درآورید.

ویجت Container

این ویجت کاری آسان و در عین حال ترکیبی انجام می‌دهد که موقعیت یابی‌های معمول را به وسیله size و painting در اختیار شما می‌گذارد.

ویجت Column

به کمک این ویجت همان‌طور که از نام آن هم مشخص است شما می‌توانید چیدمان یا همان layout فهرستی از child widget ها را به صورت عمودی درآورید.

ویجت Row

ویجت سطر یا row دقیقاً همان کاری را انجام می‌دهد که ویجت ستون یا column انجام می‌دهد. با این تفاوت که جهت آن‌ها را به صورت افقی و سطری تعیین می‌کند.

ویجت Image

به کمک این ویجت شما می‌توانید عکس‌ها و تصاویر را به نمایش درآورید.

ویجت ElevatedButton

این ویجت هم یک material design محسوب می‌شود و به جای ویجت raised button که استفاده از آن منسوخ شده است مورد استفاده قرار می‌گیرد.

اگر می‌خوای بهترین زبان های برنامه نویسی رو بشناسی کلیک کن 🙂

تقسیم بندی ویجت ها

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

1. ویجت های پلتفرم مخصوص که به نام Platform specific شناخته می‌شوند.
2. ویجت های مخصوص طرح‌بندی که به عنوان ویجت های Layout widgets قابل دسترسی هستند.
3. ویجت های مخصوص نگهداری که آن‌ها را تحت عنوان State maintenance می‌شناسیم.
4. ویجت های مستقل و پایه‌ای که به نام Platform independent / basic نیز شناخته می‌شوند.

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

آشنایی با ویجت های Platform specific

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

در مقابل ویجت هایی که منحصراً برای سیستم عامل آی او اس هستند براساس دستورالعمل های واسطه‌ای انسانی که به وسیله کمپانی اپل طراحی شده‌اند بوده و آن‌ها را به عنوان ویجت Cupertino می‌شناسند.

تعدادی از پرکاربردترین ویجت های پلتفرم خاص اندروید به شرح زیر هستند:

Scaffold, AppBar, BottomNavigationBar, TabBar, TabBarView, ListTile, RaisedButton, FloatingActionButton, FlatButton, IconButton, DropdownButton, PopupMenuButton, ButtonBar, TextField, Checkbox, Radio, Switch, Slider, Date & Time Pickers, SimpleDialog و AlertDialog

از جمله کاربردی ترین ویجت های Cupertino  هم می‌توانیم به موارد زیر اشاره کنیم:

CupertinoButton, CupertinoPicker, CupertinoDatePicker, CupertinoTimerPicker, CupertinoNavigationBar, CupertinoTabBar, CupertinoTabScaffold, CupertinoTabView, CupertinoTextField, CupertinoDialog, CupertinoDialogAction, CupertinoFullscreenDialogTransition, CupertinoPageScaffold, CupertinoPageTransition, CupertinoActionSheet, CupertinoActivityIndicator, CupertinoAlertDialog, CupertinoPopupSurface, و  CupertinoSlider.

ویجت های layout در فلاتر

• در این بخش از آموزش ویجت های فلاتر نوبت به ویجت های طرح‌بندی می‌رسد. در فلاتر شما می‌توانید یک تا چند ویجت را با هم ترکیب کرده و به یک ویجت جدید دست پیدا کنید. تعدادی از کاربردی ترین ویجت هایی که در این دسته قرار می‌گیرند را در ادامه با هم می‌بینیم:
• Container
• Center
• Row
• Column
• Stack

که تعدادی از این ویجت ها را در بخش اول به همراه کاربرد آن‌ها معرفی کرده‌ایم.

ویجت های State maintenance

کلیه ویجت هایی که در فلاتر وجود دارند در دو حالت هستند: StatefulWidget یا StatelessWidget .

StatelessWidget ها دارای هیچ‌گونه state information ی نبوده ولی گاهاً این احتمال وجود دارد که آن‌ها یک ویجت نتیجه شده از StatefulWidget ها را دارا باشند. به طور کلی ماهیت داینامیک یا پویایی که برای یک برنامه مطرح می‌شود به وسیله رفتار تعاملی این ویجت ها و همین‌طور عوض شدن وضعیت آن‌ها در طی تعامل کردن با برنامه به وجود می‌آید. مثلاً counter button یکی از ویجت هایی است که در این دسته قرار می‌گیرد.

ویجت های مستقل

ویجت های Platform independent / basic ویجت هایی پایه‌ای هستند که مستقل از پلتفرمی که ویجت در آن مورد استفاده قرار می‌گیرد کار می‌کنند. این ویجت ها برای به وجد آوردن واسط‌های کاربری چه ساده و چه پیچیده مورد استفاده قرار می‌گیرند و کاملاً مستقل از پلتفرم عمل می‌کنند. تعدادی از ویجت های کاربردی که در این گروه قرار می‌گیرند به شرح زیر هستند:

• ویجت text
• ویجت image
• ویجت Icon
• و…

خلاصه

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