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

通过这个插件，你可以在iOS和Android设备上使用一个可以进行日期选择的小部件。灵感来自cupertino_date_textbox包。

功能

使用cupertino风格选择任意日期。

开始使用

TODO: 列出前提条件并提供或指向如何开始使用该包的信息。

使用

ezgif com-gif-maker (1)

有一个示例，你可以查看/example文件夹。

DatePickerCupertino(
  hintText: 'Select a date:',
  onDateTimeChanged: (date) {
    debugPrint('Selected date is: $date');
  }
)

hintText: 显示提示文本，说明应该选择日期。
onDateTimeChanged: 选择日期后触发的回调函数。

额外信息

未来可以使其更加灵活。

datepicker_cupertino

完整示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用DatePickerCupertino小部件
            DatePickerCupertino(
              hintText: 'Select a date:', // 提示文本
              onDateTimeChanged: (date) { // 日期改变时的回调
                debugPrint('Selected date is: $date');
              },
            ),
          ],
        ),
      ),
    );
  }
}

gougou168 1楼•3 个月前

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

当然，下面是一个关于如何在Flutter项目中使用datepicker_cupertino插件的示例代码。这个插件提供了一个iOS风格的日期选择器，可以在Flutter应用中方便地集成。

首先，确保你已经在pubspec.yaml文件中添加了datepicker_cupertino依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  datepicker_cupertino: ^1.0.0  # 请注意版本号，这里使用的是假设的最新版本号

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

接下来是一个完整的示例，展示了如何在Flutter应用中使用datepicker_cupertino来选择日期：

import 'package:flutter/material.dart';
import 'package:datepicker_cupertino/datepicker_cupertino.dart';
import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DatePicker Cupertino Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showCupertinoDatePicker(
      context: context,
      initialDatePickerMode: CupertinoDatePickerMode.date,
      minimumDate: DateTime(1900),
      maximumDate: DateTime(2101),
      locale: Locale.current,
      use24HourFormat: false,
    );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker Cupertino Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected.'
                  : 'Selected date: ${selectedDate!.toLocal()}',
            ),
            SizedBox(height: 20),
            CupertinoButton(
              color: CupertinoColors.activeBlue,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Text('Select Date'),
              onPressed: () => _selectDate(context),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

依赖导入：

import 'package:datepicker_cupertino/datepicker_cupertino.dart';
import 'package:flutter/cupertino.dart';

日期选择器函数调用：

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showCupertinoDatePicker(
    context: context,
    initialDatePickerMode: CupertinoDatePickerMode.date,
    minimumDate: DateTime(1900),
    maximumDate: DateTime(2101),
    locale: Locale.current,
    use24HourFormat: false,
  );

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

UI布局：

Scaffold(
  appBar: AppBar(
    title: Text('DatePicker Cupertino Demo'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          selectedDate == null
              ? 'No date selected.'
              : 'Selected date: ${selectedDate!.toLocal()}',
        ),
        SizedBox(height: 20),
        CupertinoButton(
          color: CupertinoColors.activeBlue,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          child: Text('Select Date'),
          onPressed: () => _selectDate(context),
        ),
      ],
    ),
  ),
);

这段代码展示了如何使用datepicker_cupertino插件来创建一个日期选择器，并在用户选择日期后更新UI显示所选日期。