Flutter日程管理插件simple_timetable的使用

simple_timetable 是一个用于在 Flutter 应用中展示时间表的简单插件。它可以帮助你轻松地管理并展示日程安排。

示例

事件模型

Event 类定义了一个事件模型，包含事件的唯一标识符、开始时间、结束时间、日期以及可选的有效负载。

class Event<T> {
  final String id;
  final DateTime start;
  final DateTime end;
  final DateTime date;
  final T payload;

  Event({
    @required this.id,
    @required this.start,
    @required this.end,
    @required this.date,
    this.payload,
  });
}

使用方法

以下是一个完整的示例，展示了如何使用 simple_timetable 插件来管理日程。

import 'package:flutter/material.dart';
import 'package:simple_timetable/simple_timetable.dart';
import 'package:dart_date/dart_date.dart'; // 用于处理日期

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple timetable',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _month = DateTime.now();
  DateTime _initDate = DateTime.now();
  int visibleRange = 7;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_month != null
            ? '${_month.year}-${_month.month}-${_month.day}'
            : ''),
        actions: [],
      ),
      body: Column(
        children: [
          Container(
            color: Colors.grey[300],
            child: Row(
              children: [
                SizedBox(width: 24),
                ElevatedButton(
                  child: Text('Change visible range'),
                  onPressed: () {
                    setState(() {
                      visibleRange = visibleRange == 7 ? 3 : 7;
                    });
                  },
                ),
                SizedBox(width: 24),
                ElevatedButton(
                  child: Text('Change initial date '),
                  onPressed: () {
                    setState(() {
                      _initDate = DateTime.now().addMonths(1);
                    });
                  },
                ),
                SizedBox(width: 24),
              ],
            ),
          ),
          SizedBox(height: 24),
          Expanded(
            child: SimpleTimetable<TimeTableEvent>(
              onChange: (
                List<DateTime> current,
                TimetableDirection dir,
              ) {
                print('On change date: ${current[0]}');
                print('On change direction: $dir');
                print('On change columns $current');
                setState(() {
                  _month = current[0];
                });
              },
              initialDate: _initDate,
              dayStart: 8,
              dayEnd: 24,
              visibleRange: visibleRange,
              events: eventsList,
              buildCard: (event, isPast) {
                return GestureDetector(
                  onTap: () {
                    print(event.payload.data.title);
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black),
                      borderRadius: BorderRadius.circular(4),
                      color: isPast
                          ? Colors.grey[400]
                          : Colors.blue[200].withOpacity(0.5),
                    ),
                    child: Column(
                      children: [
                        Text(
                          '${event.payload.data.title}',
                          style: TextStyle(fontSize: 10),
                        ),
                        Text(
                          '${event.start.format('hh:mm')}\n${event.end.format('hh:mm')}',
                          style: TextStyle(fontSize: 10),
                        ),
                        Text(
                          'isPast: $isPast',
                          style: TextStyle(fontSize: 10),
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

List<Event<TimeTableEvent>> eventsList = [
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(Duration(hours: 9)),
    end: DateTime.now().startOfDay.add(Duration(hours: 10)),
    date: DateTime.now().startOfDay,
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 1'),
    ),
  ),
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(Duration(hours: 12)),
    end: DateTime.now().startOfDay.add(Duration(hours: 13, minutes: 45)),
    date: DateTime.now().startOfDay,
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 2'),
    ),
  ),
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(Duration(hours: 11)),
    end: DateTime.now().startOfDay.add(Duration(hours: 12, minutes: 18)),
    date: DateTime.now().startOfDay,
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 3'),
    ),
  ),
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(Duration(hours: 15)),
    end: DateTime.now().startOfDay.add(Duration(hours: 16, minutes: 30)),
    date: DateTime.now().startOfDay,
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 3'),
    ),
  ),
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(
          Duration(
            days: 1,
            hours: 9,
          ),
        ),
    end: DateTime.now().startOfDay.add(
          Duration(
            days: 1,
            hours: 10,
            minutes: 15,
          ),
        ),
    date: DateTime.now().startOfDay.add(Duration(days: 1)),
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 4'),
    ),
  ),
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(
          Duration(
            days: 1,
            hours: 9,
          ),
        ),
    end: DateTime.now().startOfDay.add(
          Duration(
            days: 1,
            hours: 10,
            minutes: 15,
          ),
        ),
    date: DateTime.now().startOfDay.add(Duration(days: 1)),
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 5'),
    ),
  ),
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(
          Duration(
            days: 2,
            hours: 10,
          ),
        ),
    end: DateTime.now().startOfDay.add(
          Duration(
            days: 2,
            hours: 11,
            minutes: 30,
          ),
        ),
    date: DateTime.now().startOfDay.add(Duration(days: 2)),
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 6'),
    ),
  ),
];

解释

导入必要的库：

import 'package:flutter/material.dart';
import 'package:simple_timetable/simple_timetable.dart';
import 'package:dart_date/dart_date.dart';

