کتابخانه DatePicker فارسی فلاتر

برای پروژه شرکت نیاز به یه datepicker فارسی داشتیم. توی اینترنت چیزی که به دردمون بخوره و توی سبک مدنظر باشه پیدا نکردیم. به خاطر همین تصمیم گرفتم خودم بنویسمش.

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

تا به حال انقدر با یه پست هم‌دردی نکرده بودم!

حاصل این هم‌دردی و مغز سوت‌کشیده شد چنین چیزی که مشاهده می‌کنید:

این date picker هم تقویم فارسی (جلالی) و هم تقویم میلادی رو پشتیبانی می‌کنه، تماماً با زبان دارت نوشته شده و هم توی نسخه وب و هم اندروید و iOS فلاتر جواب می‌ده.
البته date picker مورد نیاز ما یه کم شرایط خاص داشت که اینجا به کار نمیومد و این یه چیز عمومی‌تره.
ضمن اینکه طبیعتاً منبع‌باز (open-source) هست و اگه چیزی خواستید بهش اضافه کنید یا بهبودش بدید، در خدمتم.

روش راه‌اندازی

برای استفاده ازش، اول باید پروژه رو بهش وابسته کنید؛ به این صورت که داخل فایل pubspec.yaml این کد رو اضافه می‌کنید:

dependencies:
  flutter_linear_datepicker: ^1.1.1

که نسخه 1.1.1 ممکنه تغییر کنه، موقع استفاده چک کنید آخرین نسخه باشه.

بعد با استفاده از یکی از دستورات پایین نصبش کنید:

با pub:

$ pub get

با Flutter:

$ flutter pub get

البته اگه ادیتورتون درست‌درمون باشه، خودش این مرحله رو انجام می‌ده.

در مرحله آخر هم پکیج رو داخل کلاس دارتی که می‌خواید استفاده کنید، باید ایمپورت کنید. به این صورت:

import 'package:flutter_linear_datepicker/flutter_datepicker.dart';

حالا که ایمپورت شد، می‌تونید ازش استفاده کنید.

چطور استفاده کنیم؟

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

LinearDatePicker(
  dateChangeListener: (String selectedDate) {
    print(selectedDate);
  },
);

استفاده پیشرفته
همه بلاهایی که می‌تونید سرش بیارید، توی این کد پایین مشخصه:

LinearDatePicker(
    startDate: &quot2004/10/17&quot, //yyyy/mm/dd
    endDate: &quot2020/02/20&quot,
    initialDate: &quot2010/11/15&quot,
    dateChangeListener: (String selectedDate) {
        print(selectedDate);
    },
    showDay: true, //false -> فقط انتخاب ماه و سال
    fontFamily: 'sans',
    showLabels: true, // متن بالای ستونا نشون داده شه یا نه
    textColor: Colors.black,
    selectedColor: Colors.deepOrange,
    unselectedColor: Colors.blueGrey,
    yearText: &quotسال | year&quot,
    monthText: &quotماه | month&quot,
    dayText: &quotروز | day&quot,
    columnWidth: 100,
    isJalaali: false // false -> میلادی
),

صفحه date picker توی سایت pub.dev (با لایک کردن مسرورم فرمایید):

صفحه گیت‌هاب date picker (با استار فرمودن مسرورم فرمایید):

کتابخونه‌های کمکی

از کتابخونه MarcinusX/NumberPicker برای انتخاب عددا استفاده شده. (با تغییرات توی کد)
از کتابخونه FatulM/shamsi_date هم برای تبدیل تاریخ به شمسی استفاده شده.

مطلب قبلیم