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

패키지 상세v1.0.7

date_range_picker

날짜 범위 선택기는 모바일에서 날짜 범위를 선택하기 위해 대화 상자를 사용합니다.

30일 다운로드
796
좋아요
119
Pub 점수
25

패키지 설치

flutter pub add date_range_picker

패키지 개요

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

date_range_picker 패키지는 시작일과 종료일을 선택할 수 있도록 다이얼로그를 표시하는 모바일 친화적인 날짜 범위 선택기 위젯을 제공합니다. 이는 모바일 플랫폼을 대상으로 하는 Flutter 애플리케이션을 위해 설계되었으며, 사용자가 날짜 범위를 직관적으로 선택할 수 있는 인터페이스를 제공합니다. Flutter의 매터리얼 디자인 원칙과 원활하게 통합되며, 선택기의 외관 및 동작을 사용자 정의할 수 있습니다. 예약 시스템, 일정 관리 앱 또는 날짜 범위 입력이 필요한 모든 애플리케이션에 적합합니다.

사용 사례

  • 예약 시스템
  • 스케줄링 애플리케이션
  • 일자 범위에 따른 데이터 필터링
  • 여행 계획 도구
  • 이벤트 등록 양식

주요 기능

  • 다이얼로그 기반의 날짜 선택
  • 시작 및 종료 날짜 범위 선택
  • 모바일 최적화된 사용자 인터페이스
  • 사용자 정의 가능한 외관
  • Flutter와의 간편한 통합

적합한 대상

  • 모바일 앱 개발자
  • 날짜 범위 입력 필요
  • Material Design 앱
  • 예약 및 캘린더 기능
  • 사용자 친화적인 날짜 선택

고려 사항

  • 모바일 플랫폼에 한정
  • 서버 사이드 렌더링 지원 없음
  • 일자 논리 처리를 수동으로 수행해야 합니다
  • 다크 모드를 위해 추가적인 스타일링이 필요할 수 있습니다
  • 외부 GitHub 저장소에 의존

원본 README

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

Awesome Flutter pub version

[Deprecated] Date Range Picker

Currently Flutter has supported date range picker, so I think my mission is done. Thanks for using my lib. Link: https://api.flutter.dev/flutter/material/showDateRangePicker.html

Demo

Getting Started

Installation

Add to pubspec.yaml in dependencies

  date_range_picker: ^1.0.5
Usage
import 'package:date_range_picker/date_range_picker.dart' as DateRagePicker;
...
new MaterialButton(
    color: Colors.deepOrangeAccent,
    onPressed: () async {
      final List<DateTime> picked = await DateRagePicker.showDatePicker(
          context: context,
          initialFirstDate: new DateTime.now(),
          initialLastDate: (new DateTime.now()).add(new Duration(days: 7)),
          firstDate: new DateTime(2015),
          lastDate: new DateTime(DateTime.now().year + 2)
      );
      if (picked != null && picked.length == 2) {
          print(picked);
      }
    },
    child: new Text("Pick date range")
)
Theme Customization

To change the colors to your preferred ones, you can wrap it in a Theme and a builder.

Theme(
    data: Theme.of(context).copyWith(
        accentColor: Colors.green,
        primaryColor: Colors.black,
        buttonTheme: ButtonThemeData(
        highlightColor: Colors.green,
        buttonColor: Colors.green,
        colorScheme: Theme.of(context).colorScheme.copyWith(
            secondary: Colors.red,
            background: Colors.white,
            primary: Colors.green,
            primaryVariant: Colors.green,
            brightness: Brightness.dark,
            onBackground: Colors.green),
            textTheme: ButtonTextTheme.accent)),
            child: Builder(
                builder: (context) => RaisedButton(
                    color: Color.fromRGBO(212, 20, 15, 1.0),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
                    child: Padding(
                        padding: const EdgeInsets.only(top: 10.0, bottom: 10.0, left: 30.0, right: 30.0),
                        child: Text(
                          "Date Picker",
                          style: TextStyle(
                            color: primaryColor,
                            fontSize: 28,
                            fontWeight: FontWeight.w300,
                          ),
                        ),
                      ),
                      onPressed: () async {
                        final List<DateTime> picked = await DateRangePicker.showDatePicker(
                            context: context,
                            initialFirstDate: new DateTime.now(),
                            initialLastDate: (new DateTime.now()).add(new Duration(days: 7)),
                            firstDate: new DateTime(2015),
                            lastDate: new DateTime(DateTime.now().year + 2));
                        if (picked != null && picked.length == 2) {
                          print(picked);
                        }
                      },
                    ),
                ),
            )

카테고리

소스 저장소

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