Flutter原生风格选择器插件flutter_cupertinopicker的使用

flutter_cupertinopicker

flutter_cupertinopicker 是一个用于在 Flutter 中实现 iOS 风格日期选择器的插件。它提供了类似于原生 iOS 的日期选择界面，使应用更贴近原生体验。

使用步骤

1. 添加依赖

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

dependencies:
  flutter_cupertinopicker: ^0.1.0

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

2. 导入插件

在需要使用的文件中导入插件：

import 'package:flutter_cupertinopicker/flutter_cupertinopicker.dart';

3. 使用日期选择器

以下是一个完整的示例代码，展示如何使用 flutter_cupertinopicker 插件来实现日期选择器。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DatePickerExample(),
    );
  }
}

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

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime selectedDate = DateTime.now(); // 当前选中的日期

  // 显示日期选择器并更新选中的日期
  Future<void> showPicker() async {
    final DateTime? pickedDate = await showCupertinoDatePicker(
      context: context,
      mode: CupertinoDatePickerMode.date, // 设置为日期模式
      initialDateTime: selectedDate, // 初始日期
      minimumYear: 2000, // 最小年份
      maximumYear: 2030, // 最大年份
      onDateTimeChanged: (DateTime newDate) {
        setState(() {
          selectedDate = newDate; // 更新选中的日期
        });
      },
    );

    if (pickedDate != null) {
      print('Selected Date: $pickedDate'); // 打印选中的日期
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 原生风格日期选择器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '当前选中的日期: ${selectedDate.toString()}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showPicker, // 点击按钮时显示日期选择器
              child: Text('选择日期'),
            )
          ],
        ),
      ),
    );
  }
}