Flutter水平周日历展示插件 horizontal_week_calendar 的使用

安装

在您的 pubspec.yaml 文件中添加 horizontal_week_calendar: 依赖项，然后运行 flutter pub get：

dependencies:
  horizontal_week_calendar:

导入

添加以下行以导入包：

import 'package:horizontal_week_calendar/horizontal_week_calendar.dart';

如何使用

以下是一个简单的示例，展示了如何使用 HorizontalWeekCalendar 组件，并在日期更改时更新状态：

HorizontalWeekCalendar(
  onDateChange: (date) {
    setState(() {
      selectedDate = date;
    });
  },
),

示例 Demo

以下是一个完整的示例代码，展示了如何集成和使用 horizontal_week_calendar 插件：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:horizontal_week_calendar/horizontal_week_calendar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Packages Test',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const HorizontalWeekCalendarPackage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<HorizontalWeekCalendarPackage> createState() => _HorizontalWeekCalendarPackageState();
}

class _HorizontalWeekCalendarPackageState extends State<HorizontalWeekCalendarPackage> {
  var selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: const Text(
          "Horizontal Week Calendar",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              HorizontalWeekCalendar(
                minDate: DateTime(2023, 12, 31),
                maxDate: DateTime(2024, 1, 31),
                initialDate: DateTime(2024, 1, 15),
                onDateChange: (date) {
                  setState(() {
                    selectedDate = date;
                  });
                },
                showTopNavbar: false,
                monthFormat: "MMMM yyyy",
                showNavigationButtons: true,
                weekStartFrom: WeekStartFrom.Monday,
                borderRadius: BorderRadius.circular(7),
                activeBackgroundColor: Colors.deepPurple,
                activeTextColor: Colors.white,
                inactiveBackgroundColor: Colors.deepPurple.withOpacity(.3),
                inactiveTextColor: Colors.white,
                disabledTextColor: Colors.grey,
                disabledBackgroundColor: Colors.grey.withOpacity(.3),
                activeNavigatorColor: Colors.deepPurple,
                inactiveNavigatorColor: Colors.grey,
                monthColor: Colors.deepPurple,
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      "Selected Date",
                      textAlign: TextAlign.center,
                      style: theme.textTheme.titleMedium!.copyWith(
                        color: theme.primaryColor,
                      ),
                    ),
                    const SizedBox(height: 3),
                    Text(
                      DateFormat('dd MMM yyyy').format(selectedDate),
                      textAlign: TextAlign.center,
                      style: theme.textTheme.titleLarge!.copyWith(
                        color: theme.primaryColor,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

预览

以下是该插件的预览图：

支持作者

如果您觉得这个插件对您有帮助，可以通过以下链接支持作者：

Buy Me A Coffee

通过上述步骤，您可以轻松地将 horizontal_week_calendar 插件集成到您的 Flutter 应用中。希望这对您有所帮助！