创建主应用类 MyApp：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple timetable',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

创建主页类 MyHomePage：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

创建状态类 _MyHomePageState：

class _MyHomePageState extends State<MyHomePage> {
  DateTime _month = DateTime.now();
  DateTime _initDate = DateTime.now();
  int visibleRange = 7;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_month != null
            ? '${_month.year}-${_month.month}-${_month.day}'
            : ''),
        actions: [],
      ),
      body: Column(
        children: [
          Container(
            color: Colors.grey[300],
            child: Row(
              children: [
                SizedBox(width: 24),
                ElevatedButton(
                  child: Text('Change visible range'),
                  onPressed: () {
                    setState(() {
                      visibleRange = visibleRange == 7 ? 3 : 7;
                    });
                  },
                ),
                SizedBox(width: 24),
                ElevatedButton(
                  child: Text('Change initial date '),
                  onPressed: () {
                    setState(() {
                      _initDate = DateTime.now().addMonths(1);
                    });
                  },
                ),
                SizedBox(width: 24),
              ],
            ),
          ),
          SizedBox(height: 24),
          Expanded(
            child: SimpleTimetable<TimeTableEvent>(
              onChange: (
                List<DateTime> current,
                TimetableDirection dir,
              ) {
                print('On change date: ${current[0]}');
                print('On change direction: $dir');
                print('On change columns $current');
                setState(() {
                  _month = current[0];
                });
              },
              initialDate: _initDate,
              dayStart: 8,
              dayEnd: 24,
              visibleRange: visibleRange,
              events: eventsList,
              buildCard: (event, isPast) {
                return GestureDetector(
                  onTap: () {
                    print(event.payload.data.title);
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black),
                      borderRadius: BorderRadius.circular(4),
                      color: isPast
                          ? Colors.grey[400]
                          : Colors.blue[200].withOpacity(0.5),
                    ),
                    child: Column(
                      children: [
                        Text(
                          '${event.payload.data.title}',
                          style: TextStyle(fontSize: 10),
                        ),
                        Text(
                          '${event.start.format('hh:mm')}\n${event.end.format('hh:mm')}',
                          style: TextStyle(fontSize: 10),
                        ),
                        Text(
                          'isPast: $isPast',
                          style: TextStyle(fontSize: 10),
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

定义事件列表 eventsList：

List<Event<TimeTableEvent>> eventsList = [
  Event<TimeTableEvent>(
    id: UniqueKey().toString(),
    start: DateTime.now().startOfDay.add(Duration(hours: 9)),
    end: DateTime.now().startOfDay.add(Duration(hours: 10)),
    date: DateTime.now().startOfDay,
    payload: TimeTableEvent(
      data: EventPayload(title: 'Event 1'),
    ),
  ),
  // 其他事件...
];

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

nodeper 1楼•10 小时前

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

当然，以下是如何在Flutter项目中使用simple_timetable插件的一个基本示例。simple_timetable是一个用于创建和管理日程表的Flutter插件。请注意，这个插件的具体API和功能可能会根据版本有所不同，所以请参考最新的官方文档以确保准确性。

首先，确保你已经在pubspec.yaml文件中添加了simple_timetable依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_timetable: ^最新版本号 # 替换为当前最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中创建一个简单的日程管理界面。以下是一个基本的示例代码：

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

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

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

class TimetableScreen extends StatefulWidget {
  @override
  _TimetableScreenState createState() => _TimetableScreenState();
}

class _TimetableScreenState extends State<TimetableScreen> {
  final List<TimetableEvent> events = [
    TimetableEvent(
      title: 'Event 1',
      startTime: DateTime(2023, 10, 1, 9, 0),
      endTime: DateTime(2023, 10, 1, 10, 0),
      color: Colors.red,
    ),
    TimetableEvent(
      title: 'Event 2',
      startTime: DateTime(2023, 10, 1, 14, 0),
      endTime: DateTime(2023, 10, 1, 16, 0),
      color: Colors.blue,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Timetable Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Timetable(
          events: events,
          startTime: DateTime(2023, 10, 1, 0, 0),
          endTime: DateTime(2023, 10, 1, 23, 59),
          timeInterval: const Duration(hours: 1), // 每小时一个间隔
          onEventTap: (event) {
            // 点击事件回调
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Tapped on ${event.title}')),
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含两个事件的日程表。每个事件都有标题、开始时间、结束时间和颜色。Timetable小部件接受这些事件以及其他一些参数，如开始时间、结束时间和时间间隔。我们还添加了一个点击事件回调，当用户点击某个事件时，会显示一个SnackBar。

请注意，simple_timetable插件的具体API可能会有所不同，所以你可能需要参考插件的官方文档来调整代码。例如，如果插件提供了更多的自定义选项或不同的方法来处理事件，你可能需要在代码中做出相应的调整。

此外，确保你已经正确导入了simple_timetable包，并且已经按照插件的说明完成了所有必要的设置。如果你遇到任何问题，查阅插件的官方文档或GitHub存储库通常是一个很好的起点。