Flutter自定义日期时间选择器插件customizable_datetime_picker的使用

customizable_datetime_picker 是一个用于Flutter项目的可定制日期时间选择器插件。您可以根据需要自定义选择器的不同部分，如格式、语言、分隔符颜色等。

特性

• 显示具有可定制部分的Cupertino风格日期选择器。
• 可以更改选择器的小部件，例如颜色和厚度、项目高度和背景颜色。
• 支持选择语言和地区日期格式。

使用方法

DatePickerWidget

您可以使用默认参数来初始化这个小部件：

CustomizableDatePickerWidget()

或者使用 DateTimePickerTheme 和 DatePickerDividerTheme 来定义选择器的设计，并提供所需的参数来自定义逻辑（日期格式、日期范围等）：

CustomizableDatePickerWidget(
  locale: DateTimePickerLocale.jp,
  looping: true,
  initialDate: _dateTime,
  dateFormat: "dd-MMMM-yyyy",                            
  pickerTheme: const DateTimePickerTheme(                
    itemTextStyle: TextStyle(    
      color: Color(0xFF101010),
      fontSize: 20,
      fontWeight: FontWeight.w600
    ),
    backgroundColor: Color(0xFFEBEBEB),
    itemHeight: 80,
    pickerHeight: 300,
    dividerTheme: DatePickerDividerTheme(
     dividerColor: Color(0xFF00A962),
     thickness: 3,
     height: 2
    )
  ),
  onChange: (dateTime, selectedIndex) => _dateTime = dateTime
)

您还可以通过 separatorWidget 参数添加自定义分隔符：

CustomizableDatePickerWidget(
  separatorWidget: const Padding(
    padding: EdgeInsets.symmetric(horizontal: 32),
    child: Text(
      ":",
      style: pickerTextStyle,
    ),
   ),
  locale: DateTimePickerLocale.jp,
  looping: true,
  initialDate: _dateTime,
  dateFormat: "dd-MMMM-yyyy",                            
  pickerTheme: const DateTimePickerTheme(                
    itemTextStyle: TextStyle(    
      color: Color(0xFF101010),
      fontSize: 20,
      fontWeight: FontWeight.w600
    ),
    backgroundColor: Color(0xFFEBEBEB),
    itemHeight: 80,
    pickerHeight: 300,
    dividerTheme: DatePickerDividerTheme(
     dividerColor: Color(0xFF00A962),
     thickness: 3,
     height: 2
    )
  ),
  onChange: (dateTime, selectedIndex) => _dateTime = dateTime
)

TimePickerWidget

与日期选择器类似，您可以使用默认参数初始化时间选择器：

CustomizableTimePickerWidget()

或者使用 DateTimePickerTheme 来定义时间选择器的设计，并提供所需的参数来自定义逻辑（时间格式）：

CustomizableTimePickerWidget(
  locale: DateTimePickerLocale.jp,
  looping: true,
  initialDate: _dateTime,
  timeFormat: "HH:mm",                            
  pickerTheme: const DateTimePickerTheme(                
    itemTextStyle: TextStyle(    
      color: Color(0xFF101010),
      fontSize: 20,
      fontWeight: FontWeight.w600
    ),
    backgroundColor: Color(0xFFEBEBEB),
    itemHeight: 80,
    pickerHeight: 300,
    dividerTheme: DatePickerDividerTheme(
     dividerColor: Color(0xFF00A962),
     thickness: 3,
     height: 2
    )
  ),
  onChange: (dateTime, selectedIndex) => _dateTime = dateTime
)

示例代码

以下是一个完整的示例应用，展示如何使用 customizable_datetime_picker 插件：

import 'package:customizable_datetime_picker/date_picker_widget.dart';
import 'package:flutter/material.dart';

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

const TextStyle pickerTextStyle = TextStyle(    
  color: Color(0xFF101010),
  fontSize: 20,
  fontWeight: FontWeight.w600
);

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DateTime _dateTime = DateTime.now(); 

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Date time picker example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              const Divider(thickness: 8),
              const SizedBox(height: 20),
              const Text(
                "Simple date picker",
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20),
              ),
              CustomizableDatePickerWidget(),
              const Divider(thickness: 8),
              const SizedBox(height: 20),
              const Text(
                "Date Picker with theme",
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20),
              ),
              CustomizableDatePickerWidget(
                separatorWidget: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 32),
                  child: Text(
                    ":",
                    style: pickerTextStyle,
                  ),
                ),
                locale: DateTimePickerLocale.jp,
                looping: true,
                initialDate: _dateTime,
                dateFormat: "dd-MMMM-yyyy",                            
                pickerTheme: const DateTimePickerTheme(                
                  itemTextStyle: pickerTextStyle,
                  backgroundColor: Color(0xFFEBEBEB),
                  itemHeight: 80,
                  pickerHeight: 300,
                  dividerTheme: DatePickerDividerTheme(
                    dividerColor: Color(0xFF00A962),
                    thickness: 3,
                    height: 2
                  )
                ),
                onChange: (dateTime, selectedIndex) => _dateTime = dateTime             
              ),
              const Divider(thickness: 8),
              const SizedBox(height: 20),
              const Text(
                "Time Picker with theme",
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20),
              ),
              CustomizableTimePickerWidget(
                separatorWidget: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 32),
                  child: Text(
                    ":",
                    style: pickerTextStyle,
                  ),
                ),
                locale: DateTimePickerLocale.jp,                       
                timeFormat: "HH:mm",                            
                pickerTheme: const DateTimePickerTheme(                
                  itemTextStyle: pickerTextStyle,                  
                  itemHeight: 80,
                  pickerHeight: 300,
                  dividerTheme: DatePickerDividerTheme(
                    dividerColor: Color(0xFF00A962),
                    thickness: 3,
                    height: 2
                  )
                ),
                onChange: (dateTime, selectedIndex) => _dateTime = dateTime             
              ),
            ]
          )
        )
      )
    );
  }
}

更多细节请参阅 example。