Flutter日期范围选择插件select_range

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

功能特性

选择日期范围。
轻松获取所选日期。
自定义日期选择器的外观。

开始使用

前置条件

Dart SDK: >=3.3.2 <4.0.0
Flutter SDK: >=1.17.0

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  select_range_date: ^0.0.1

使用示例

下面是一个简单的示例，展示了如何在Flutter应用中使用select_range_date插件来选择日期范围。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 设置起始日期为当前日期前7天
  final DateTime startDate = DateTime.now().subtract(const Duration(days: 7));
  // 设置结束日期为当前日期
  final DateTime endDate = DateTime.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('选择日期范围示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 显示日期选择器
              SelectRangeDate.show(
                startDate: startDate,
                endDate: endDate,
                onApplyClick: (DateTime startDate, DateTime endDate) {
                  // 打印选择的开始日期和结束日期
                  print('开始日期: $startDate');
                  print('结束日期: $endDate');
                },
              );
            },
            child: const Text('选择日期范围'),
          ),
        ),
      ),
    );
  }
}

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

h691938207 1楼

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

在Flutter中，select_range_date 是一个用于选择日期范围的插件。它允许用户选择一个开始日期和一个结束日期。以下是如何使用这个插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:select_range_date/select_range_date.dart';

3. 使用 `SelectRangeDate` 插件

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('日期范围选择示例'),
        ),
        body: DateRangePickerExample(),
      ),
    );
  }
}

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

class _DateRangePickerExampleState extends State<DateRangePickerExample> {
  DateTimeRange? _selectedDateRange;

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

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

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