Flutter日程管理插件flutter_hourly_calendar的使用

Flutter hourly calendar。可以根据选定的时间段可视化您的事件。

截图

图片1	图片2

图片3	图片4

使用

示例代码

HourlyCalendar(
  controller: controller,
  onSelected: (selectedItem, controller) {
    print("${selectedItem.startTime} - ${selectedItem.endTime}");
  },
),

初始化数据

var random = math.Random();
late var items = List.generate(20, (index) {
  return CalendarData<String>(
      title: "Event $index",
      id: "$index",
      startTime: DateTime.now().add(const Duration(days: -5)).add(Duration(days: index)).copyWith(
            hour: random.nextInt(20) - 10,
            minute: random.nextInt(59),
          ),
      endTime: DateTime.now().add(const Duration(days: -5)).add(Duration(days: index)).copyWith(
            hour: random.nextInt(23) + 12,
            minute: random.nextInt(59),
          ),
      data: "event $index",
      color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0));
});
late final HourlyCalendarController controller = HourlyCalendarController(items, date: DateTime.now());

参数

HourlyCalendarController

参数说明

• List<CalendarData<T>> items, {this.oneHourHeight = 40, DateTime? date}
  • items: 您的事件。类型为 List<CalendarData<T>>
  • oneHourHeight: 1小时的总高度。所有计算都基于此值
• date: 选择的日历日期，默认为 DateTime.now()

示例代码

double _findHeight(DateTime start, DateTime end) {
  // 每秒的高度
  var perSecondHeight = controller.oneHourHeight / 3600;

  var diff = start.difference(end);
  // 总事件秒数
  var totalSecond = diff.inSeconds;
  // 总事件高度
  return (totalSecond * perSecondHeight).toDouble().abs();
}

HourlyCalendar

参数说明

• controller [HourlyCalendarController] 日历控制器。必须在控制器中指定您的事件
• mainContainerDecoration - [BoxDecoration] 主容器装饰
• hourContainerDecoration - [BoxDecoration] 每小时容器装饰
• hourTextStyle - [TextStyle] 每小时文本样式
• bottomListTitleStyle - [TextStyle] 底部列表标题文本样式
• bottomListHourStyle - [TextStyle] 底部列表持续时间文本样式
• controller - [HourlyCalendarController] 日历控制器
• hideHeader - [bool] 如果为 true 隐藏头部
• hideFooter - [bool] 如果为 true 隐藏底部
• headerHeight - [double] 头部高度
• hoursWidth - [double] 小时宽度
• headerDateTextStyle - [TextStyle] 头部文本样式
• headerDateFormat - [String] 头部日期文本格式
• hourBuilder - 构建每个小时

示例代码

(hourBuilder)
(context,hour) =>  Container(
    padding: const EdgeInsets.all(8),
    decoration: hourContainerDecoration ??
        BoxDecoration(
          border: Border(
            right: BorderSide(color: Theme.of(context).disabledColor.withOpacity(0.5)),
          ),
        ),
    child: Center(
      child: Text(
        hour.text,
        style: hourTextStyle ??
            Theme.of(context).textTheme.bodyLarge!.copyWith(
                  fontSize: 15,
                  color: hour.isShift
                      ? Theme.of(context).disabledColor.withOpacity(0.3)
                      : Theme.of(context).disabledColor,
                ),
      ),
    ),
  )

itemBuilder -> 构建每个事件

(itemBuilder)
(context,item,controller,selectedId) => InkWell(
     onLongPress: () {
       controller.setSelected(item.id);
       if (onSelected != null) {
         onSelected!(item, controller);
       }
     },
     onTap: () => controller.setSelected(item.id),
     child: Container(
       // width: 100,
       height: mainContainerHeight,
       decoration: BoxDecoration(
         color: selectedId == item.id ? item.color : item.color.withAlpha(150),
         borderRadius: BorderRadius.circular(5),
       ),
       child: Center(
         child: RotatedBox(
           quarterTurns: 1,
           child: FittedBox(
             child: Text(
               item.title,
               style: hourTextStyle ??
                   Theme.of(context).textTheme.bodyLarge!.copyWith(
                         fontSize: 15,
                         color: Colors.white,
                       ),
             ),
           ),
         ),
       ),
     ),
   );

bottomItemListBuilder -> 构建底部事件列表

(bottomItemListBuilder)
(context,item,controller,selectedId)=>Row(children:[
   Text(item.startTime),
   Text(item.endTime),
  ])

其他参数

• onSelected - 点击事件 (selectedItem,controller) => void
• onRefresh - 刷新事件 () => void
• headerBuilder - 头部构建器

示例代码

(headerBuilder)
(date,controller)=>Row(
     children:[
     Button(onPress:controller.previousDate,text:'Previous'),
     Expanded(child: Text(date.toString().format("HH:mm")),)
     Button(onPress:controller.nextDate,text:'Next')
   ])

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_hourly_calendar/flutter_hourly_calendar.dart';
import "dart:math" as math;

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> {
  var random = math.Random();
  late var items = List.generate(20, (index) {
    return CalendarData<String>(
        title: "Event $index",
        id: "$index",
        startTime: DateTime.now().add(const Duration(days: -5)).add(Duration(days: index)).copyWith(
              hour: random.nextInt(20) - 10,
              minute: random.nextInt(59),
            ),
        endTime: DateTime.now().add(const Duration(days: -5)).add(Duration(days: index)).copyWith(
              hour: random.nextInt(23) + 12,
              minute: random.nextInt(59),
            ),
        data: "event $index",
        color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0));
  });
  late final HourlyCalendarController controller = HourlyCalendarController(items, date: DateTime.now(), oneHourHeight: 60);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: HourlyCalendar(
          controller: controller,
          onSelected: (selectedItem, controller) {
            print("${selectedItem.startTime} - ${selectedItem.endTime}");
          },
        ),
      ),
    );
  }
}