ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

آموزش طراحی منو آبشاری در فلاتر با ویجت DropDownButton

2 دیدگاه
آموزش فارسی فلاتر

DropDownButton یک ویجت در فلاتر است که برای نمایش یک لیست از گزینه ها استفاده می شود. این ویجت به کاربر اجازه می دهد تا با کلیک بر روی یک دکمه، یک گزینه از لیست را انتخاب کند.

در این آموزش قراره کار با ویجت dropdownbutton را یاد بگیریم این ویجت برای انتخاب یک مورد از لیست چندین مورد استفاده میشه مثل انتخاب یک شهر از میان شهر های یک کشور و…

DropDownButton دارای دو ویژگی اصلی است:

  • items: این ویژگی یک آرایه از DropdownMenuItem است که لیست گزینه های موجود را نشان می دهد.
  • value: این ویژگی مقدار فعلی انتخاب شده را نشان می دهد.

نمونه BackDropButton

پیاده سازی 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)
          ],
        ),
      ),
    );
  }
}

خروجی کد بالا به شکل زیر است.

صفحه ی اصلی
Sample

خوب بریم یک نمونه از این ویجت را کد نویسی کنیم.

 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_ به مقدار گزینه مورد نظر تغییر خواهد کرد که می توانیم از این مقدار در ویجت های دیگر استفاده کرده و طبق گزینه ی انتخابی کاربر رفتار متفاوتی را به کار بگیریم به خروجی زیر دقت کنید.

نمونه ویجت BackDropButton
Show BackDropButton

کار با پارامتر های ویجت DropdownButton

خوب قراره با مقادیر مورد نظر این ویجت آشنا شویم تا بتونیم به بهترین شکل ازش استفاده کنیم.

مقدار Value و Child

مقدار 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

مقدار 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,
          ),
        ),
      );
نشان دادن نام دسته بندی
hint در این ویجت

اگر 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,
      );
اموزش و مثال نهایی BackDropButton
مثال نهایی

امیدوارم ازاین ویجت فلاتر لذت برده باشید و براتون جذاب بوده باشه .

2 پاسخ به “آموزش طراحی منو آبشاری در فلاتر با ویجت DropDownButton”

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پژمان
18 مارس 2020
آموزش فارسی فلاتر
آموزش فارسی flutter