Flutter日期范围选择插件yjy_flutter_date_range_picker的使用

Date Range Picker 📅

Date Range Picker 是一个为 Flutter 设计的用户友好且简单的日期范围选择器包。它旨在随着时间不断进化，并且其组件是可重用的。

（是不是很漂亮？）

特性 ✅

简单且用户友好的界面
可定制的主题
可重用的组件
字段、表单字段和对话框小部件
函数以对话框形式显示日期范围选择器
支持最小和最大日期限制
同时显示两个月份以便于导航

安装 🪛

在 pubspec.yaml 文件中添加该包：

dependencies:
  yjy_flutter_date_range_picker: ^latest_version

然后，在终端中运行 flutter packages get。

使用 📖

要使用 Date Range Picker，只需导入包并创建 DateRangePickerWidget：

DateRangePickerWidget(
    leftWidth: 140,
    doubleMonth: doubleMonth,
    maximumDateRangeLength: 10,
    minimumDateRangeLength: 3,
    initialDateRange: selectedDateRange,
    disabledDates: [DateTime(2023, 11, 20)],
    initialDisplayedDate: selectedDateRange?.start ?? DateTime(2023, 11, 20),
    onDateRangeChanged: onDateRangeChanged,
);

你也可以使用 DateRangeField 或 DateRangeFormField 来显示一个对话框，让用户选择日期范围，并显示所选范围。以下是一个示例：

DateRangeField(
    decoration: InputDecoration(
        label: Text("Date range picker"),
        hintText: 'Please select a date range',
    ),
    onDateRangeSelected: (DateRange? value) {
    // 处理所选的日期范围
    },
  selectedDateRange: selectedRange,
);

最后，你可以使用 showDateRangePickerDialog 函数来显示一个对话框，让用户选择日期范围：

showDateRangePickerDialog(
    context: context, 
    builder: datePickerBuilder
);
...

Widget datePickerBuilder(BuildContext context, dynamic Function(DateRange?) onDateRangeChanged) => DateRangePickerWidget(
    doubleMonth: true,
    initialDateRange: selectedDateRange,
    onDateRangeChanged: onDateRangeChanged,
);

自定义 🎨

你可以通过提供自定义的 CalendarTheme 来定制日期范围选择器的外观：

DateRangePickerWidget(
    onDateRangeChanged: (dateRange) {
    // 处理所选的日期范围
    },
    theme: CalendarTheme(
    selectedColor: Colors.blue,
    dayNameTextStyle: TextStyle(color: Colors.black45, fontSize: 10),
    inRangeColor: Color(0xFFD9EDFA),
    inRangeTextStyle: TextStyle(color: Colors.blue),
    selectedTextStyle: TextStyle(color: Colors.white),
    todayTextStyle: TextStyle(fontWeight: FontWeight.bold),
    defaultTextStyle: TextStyle(color: Colors.black, fontSize: 12),
    radius: 10,
    tileSize: 40,
    disabledTextStyle: TextStyle(color: Colors.grey),
)
,
);

示例代码

以下是在 example/lib/main.dart 中的一个完整示例：

