패키지, 저장소 및 앱 카테고리 검색

flutter_datetime_picker 표지
패키지 상세v1.5.1

flutter_datetime_picker

플러터용 날짜 및 시간 선택기로 영어, 네덜란드어, 중국어에서 날짜/시간/날짜 및 시간을 선택할 수 있으며, 사용자 정의 피커 콘텐츠도 만들 수 있습니다

30일 다운로드
1.3만
좋아요
908
Pub 점수
60

패키지 설치

flutter pub add flutter_datetime_picker

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

영어, 네덜란드어, 중국어를 지원하는 사용자 정의 가능한 날짜 및 시간 선택기 기능을 제공하는 플러터 패키지입니다. 사용자는 날짜, 시간 또는 둘 다를 선택할 수 있으며, 선택기의 외관과 내용을 맞춤설정할 수 있는 옵션도 제공합니다. 유연한 UI 디자인을 필요로 하는 지역화된 날짜/시간 입력이 필요한 앱에 적합합니다. 이 패키지는 오픈소스이며 GitHub에서 유지 관리되며 개발자가 선택기의 동작과 표시에 대해 완전한 제어권을 갖습니다.

사용 사례

  • 날짜 선택이 필요한 폼 입력
  • 시간 기반 스케줄링 기능
  • 다국어 앱 인터페이스
  • 사용자 정의 가능한 UI 컴포넌트
  • 날짜 및 시간 범위 선택기
  • 로컬라이즈된 사용자 경험

주요 기능

  • 다중 언어 지원 (영어, 네덜란드어, 중국어)
  • 사용자 정의 가능한 피커 콘텐츠 및 스타일
  • 날짜, 시간 또는 결합된 날짜-시간 모드 선택 가능
  • 오픈소스, 공개 저장소
  • pub.dev를 통한 간편한 통합
  • 크로스 플랫폼 호환성

적합한 대상

  • 다국어 앱을 개발하는 개발자
  • 현지화된 날짜/시간 입력이 필요한 앱
  • 유연한 피커를 원하는 UI 디자이너
  • 경량 날짜 및 시간 선택이 필요한 프로젝트
  • 모바일 및 웹용으로 Flutter를 사용하는 팀

고려 사항

  • 플랫폼별 사용자 지정 옵션이 목록에 없습니다
  • 기본 사용법 외에 문서가 제한적
  • 고급 사용자 정의를 위해 수동 설정이 필요합니다
  • 접근성에 특별히 설계되지 않음
  • 복잡한 레이아웃을 사용하려면 추가 종속성이 필요할 수 있습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter Datetime Picker

(Pub) flutter_datetime_picker

A flutter date time picker inspired by flutter-cupertino-date-picker

you can choose date / time / date&time in multiple languages:

  • Albanian(sq)
  • Arabic(ar)
  • Armenian(hy)
  • Azerbaijan(az)
  • Basque(eu)
  • Bengali(bn)
  • Bulgarian(bg)
  • Catalan(cat)
  • Chinese(zh)
  • Danish(da)
  • Dutch(nl)
  • English(en)
  • French(fr)
  • German(de)
  • Hebrew(he)
  • Indonesian(id)
  • Italian(it)
  • Japanese(jp)
  • Kazakh(kk)
  • Korean(ko)
  • Persian(fa)
  • Polish (pl)
  • Portuguese(pt)
  • Russian(ru)
  • Spanish(es)
  • Swedish(sv)
  • Thai(th)
  • Turkish(tr)
  • Vietnamese(vi)
  • Khmer(kh)

and you can also custom your own picker content

Date picker Time picker Date Time picker

International:

Date Time picker (Chinese) Date Time picker (America) Date Time picker (Dutch) Date Time picker (Russian)

Demo App

main page

Usage

TextButton(
    onPressed: () {
        DatePicker.showDatePicker(context,
                              showTitleActions: true,
                              minTime: DateTime(2018, 3, 5),
                              maxTime: DateTime(2019, 6, 7), onChanged: (date) {
                            print('change $date');
                          }, onConfirm: (date) {
                            print('confirm $date');
                          }, currentTime: DateTime.now(), locale: LocaleType.zh);
    },
    child: Text(
        'show date time picker (Chinese)',
        style: TextStyle(color: Colors.blue),
    ));

Customize

If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker model (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand

How to customize your own picker model:

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String leftDivider() {
    return "|";
  }

  @override
  String rightDivider() {
    return "|";
  }

  @override
  List<int> layoutProportions() {
    return [1, 2, 1];
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
            this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex())
        : DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(),
            this.currentMiddleIndex(), this.currentRightIndex());
  }
}

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트