DropDownButton یک ویجت در فلاتر است که برای نمایش یک لیست از گزینه ها استفاده می شود. این ویجت به کاربر اجازه می دهد تا با کلیک بر روی یک دکمه، یک گزینه از لیست را انتخاب کند.
در این آموزش قراره کار با ویجت 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 به عنوان کلید آن استفاده میشه که در مثال بالا این مقادیر 1 و 2 نام گذاری شده بودند البته یادمان باشد مقداری که به این پارامتر اختصاص می دهیم که در مثال بالا 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 هم برای اختصاص فرزند به ویجت مورد نظر استفاده می شود
کار با تاریخ در دارت با کلاس DateTime
گاهی مواقع نیاز داریم که هنگامی که کاربر با این ویجت روبه رو می شود به جای نشان دادن یکی از آیتم ها نوشته ی مشخص ما را داشته باشد به طور مثال به جای نام یک شهر نوشته ی انتخاب شهر مورد نظر باشد
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."),
);
مقدار 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,
);
امیدوارم ازاین ویجت فلاتر لذت برده باشید و براتون جذاب بوده باشه .
[…] https://flutter-learn.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%88%db%8c%d8%ac%d8%aa-dropdownbutton/ […]
awli☺