Flutter多日期选择插件multi_date_picker的使用

Flutter多日期选择插件multi_date_picker的使用

此包简化了从日历中轻松选择日期的过程。它通过切换一个布尔值提供了选择单个或多个日期的灵活性。该包包含一些方便的功能,例如datesToExcludeselectedDate,这使得实现入住和退房流程变得非常简单。

使用此包,导航日历并选择日期变得轻而易举,为您提供增强用户体验的能力。

使用

calendarStartDatecalendarEndDate 是必需的参数。 calendarStartDatecalendarEndDate 之间的天数差应大于0。

import 'package:multi_date_picker/multi_date_picker.dart';

MultiDatePicker(
  calendarStartDate: DateTime(2024),
  calendarEndDate: DateTime(2024, 4, 30),
)

用户更多参数以改变可用性、外观和感觉

其余参数为可选参数。

  • startDate
  • endDate
  • datesToExclude
  • selectedDates
  • enableMultiSelect

有了这些参数,你可以几乎实现每一个需求。

import 'package:multi_date_picker/multi_date_picker.dart';

MultiDatePicker(
  calendarStartDate: DateTime(2024),
  calendarEndDate: DateTime(2024, 4, 30),
  startDate: DateTime.now().subtract(const Duration(days: 30)),
  endDate: DateTime.now().add(const Duration(days: 30)),
  calendarStyleConfiguration: CalendarStyleConfiguration(
    backgroundColor: Colors.grey.shade800,
  ),
  datesToExclude: [
    DateTime.now().add(const Duration(days: 1)),
    DateTime.now().add(const Duration(days: 2)),
    DateTime.now().add(const Duration(days: 3)),
  ],
  enableMultiSelect: true,
  enableListener: false,
  onDateSelected: (List<DateTime> dates) {},
),

可用属性

属性 类型 描述
calendarStartDate DateTime 这是从哪个日期开始的日历。
calendarEndDate DateTime 这是日历结束的日期。
startDate DateTime? 这是从哪一天开始让用户选择日期。
endDate DateTime? 这是用户不能选择任何日期的日期。
onDateSelected Function(List<DateTime>) 这是用于触发所选日期的回调。
selectedDates List<DateTime> 这些是已经选择的日期。
datesToExclude List<DateTime> 这些是你想排除在可选日期之外的日期。
calendarStyleConfiguration CalendarStyleConfiguration? 使用此对象来设置你的日历样式。
enableListener bool? 默认情况下,此值为true,并且会调用onDateSelected每次选择日期时。
enableMultiSelect bool? 设置为true以启用多选

即将进行的更改

  • 启用拖动选择。
  • 范围选择。例如,当用户必须选择银行对账单的从和到时。
  • 使用应用主题作为默认样式配置。
  • 更多定制选项。
  • 点击年份以更改当前年份。
  • 允许更多控制滚动行为。
  • 引入不同的日历布局。

作者

该插件由Vikas Kumar开发,他是GeekyAnts的高级软件工程师。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: MultiDatePicker(
        calendarStartDate: DateTime(2024),
        calendarEndDate: DateTime(2024, 4, 30),
        startDate: DateTime.now().subtract(const Duration(days: 30)),
        endDate: DateTime.now().add(const Duration(days: 30)),
        calendarStyleConfiguration: CalendarStyleConfiguration(
          backgroundColor: Colors.grey.shade800,
        ),
        datesToExclude: [
          DateTime.now().add(const Duration(days: 1)),
          DateTime.now().add(const Duration(days: 2)),
          DateTime.now().add(const Duration(days: 3)),
        ],
        enableMultiSelect: true,
        enableListener: false,
        onDateSelected: (List<DateTime> dates) {},
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter应用中使用multi_date_picker插件来实现多日期选择的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了multi_date_picker依赖:

dependencies:
  flutter:
    sdk: flutter
  multi_date_picker: ^x.y.z  # 请替换为最新版本号

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

接下来,你可以在你的Flutter应用中使用MultiDatePicker组件。以下是一个完整的示例,展示如何在一个简单的Flutter应用中实现多日期选择:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<DateTime> selectedDates = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Date Picker Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Dates:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 16),
            Expanded(
              child: MultiDatePicker(
                initialSelection: selectedDates,
                firstDate: DateTime(2023),
                lastDate: DateTime(2025),
                selectableDayPredicate: (DateTime day) {
                  // You can customize which days are selectable here
                  return true;
                },
                onSelectionChanged: (List<DateTime> dates) {
                  setState(() {
                    selectedDates = dates;
                  });
                },
                builder: (BuildContext context, Widget? child) {
                  return Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: child!,
                  );
                },
              ),
            ),
            SizedBox(height: 16),
            Text(
              'Selected Dates: ${selectedDates.map((date) => date.toLocal()).join(", ")}',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖引入:在pubspec.yaml中添加multi_date_picker依赖。
  2. 主应用入口MyApp类定义了Flutter应用的基本结构。
  3. 主页MyHomePage是一个有状态组件,用于管理选中的日期列表。
  4. UI布局
    • 使用ScaffoldAppBarColumn来布局UI。
    • 显示选中的日期列表。
    • 使用MultiDatePicker组件来实现多日期选择。
  5. MultiDatePicker配置
    • initialSelection:初始选中的日期列表。
    • firstDatelastDate:可选日期的范围。
    • selectableDayPredicate:用于自定义哪些日期是可选择的(这里设置为所有日期都可选)。
    • onSelectionChanged:日期选择变化时的回调,用于更新状态。
    • builder:自定义MultiDatePicker的外观,这里添加了边框和圆角。

运行这段代码,你将看到一个简单的Flutter应用,允许用户选择多个日期,并在页面上显示选中的日期。

回到顶部