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

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

SimpleDateRangePicker

SimpleDateRangePicker 是一个简单且时尚的 Flutter 插件，用于选择日期范围（DateTimeRange）。

注意： 该包正在积极开发中，版本之间可能会有较大变化。一旦达到稳定实现，包将升级到1.0.0版本。

特性

  • 提供内联小部件和对话框以选择日期范围 (DateTimeRange) 或单个日期 (DateTime)
  • 可高度自定义颜色、边框和文本样式

日期范围选择器

开始使用

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  simple_date_range_picker: ^0.0.5

使用方法

导入包

在项目中导入 simple_date_range_picker 包：

import 'package:simple_date_range_picker/simple_date_range_picker.dart';

选择日期范围的小部件

使用 SimpleDateRangePicker 小部件来显示日期范围选择器：

SimpleDateRangePicker(
  config: SimpleDateRangePickerRange(
    initialDateRange: null,
    onChanged: (dateRange) => setState(() => selectedDates = dateRange),
  ),
)

选择单个日期的小部件

使用 SimpleDateRangePicker 小部件来选择单个日期：

SimpleDateRangePicker(
  config: SimpleDateRangePickerSingle(
    initialDate: null,
    onChanged: (date) => setState(() => selectedDate = date),
  ),
)

显示日期选择对话框

可以通过对话框来显示日期选择器：

选择日期范围对话框

final dateRange = await showSimpleDateRangePickerDialog(context);

选择单个日期对话框

final date = await showSimpleDatePickerDialog(context);

自定义

样式

除了配置类来更改选择器的行为外，大多数样式、标签、颜色等都是可定制的。

颜色

SimpleDateRangePickerColors 类用于确定所选日期的背景色和前景色。以下是该类的一些属性：

class SimpleDateRangePickerColors {
  final Color backgroundColor;
  final Color foregroundColor;
  final double boundaryOpacity;
  final double hoveredOpacity;
  final double selectedOpacity;
}

默认情况下，hoveredOpacity > boundaryOpacity > selectedOpacity，但你可以根据需要调整这些值。

样式

SimpleDateRangePickerStyle 类包含颜色以及其他样式：

class SimpleDateRangePickerStyle {
  final SimpleDateRangePickerColors? colors;
  final TextStyle? monthTitleTextStyle;
  final TextStyle? weekdayTextStyle;
  final TextStyle? dayTextStyle;
  final Radius? activeItemRadius;
  final ButtonStyle? nextIconButtonStyle;
  final ButtonStyle? previousIconButtonStyle;
}

例如，要将选择器的背景色改为红色，前景色改为白色，并将所选日期的边框半径设为零：

SimpleDateRangePicker(
  style: SimpleDateRangePickerStyle(
    colors: SimpleDateRangePickerColors(
      backgroundColor: Colors.red,
      foregroundColor: Colors.white,
    ),
    activeItemRadius: Radius.zero,
  ),
  config: SimpleDateRangePickerRange(
    initialDateRange: null,
    onChanged: (dateRange) => setState(() => selectedDates = dateRange),
  ),
)

路线图

未来计划增加的功能包括：

  • 自定义颜色、边框和文本样式
  • 单日期选择
  • 日期验证 - 确定哪些日期可以被选择
  • 自定义初始月视图 - 指定要首先显示的月份

示例代码

以下是一个完整的示例代码，展示了如何使用 simple_date_range_picker 插件：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:simple_date_range_picker/simple_date_range_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SimpleDateRangePicker Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  [@override](/user/override)
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  DateTimeRange? selectedDateRange;
  DateTime? selectedDate;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          ElevatedButton(
            child: const Text('showSimpleDateRangePickerDialog'),
            onPressed: () async {
              final newDates = await showSimpleDateRangePickerDialog(
                context,
                initialDateRange: selectedDateRange,
              );

              if (newDates != null) {
                setState(() => selectedDateRange = newDates);
              }
            },
          ),
          ElevatedButton(
            child: const Text('showSimpleDatePickerDialog'),
            onPressed: () async {
              final newDate = await showSimpleDatePickerDialog(
                context,
                initialDate: selectedDate ?? DateTime.now(),
              );

              if (newDate != null) {
                setState(() => selectedDate = newDate);
              }
            },
          ),
        ],
      ),
      body: SizedBox(
        width: double.infinity,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            const Text(
                              'In-line date range picker',
                              style: TextStyle(
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const SizedBox(height: 25),
                            if (selectedDateRange == null) ...[
                              const Text('No date range selected'),
                            ] else ...[
                              Text(
                                'Selected Date Range: ${DateFormat.yMMMd().format(selectedDateRange!.start)} - ${DateFormat.yMMMd().format(selectedDateRange!.end)}',
                              ),
                            ],
                            const SizedBox(height: 50),
                            SimpleDateRangePicker(
                              config: SimpleDateRangePickerRange(
                                initialDateRange: null,
                                onChanged: (dates) => setState(
                                  () => selectedDateRange = dates,
                                ),
                              ),
                              style: const SimpleDateRangePickerStyle(
                                colors: SimpleDateRangePickerColors(
                                  backgroundColor: Colors.pink,
                                  foregroundColor: Colors.white,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            const Text(
                              'In-line single date picker',
                              style: TextStyle(
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const SizedBox(height: 25),
                            if (selectedDate == null) ...[
                              const Text('No single date selected'),
                            ] else ...[
                              Text(
                                'Selected Date: ${DateFormat.yMMMd().format(selectedDate!)}',
                              ),
                            ],
                            const SizedBox(height: 50),
                            SimpleDateRangePicker(
                              config: SimpleDateRangePickerSingle(
                                initialDate: null,
                                onChanged: (date) => setState(
                                  () => selectedDate = date,
                                ),
                              ),
                              style: const SimpleDateRangePickerStyle(
                                colors: SimpleDateRangePickerColors(
                                  backgroundColor: Colors.pink,
                                  foregroundColor: Colors.white,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


simple_date_range_picker 是一个用于 Flutter 的简单日期范围选择插件。它允许用户选择一个日期范围，并且可以自定义日期选择器的外观和行为。以下是使用 simple_date_range_picker 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  simple_date_range_picker: ^1.0.0  # 检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 simple_date_range_picker：

import 'package:simple_date_range_picker/simple_date_range_picker.dart';

3. 使用日期范围选择器

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

import 'package:flutter/material.dart';
import 'package:simple_date_range_picker/simple_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 showSimpleDateRangePicker(
      context,
      initialDateRange: _selectedDateRange,
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );

    if (picked != null && picked != _selectedDateRange) {
      setState(() {
        _selectedDateRange = picked;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Range Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _selectedDateRange == null
                ? Text('No date range selected.')
                : Text('Selected Date Range: ${_selectedDateRange!.start} to ${_selectedDateRange!.end}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDateRange(context),
              child: Text('Select Date Range'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部