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

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

[已弃用] Date Range Picker

目前Flutter已经内置了日期范围选择器，所以我认为我的任务已经完成。感谢使用我的库。
链接：https://api.flutter.dev/flutter/material/showDateRangePicker.html

Demo

开始使用

安装

在pubspec.yaml文件的dependencies部分添加以下内容：

date_range_picker: ^1.0.5

运行flutter pub get以安装依赖。

使用

以下是一个完整的示例代码，展示如何使用date_range_picker插件来选择日期范围：

import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;

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

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

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color: Colors.deepOrangeAccent,
      onPressed: () async {
        // 打开日期范围选择器
        final List<DateTime> picked = await DateRangePicker.showDatePicker(
          context: context,
          // 初始选中的开始日期
          initialFirstDate: DateTime.now(),
          // 初始选中的结束日期
          initialLastDate: DateTime.now().add(Duration(days: 7)),
          // 可选日期范围的起始日期
          firstDate: DateTime(2015),
          // 可选日期范围的结束日期
          lastDate: DateTime(DateTime.now().year + 2),
        );

        // 检查用户是否选择了有效的日期范围
        if (picked != null && picked.length == 2) {
          // 打印所选的日期范围
          print('开始日期: ${picked[0]}');
          print('结束日期: ${picked[1]}');
        }
      },
      child: Text("选择日期范围"),
    );
  }
}

主题定制化

如果需要自定义日期选择器的主题颜色，可以通过Theme和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(
          "日期选择器",
          style: TextStyle(
            color: Colors.white,
            fontSize: 28,
            fontWeight: FontWeight.w300,
          ),
        ),
      ),
      onPressed: () async {
        final List<DateTime> picked = await DateRangePicker.showDatePicker(
          context: context,
          initialFirstDate: DateTime.now(),
          initialLastDate: DateTime.now().add(Duration(days: 7)),
          firstDate: DateTime(2015),
          lastDate: DateTime(DateTime.now().year + 2),
        );

        if (picked != null && picked.length == 2) {
          print(picked);
        }
      },
    ),
  ),
);