فلاتر

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

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

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

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

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

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

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,
      );
مثال نهایی

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

پژمان

یک قطره از دریای بیکران فلاتر عاشق یادگیری به خصوص در حوزه برنامه نویسی

View Comments

Recent Posts

آموزش افزایش سرعت اجرای وب اپلیکیشن های فلاتر

اگر یک برنامه نویس فلاتر هستید و با از نسخه وب اپلیکیشن پروژتون استفاده میکنید…

3 هفته ago

آموزش جامع انتشار اپلیکیشن اندروید و فلاتر در فروشگاه گوگل پلی Google play

به عنوان یک برنامه نویس فلاتر یا اندروید بعد از اتمام پروسه طراحی اپلیکیشن نیاز…

2 ماه ago

دانلود سورس کد رابط کاربری اپلیکیشن فلاتر پروژه پادکست

طراحی رابط کاربری اپلیکیشن پادکست خود را با استفاده از این کیت توسعه UI/UX فلاتر…

2 ماه ago

فایربیس چیست؟ معرفی سرویس ابری Firebase و کاربردهای آن

فایربیس، پلتفرمی قدرتمند از شرکت گوگل برای توسعه و مدیریت برنامه‌های موبایل و وب است.…

2 ماه ago

آموزش پیاده سازی Method Channel در فلاتر + فیلم

فلاتر یک فریم ورک برنامه نویسی چندسکویی است که این امکان را برای برنامه نویس…

3 ماه ago

بهترین منابع برای آموزش رایگان برنامه نویسی فلاتر در سال 2024

فلاتر یک فریم ورک برنامه نویسی چندسکویی است که به وسیله آن میتوانید برای سیستم…

3 ماه ago