import 'package:yjy_flutter_date_range_picker/flutter_date_range_picker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date range picker example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Date range picker example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateRange? selectedDateRange;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: Row(
            children: <Widget>[
              Column(
                children: [
                  const SizedBox(height: 100),
                  const Text("The simple field example1111:"),
                  Container(
                    padding: const EdgeInsets.all(8),
                    width: 250,
                    child: DateRangeField(
                      decoration: const InputDecoration(
                        label: Text("Date range picker"),
                        hintText: 'Please select a date range',
                      ),
                      onDateRangeSelected: (DateRange? value) {
                        setState(() {
                          selectedDateRange = value;
                        });
                      },
                      selectedDateRange: selectedDateRange,
                      pickerBuilder: datePickerBuilder,
                      cancelText: "Cancel2",
                      confirmText: "confirm2",
                    ),
                  ),
                ],
              ),
              SingleChildScrollView(
                child: Column(
                  children: [
                    const SizedBox(height: 50),
                    const Text("The decomposed widgets example33333 :"),
                    const SizedBox(height: 20),
                    const Text("The date range picker widget:"),
                    const SizedBox(height: 20),
                    SizedBox(
                      width: 560,
                      child: DateRangePickerWidget(
                        leftWidth: 140,
                        maximumDateRangeLength: 10,
                        minimumDateRangeLength: 3,
                        disabledDates: [DateTime(2023, 11, 20)],
                        initialDisplayedDate: DateTime(2023, 11, 20),
                        onDateRangeChanged: print,
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Text("The month selector:"),
                    SizedBox(
                      width: 450,
                      child: MonthSelectorAndDoubleIndicator(
                        currentMonth: DateTime(2023, 11, 20),
                        onNext: () => debugPrint("Next"),
                        onPrevious: () => debugPrint("Previous"),
                        nextMonth: DateTime(2023, 12, 20),
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Text("A button to open the picker:"),
                    TextButton(
                      onPressed: () => showDateRangePickerDialog(
                          cancelText: "Cancel3",
                          confirmText: "confirm3",
                          context: context, builder: datePickerBuilder),
                      child: const Text("Open the picker"),
                    ),
                    const SizedBox(height: 20),
                    const Text("The quick dateRanges:"),
                    SizedBox(
                      width: 250,
                      height: 100,
                      child: QuickSelectorWidget(
                          selectedDateRange: selectedDateRange,
                          quickDateRanges: [
                            QuickDateRange(
                              label: 'Last 3 days',
                              dateRange: DateRange(
                                DateTime.now().subtract(const Duration(days: 3)),
                                DateTime.now(),
                              ),
                            ),
                            QuickDateRange(
                              label: 'Last 7 days',
                              dateRange: DateRange(
                                DateTime.now().subtract(const Duration(days: 7)),
                                DateTime.now(),
                              ),
                            ),
                            QuickDateRange(
                              label: 'Last 30 days',
                              dateRange: DateRange(
                                DateTime.now().subtract(const Duration(days: 30)),
                                DateTime.now(),
                              ),
                            ),
                            QuickDateRange(
                              label: 'Last 90 days',
                              dateRange: DateRange(
                                DateTime.now().subtract(const Duration(days: 90)),
                                DateTime.now(),
                              ),
                            ),
                            QuickDateRange(
                              label: 'Last 180 days',
                              dateRange: DateRange(
                                DateTime.now().subtract(const Duration(days: 180)),
                                DateTime.now(),
                              ),
                            ),
                          ],
                          onDateRangeChanged: print,
                          theme: kTheme),
                    )
                  ],
                ),
              ),
              Column(
                children: [
                  const SizedBox(height: 100),
                  const Text("The simple form field example22222:"),
                  Container(
                    padding: const EdgeInsets.all(8),
                    width: 250,
                    child: DateRangeFormField(
                      decoration: const InputDecoration(
                        label: Text("Date range picker"),
                        hintText: 'Please select a date range',
                      ),
                      pickerBuilder: (x, y) => datePickerBuilder(x, y, false),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget datePickerBuilder(
          BuildContext context, dynamic Function(DateRange?) onDateRangeChanged,
          [bool doubleMonth = true]) =>
      DateRangePickerWidget(
        leftWidth: 140,
        doubleMonth: doubleMonth,
        maximumDateRangeLength: 10,
        quickDateRanges: [
          QuickDateRange(dateRange: null, label: "Remove date range"),
          QuickDateRange(
            label: 'Last 3 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 3)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 7 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 7)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 30 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 30)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 90 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 90)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 180 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 180)),
              DateTime.now(),
            ),
          ),
        ],
        minimumDateRangeLength: 3,
        initialDateRange: selectedDateRange,
        disabledDates: [DateTime(2023, 11, 20)],
        initialDisplayedDate:
            selectedDateRange?.start ?? DateTime(2023, 11, 20),
        onDateRangeChanged: onDateRangeChanged,
      );
}

更多关于Flutter日期范围选择插件yjy_flutter_date_range_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter日期范围选择插件yjy_flutter_date_range_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yjy_flutter_date_range_picker 是一个用于 Flutter 应用的日期范围选择插件。它允许用户选择一个日期范围，并返回选定的开始日期和结束日期。下面是如何使用这个插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 yjy_flutter_date_range_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  yjy_flutter_date_range_picker: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:yjy_flutter_date_range_picker/yjy_flutter_date_range_picker.dart';

3. 使用日期范围选择器

你可以使用 showDateRangePicker 方法来显示日期范围选择器。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:yjy_flutter_date_range_picker/yjy_flutter_date_range_picker.dart';

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTimeRange? _selectedDateRange;

  Future<void> _selectDateRange(BuildContext context) async {
    final DateTimeRange? picked = await showDateRangePicker(
      context: context,
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      initialDateRange: _selectedDateRange,
    );
    if (picked != null && picked != _selectedDateRange) {
      setState(() {
        _selectedDateRange = picked;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期范围选择器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedDateRange == null
                  ? '未选择日期范围'
                  : '选择的日期范围: ${_selectedDateRange!.start} 到 ${_selectedDateRange!.end}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDateRange(context),
              child: Text('选择日期范围'),
            ),
          ],
        ),
      ),
    );
  }
}