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

DayMonthPicker 是一个可定制的 Flutter 组件，允许用户从对话框界面中选择特定的天和月。它特别适用于需要输入日期但不需要年份的应用程序或表单。

特性

• 简单选择月份和天数
• 可自定义外观
• 内置支持现有天和月值
• 回调函数处理更改

构造函数

const DayMonthPicker({
  Key? key,
  this.surfaceTintColor,
  this.titleTextStyle,
  this.selectedMonthBgColor = Colors.blue,
  this.unSelectedMonthBgColor = Colors.white,
  this.selectedDayBgColor = Colors.blue,
  this.unSelectedDayBgColor = Colors.white,
  this.title = "Date Month Picker",
  this.selectedMonthTextStyle = const TextStyle(color: Colors.white, fontSize: 14),
  this.unSelectedMonthTextStyle = const TextStyle(color: Colors.black, fontSize: 14),
  this.selectedDayTextStyle = const TextStyle(color: Colors.white, fontSize: 12),
  this.unSelectedDayTextStyle = const TextStyle(color: Colors.black, fontSize: 12),
  this.child = const Padding(
    padding: EdgeInsets.all(8.0),
    child: Text("Month Picker"),
  ),
  this.cancelTextStyle = const TextStyle(color: Colors.grey, fontSize: 16),
  this.okTextStyle = const TextStyle(color: Colors.blue, fontSize: 16),
  this.existingDay,
  this.existingMonth,
  required this.onChange,
});

参数

• key: 用于标识小部件的可选键。
• surfaceTintColor: 对话框表面的颜色（默认为透明）。
• titleTextStyle: 对话框标题的文本样式。
• selectedMonthBgColor: 已选月份的背景颜色（默认为蓝色）。
• unSelectedMonthBgColor: 未选中月份的背景颜色（默认为白色）。
• selectedDayBgColor: 已选天数的背景颜色（默认为蓝色）。
• unSelectedDayBgColor: 未选中天数的背景颜色（默认为白色）。
• title: 对话框的标题（默认为 “Date Month Picker”）。
• selectedMonthTextStyle: 已选月份标签的文本样式。
• unSelectedMonthTextStyle: 未选中月份标签的文本样式。
• selectedDayTextStyle: 已选天数标签的文本样式。
• unSelectedDayTextStyle: 未选中天数标签的文本样式。
• child: 打开选择器的按钮显示的小部件（默认是填充的 “Month Picker” 文本）。
• cancelTextStyle: 取消按钮的文本样式。
• okTextStyle: 确认按钮的文本样式。
• existingDay: 已选天数的字符串表示形式（可选）。
• existingMonth: 已选月份的字符串表示形式（可选）。
• onChange: 用户选择天数和月份时触发的必需回调函数。

使用示例

下面是一个简单的示例，展示如何使用 DayMonthPicker：

DayMonthPicker(onChange: (DayMonth? dayMonth){
  if(dayMonth != null) {
    print("Day: ${dayMonth.day}");
    print("Month: ${dayMonth.month}");
  }
}),

完整示例 Demo

以下是一个完整的 Flutter 示例，演示如何在应用程序中集成 DayMonthPicker 插件：

import 'package:flutter/material.dart';
import 'package:day_month_picker/day_month_picker.dart'; // 引入插件包

void main() => runApp(MyApp());

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

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? selectedDay;
  String? selectedMonth;

  void _onDayMonthChanged(DayMonth? dayMonth) {
    if (dayMonth != null) {
      setState(() {
        selectedDay = dayMonth.day;
        selectedMonth = dayMonth.month;
      });
      print('Selected Day: $selectedDay, Month: $selectedMonth');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDay == null || selectedMonth == null
                  ? 'No date selected'
                  : 'Selected Date: $selectedDay/$selectedMonth',
              style: Theme.of(context).textTheme.headline5,
            ),
            SizedBox(height: 20),
            DayMonthPicker(
              onChange: _onDayMonthChanged,
              existingDay: selectedDay,
              existingMonth: selectedMonth,
              title: "Choose Your Date",
              surfaceTintColor: Colors.lightBlueAccent,
              selectedMonthBgColor: Colors.red,
              selectedDayBgColor: Colors.green,
              cancelTextStyle: TextStyle(color: Colors.orange, fontSize: 18),
              okTextStyle: TextStyle(color: Colors.purple, fontSize: 18),
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                decoration: BoxDecoration(
                  color: Colors.blueGrey,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text(
                  "Select Date",
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个带有 DayMonthPicker 的简单应用，用户可以选择一天和一个月，并且可以在界面上看到所选的日期。我们还通过设置不同的属性来自定义选择器的外观。