Flutter日期选择器插件flutter_cupertino_date_picker的使用

Flutter日期选择器插件flutter_cupertino_date_picker的使用

简介

flutter_cupertino_date_picker 是一个用于在 Flutter 应用中实现日期选择器（Date Picker）、时间选择器（Time Picker）以及日期时间选择器（DateTime Picker）的插件。支持多种语言和自定义主题。

使用步骤

1. 添加依赖

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

dependencies:
  flutter_cupertino_date_picker: ^1.0.26+2

运行以下命令安装依赖：

$ flutter pub get

2. 导入库

在 Dart 文件中导入 flutter_cupertino_date_picker：

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

3. 显示日期选择器

（1）底部弹出式日期选择器 (showDatePicker)

以下是使用 showDatePicker 的完整示例：

void showBottomSheetDatePicker(BuildContext context) async {
  await DatePicker.showDatePicker(
    context,
    // 最小日期
    minDateTime: DateTime(1990, 1, 1),
    // 最大日期
    maxDateTime: DateTime.now(),
    // 初始选中日期
    initialDateTime: DateTime.now(),
    // 日期格式
    dateFormat: "yyyy-MM-dd",
    // 国际化设置（如 zh_cn）
    locale: DateTimePickerLocale.zh_cn,
    // 确认回调
    onConfirm: (dateTime, index) {
      print("Selected Date: $dateTime");
    },
    // 取消回调
    onCancel: () {
      print("Date Picker Canceled");
    },
  );
}

（2）嵌入页面的日期选择器 (DatePickerWidget)

如果需要将日期选择器直接嵌入到页面中，可以使用 DatePickerWidget：

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

class _DatePickerInPageState extends State<DatePickerInPage> {
  DateTime _selectedDate;

  void _showDatePicker() async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1990),
      lastDate: DateTime(2050),
    );

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("嵌入页面的日期选择器")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_selectedDate == null ? "请选择日期" : _selectedDate.toString()),
            ElevatedButton(
              onPressed: _showDatePicker,
              child: Text("选择日期"),
            ),
          ],
        ),
      ),
    );
  }
}

4. 显示时间选择器

（1）底部弹出式时间选择器 (showTimePicker)

以下是如何使用 showTimePicker 的示例：

void showBottomSheetTimePicker(BuildContext context) async {
  await DatePicker.showTimePicker(
    context,
    minDateTime: DateTime(2023, 1, 1, 0, 0),
    maxDateTime: DateTime(2023, 1, 1, 23, 59),
    initialDateTime: DateTime(2023, 1, 1, 12, 0),
    dateFormat: "HH:mm",
    locale: DateTimePickerLocale.zh_cn,
    onConfirm: (dateTime, index) {
      print("Selected Time: $dateTime");
    },
    onCancel: () {
      print("Time Picker Canceled");
    },
  );
}

（2）嵌入页面的时间选择器 (TimePickerWidget)

同样可以将时间选择器嵌入到页面中：

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

class _TimePickerInPageState extends State<TimePickerInPage> {
  TimeOfDay _selectedTime;

  Future<void> _showTimePicker() async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("嵌入页面的时间选择器")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_selectedTime == null ? "请选择时间" : _selectedTime.format(context).toString()),
            ElevatedButton(
              onPressed: _showTimePicker,
              child: Text("选择时间"),
            ),
          ],
        ),
      ),
    );
  }
}

5. 显示日期时间选择器

（1）底部弹出式日期时间选择器 (showDateTimePicker)

以下是如何使用 showDateTimePicker 的示例：

void showBottomSheetDateTimePicker(BuildContext context) async {
  await DatePicker.showDateTimePicker(
    context,
    minDateTime: DateTime(1990, 1, 1),
    maxDateTime: DateTime.now(),
    initialDateTime: DateTime.now(),
    dateFormat: "yyyy-MM-dd HH:mm",
    locale: DateTimePickerLocale.zh_cn,
    onConfirm: (dateTime, index) {
      print("Selected DateTime: $dateTime");
    },
    onCancel: () {
      print("DateTime Picker Canceled");
    },
  );
}

（2）嵌入页面的日期时间选择器 (DateTimePickerWidget)

也可以将日期时间选择器嵌入到页面中：

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

class _DateTimePickerInPageState extends State<DateTimePickerInPage> {
  DateTime _selectedDateTime;

  Future<void> _showDateTimePicker() async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1990),
      lastDate: DateTime(2050),
    );

    if (picked != null) {
      setState(() {
        _selectedDateTime = picked;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("嵌入页面的日期时间选择器")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_selectedDateTime == null ? "请选择日期时间" : _selectedDateTime.toString()),
            ElevatedButton(
              onPressed: _showDateTimePicker,
              child: Text("选择日期时间"),
            ),
          ],
        ),
      ),
    );
  }
}