Flutter日期选择插件flutter_weekday_selector的使用

flutter_weekday_selector 是一个用于在 Flutter 应用中实现周日选择功能的插件。本文将详细介绍如何安装和使用该插件，并提供一个完整的示例代码。

安装

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

dependencies:
  flutter_weekday_selector: ^0.0.12

然后运行 flutter pub get 命令来获取并安装依赖。

使用

基本用法

在需要集成 WeekDaySelector 的地方调用该 widget，并传入相应的参数。以下是一个基本的示例：

child: WeekDaySelector(
  onSubmitted: (day) {
    // 处理选择事件
  },
)

完整示例

以下是一个完整的示例代码，展示了如何使用 WeekDaySelector 插件的不同配置和功能：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Week Day Selector with Controller',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> daysSelected = [];
  WeekDaySelectorController weekDaySelectorController = WeekDaySelectorController();
  WeekDaySelectorController weekDaySelectorController2 = WeekDaySelectorController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter Week Day Selector with Controller"),
      ),
      body: Center(
        child: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text("Select Week Days - Example shape circle"),
            ),
            WeekDaySelector(
              controller: weekDaySelectorController,
              width: 300,
              height: 50,
              shape: BoxShape.circle,
              weekDayStart: WeekDayName.sunday,
              onSubmitted: (day) {
                if (kDebugMode) {
                  print("${day.name} is ${day.isSelected ? 'selected' : 'unselected'}");
                }
                setState(() {
                  if (day.isSelected) {
                    daysSelected.add(day.name);
                  } else {
                    daysSelected.remove(day.name);
                  }
                });
              },
            ),
            Text("selected days: ${daysSelected.join(", ")}"),
            const SizedBox(height: 20),
            Center(
              child: SizedBox(
                width: 500,
                child: Divider(color: Theme.of(context).colorScheme.onSurface),
              ),
            ),
            const SizedBox(height: 20),
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text("Select Week Days - Example shape rectangle & start on monday"),
            ),
            WeekDaySelector(
              controller: weekDaySelectorController2,
              width: 300,
              height: 100,
              shape: BoxShape.rectangle,
              weekDayStart: WeekDayName.monday,
              onSubmitted: (day) {
                if (kDebugMode) {
                  print("${day.name} is ${day.isSelected ? 'selected' : 'unselected'}");
                }
              },
            ),
            const SizedBox(height: 20),
            Row(
              children: [
                const Spacer(),
                TextButton(
                  onPressed: () {
                    weekDaySelectorController2.setSaturday(isSelected: true);
                    weekDaySelectorController2.setSunday(isSelected: true);
                  },
                  child: const Text("select weekend"),
                ),
                TextButton(
                  onPressed: () {
                    weekDaySelectorController2.setSaturday(isSelected: false);
                    weekDaySelectorController2.setSunday(isSelected: false);
                  },
                  child: const Text("unselect weekend"),
                ),
                const Spacer()
              ],
            ),
            const SizedBox(height: 20),
            Center(
              child: SizedBox(
                width: 500,
                child: Divider(color: Theme.of(context).colorScheme.onSurface),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

• controller: WeekDaySelectorController 对象，用于控制选中的天数。
• width: double 类型，设置选择器的宽度。
• height: double 类型，设置选择器的高度。
• shape: BoxShape 类型，设置选择器的形状（圆形或矩形）。
• weekDayStart: WeekDayName 枚举类型，设置一周的起始日（例如：WeekDayName.sunday 或 WeekDayName.monday）。
• onSubmitted: 回调函数，当用户选择或取消选择某一天时触发。

通过以上示例和参数说明，你应该能够轻松地在你的 Flutter 应用中集成和使用 flutter_weekday_selector 插件。希望这篇文章对你有所帮助！