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

flutter_date_picker_timeline 표지
패키지 상세v0.3.3

flutter_date_picker_timeline

수평 타임라인으로서의 사용자 정의 가능한 그레고리력 및 자랄리력 날짜 선택기

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
103
좋아요
86
Pub 점수
130

패키지 설치

flutter pub add flutter_date_picker_timeline

패키지 개요

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

플러터용 사용자 정의 가능한 날짜 선택기로, 날짜를 수평적인 시간선으로 표시하며, 그레고리력과 자라리(페르시아) 역법을 모두 지원합니다. 부드러운 스크롤링과 시각적 피드백을 통해 사용자가 직관적으로 날짜를 선택할 수 있도록 합니다. 스케줄링, 계획, 캘린더 기반 워크플로우와 같이 장기간에 걸쳐 날짜 탐색이 필요한 앱을 위한 것입니다. 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스 등 주요 모든 플랫폼에서 작동합니다.

사용 사례

  • 스케줄링 애플리케이션
  • 캘린더 기반 작업 계획자
  • 이벤트 예약 인터페이스
  • 여행 일정 관리
  • 장기 프로젝트 일정

주요 기능

  • 그레고리력 및 자라리력 지원
  • 수평 스크롤 가능한 타임라인 인터페이스
  • 사용자 정의 가능한 외관 및 스타일
  • 크로스 플랫폼 호환성
  • 스무스한 날짜 탐색
  • 사용자 정의 가능한 날짜 범위 및 선택 모드

적합한 대상

  • 장기간 날짜 선택이 필요한 앱
  • 페르시아어 사용자들을 대상으로 하는 개발자
  • 이중 캘린더 지원을 필요로 하는 프로젝트
  • UI 중심 캘린더 구현
  • 다중 플랫폼 Flutter 애플리케이션

고려 사항

  • 최적의 사용자 경험을 위해 추가 스타일링이 필요할 수 있습니다
  • 매우 큰 날짜 범위와 함께 성능
  • 날짜 선택 외에는 내장 검증 기능이 제한적
  • 영어 이외의 로케일에 대해 외부 현지화에 의존합니다

원본 README

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

Flutter Date Picker Timeline

Flutter Date Picker Timeline Banner pub package

💥 Gregorian and Jalali customizable date picker as a horizontal timeline 💥

Screenshot iOS      Screenshot android


Let's get started

1 - Depend on it
Add it to your package's pubspec.yaml file
dependencies:
  flutter_date_picker_timeline: ^0.3.3
2 - Install it
Install packages from the command line
flutter pub get
3 - Import it
Import it to your project
import 'package:flutter_date_picker_timeline/flutter_date_picker_timeline.dart';

How to use?

Use the FlutterDatePickerTimeline Widget
FlutterDatePickerTimeline(
    startDate: DateTime(2020, 07, 01),
    endDate: DateTime(2020, 12, 30),
    initialSelectedDate: DateTime(2020, 07, 24),
    onSelectedDateChange: (DateTime dateTime) {
        print(dateTime);
      },
    )
Constructor:
FlutterDatePickerTimeline({
    Key key,
    // Determines the [FlutterDatePickerTimeline] mode.
    this.calendarMode = CalendarMode.gregorian,
    // The first date of [FlutterDatePickerTimeline].
    @required this.startDate,
    // The last date of [FlutterDatePickerTimeline].
    @required this.endDate,
    // Initially selected date.
    this.initialSelectedDate,
    // Initially focused date(If nothing is provided, a [initialSelectedDate] will be used).
    this.initialFocusedDate,
    // Used for setting the textDirection of [FlutterDatePickerTimeline].
    this.textDirection,
    // Used for setting the width of selected items.
    this.selectedItemWidth = 170,
    // Used for setting the width of unselected items.
    this.unselectedItemWidth = 38,
    // Used for setting the height of selected and unselected items.
    this.itemHeight = 38,
    // Used for setting the radius of selected and unselected items background.
    this.itemRadius = 10,
    // Used for setting the padding of [ListView].
    this.listViewPadding = const EdgeInsets.only(right: 5.5, left: 5.5),
    // Used for setting the margin of selected items.
    this.selectedItemMargin = const EdgeInsets.only(right: 5.5, left: 5.5),
    // Used for setting the margin of unselected items.
    this.unselectedItemMargin = const EdgeInsets.only(right: 5.5, left: 5.5),
    // Used for setting the color of selected items background.
    this.selectedItemBackgroundColor = const Color(0xFF2B2C30),
    // Used for setting the color of unselected items background.
    this.unselectedItemBackgroundColor = Colors.white,
    // Used for setting the style of selected items [Text].
    this.selectedItemTextStyle,
    // Used for setting the style of unselected items [Text].
    this.unselectedItemTextStyle,
    // Called whenever any date gets selected.
    @required this.onSelectedDateChange,
  }) : super(key: key);

Props

props types defaultValues
calendarMode CalendarMode CalendarMode.gregorian
startDate DateTime
endDate DateTime
initialSelectedDate DateTime?
initialFocusedDate DateTime? If nothing is provided, a [initialSelectedDate] will be used
textDirection TextDirection? If nothing is provided, a [calendarMode] will be used. (CalendarMode.gregorian -> TextDirection.ltr , CalendarMode.jalali -> TextDirection.rtl)
selectedItemWidth double 170
unselectedItemWidth double 38
itemHeight double 38
itemRadius double 10
listViewPadding EdgeInsets const EdgeInsets.only(right: 5.5, left: 5.5)
selectedItemMargin EdgeInsets const EdgeInsets.only(right: 5.5, left: 5.5)
unselectedItemMargin EdgeInsets const EdgeInsets.only(right: 5.5, left: 5.5)
selectedItemBackgroundColor Color const Color(0xFF2B2C30)
unselectedItemBackgroundColor Color Colors.white
selectedItemTextStyle TextStyle? TextStyle(fontFamily: widget.calendarMode == CalendarMode.gregorian ? 'nunito' : 'dana', package: 'flutter_date_picker_timeline', color: widget.unselectedItemBackgroundColor)
unselectedItemTextStyle TextStyle? TextStyle(fontFamily: widget.calendarMode == CalendarMode.gregorian ? 'nunito' : 'dana', package: 'flutter_date_picker_timeline', color: widget.selectedItemBackgroundColor)
onSelectedDateChange DateChangeListener

카테고리

의존성

의존성 목록 3 개

소스 저장소

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

아직 데이터가 없습니다.