Flutter日期展示插件calendar_quarters_month_day的使用

Flutter日期展示插件calendar_quarters_month_day的使用

描述

Calendar Quarters, Months, and Days Picker 是一个 Flutter 包，旨在简化选择时间间隔的过程，无论是年份的季度、月份还是天数。

特点

• 轻松选择季度、月份或天数等时间间隔。
• 直观且可定制的界面。
• 兼容 Android 和 iOS 平台。

安装

要将 Calendar Quarters, Months, and Days Picker 集成到您的 Flutter 项目中，在 pubspec.yaml 文件中添加 calendar_quarters_month_day 作为依赖项：

dependencies:
  calendar_quarters_month_day: ^0.0.6

使用该包时，首先导入：

import 'package:calendar_quarters_month_day/calendar_quarters_month_day.dart';

使用方法

使用 Calendar Quarters, Months, and Days Picker 很简单。将其添加到您的小部件树中，并根据需要进行自定义：

CalendarQuartersMonthDay(
  locale: 'en_US',
  callbackFunction: (List<DateTime> dates) {
    print(dates.first);
    print(dates.last);
  },
),

示例

以下是一个基本示例，演示如何使用 Calendar Quarters, Months, and Days Picker 来选择一年中的一个季度：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Calendar Picker Demo'),
        ),
        body: Center(
          child: CalendarQuartersMonthDay(
            locale: 'en_US',
            callbackFunction: (List<DateTime> dates) {
              print(dates.first);
              print(dates.last);
            },
          ),
        ),
      ),
    );
  }
}

进阶示例

以下是一个更复杂的示例，展示了如何自定义 Calendar Quarters, Months, and Days Picker 的样式和功能：

import 'package:calendar_quarters_month_day/calendar_quarters_month_day.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      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(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text(""),
      ),
      body: Center(
        child: CalendarQuartersMonthDay(
          activeHeadingTextStyle: GoogleFonts.montserrat(
              fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white),
          inActiveHeadingTextStyle: GoogleFonts.montserrat(
              fontSize: 12, fontWeight: FontWeight.w500, color: Colors.blue[400]),
          textStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          okTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          cancelTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          monthsTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          quartersTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          selectADateTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          monthsYearHeadingTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          quartersYearHeadingTextStyle: GoogleFonts.montserrat(fontSize: 12, fontWeight: FontWeight.w500),
          monthsBorderRadius: 5,
          quartersBorderRadius: 5,
          okText: "Done",
          cancelText: "Cancel",
          initialDate: DateTime.now(),
          activeHeadingContainerColor: Colors.blue[400],
          inActiveHeadingContainerColor: Colors.white,
          monthsHeadingLeftIcon: Icon(Icons.arrow_back_ios, color: Colors.blue[400]),
          monthsHeadingRightIcon: Icon(Icons.arrow_forward_ios, color: Colors.blue[400]),
          locale: "en_US",
          callbackFunction: (List<DateTime> dates) {
            print(dates.first);
            print(dates.last);
          },
        ),
      ),
    );
  }
}