آموزش ویجت DropDownButton
در اموزش قراره کار با ویجت dropdownbutton را یاد بگیریم این ویجت برای انتخاب یک مورد از لیست چندین مورد استفاده میشه مثل انتخاب یک شهر از میان شهر های یک کشور و…
قبل از شروع آموزش dropdownbutton کد نویسی صفحه ی اصلی برنامه را انجام می دهیم.
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class DropDownButtonPage extends StatefulWidget {
@override
_DropDownButtonState createState() => _DropDownButtonState();
}
class _DropDownButtonState extends State<DropDownButtonPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.DROP_DOWN_BUTTON),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
//our code.
SizedBox(height: 600)
],
),
),
);
}
}
خروجی کد بالا به شکل زیر است.
خوب بریم یک نمونه از این ویجت را کد نویسی کنیم.
DropdownButton _normalDown() => DropdownButton<String>(
items: [
DropdownMenuItem(
value: "1",
child: Text(
"First",
),
),
DropdownMenuItem(
value: "2",
child: Text(
"Second",
),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
value: _value,
);
ویجت ما دارای دو گزینه است که می توانیم بین آن ها انتخاب کنیم متد onchanged هم موقعی که کاربر گزینه ی مورد نظر را تغییر می دهد صدا زده میشه و پارامتر Value_ به مقدار گزینه مورد نظر تغییر خواهد کرد که می توانیم از این مقدار در ویجت های دیگر استفاده کرده و طبق گزینه ی انتخابی کاربر رفتار متفاوتی را به کار بگیریم به خروجی زیر دقت کنید.
کار با پارامتر های ویجت مورد نظر
خوب قراره با مقادیر مورد نظر این ویجت آشنا شویم تا بتونیم به بهترین شکل ازش استفاده کنیم.
مقدار Value و Child
مقدار Value به عنوان کلید آن استفاده میشه که در مثال بالا این مقادیر ۱ و ۲ نام گذاری شده بودند البته یادمان باشد مقداری که به این پارامتر اختصاص می دهیم که در مثال بالا Value_ است نباید مقادیری غیر از این دو مقدار را داشته باشد وگرنه با خطای زیر روبه رو می شوید
I/flutter ( 4147): 'package:flutter/src/material/dropdown.dart': Failed assertion: 'items == null ||
I/flutter ( 4147): value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1': is not
I/flutter ( 4147): true.
مقدار Child هم برای اختصاص فرزند به ویجت مورد نظر استفاده می شود
مقدار hint و disabledhint
گاهی مواقع نیاز داریم که هنگامی که کاربر با این ویجت روبه رو می شود به جای نشان دادن یکی از آیتم ها نوشته ی مشخص ما را داشته باشد به طور مثال به جای نام یک شهر نوشته ی انتخاب شهر مورد نظر باشد
DropdownButton _hintDown() => DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "1",
child: Text(
"First",
),
),
DropdownMenuItem<String>(
value: "2",
child: Text(
"Second",
),
),
],
onChanged: (value) {
print("value: $value");
},
hint: Text(
"Please select the number!",
style: TextStyle(
color: TEXT_BLACK,
),
),
);
اگر onchanged یا item ها مقدار null داشته باشند می تونیم از disabledhint استفاده کنیم
DropdownButton _hint2Down() => DropdownButton<String>(
items: null,
onChanged: null,
disabledHint: Text("You can't select anything."),
);
مقادیر Style , Elevation , iconsize و Dense
مقدار iconsize برای تغییر سایز ایکون این ویجت به کار می رود
مقدار elevation اندازه ی سایه مورد نظر را برای این ویجت را تنظیم میکند
مقدار style هم برای دادن سبک مورد نظر به نوشته های این ویجت استفاده میشه
مقدار dense هم ارتفاع ویجت را تا جای ممکن کوچک می کند
به مثال زیر و خروجی آن دقت کنید
DropdownButton _normal2Down() => DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "1",
child: Text(
"First",
),
),
DropdownMenuItem<String>(
value: "2",
child: Text(
"Second",
),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
value: _value,
elevation: 2,
style: TextStyle(color: PURPLE, fontSize: 30),
isDense: true,
iconSize: 40.0,
);
امیدوارم ازاین ویجت فلاتر لذت برده باشید و براتون جذاب بوده باشه .
درباره پژمان
یک قطره از دریای بیکران فلاتر عاشق یادگیری به خصوص در حوزه برنامه نویسی
نوشته های بیشتر از پژمانمطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
awli☺