Flutter日历

日历的使用场景相信大家都知道，它记录了哪些事件发生在特定日期以及特殊事件何时发生。

那么在Flutter中如何使用和集成呢，今天就带你来了解一下。

在本节中，我们将解释如何在 Flutter 应用程序中显示和使用日历小部件。

Flutter提供了一个名为table_calendar的简单小部件来在我们的应用程序中显示日历。表日历是高度可定制的，并且具有许多功能，例如手势、动画和多种格式。

table_calendar 提供了许多功能，如下所示：

• 使用 API 很容易。

• 它为 UI 控件提供自定义构建器。

• 它具有垂直自动调整大小。

• 它提供了漂亮的动画。

• 它提供手势处理。

• 提供月、弱、年等多种日历格式。

• 我们还可以使用一周中的多天格式。

让我们逐步了解如何创建和显示日历。

第 1 步：在您使用的IDE 中创建一个新的 Flutter 项目，并将其命名为 Flutter Calendar Example。

第 2 步：打开项目，导航到 lib 文件夹，然后打开pubspec.yaml文件。在此文件中，我们需要添加 table_calendar 依赖项，如下所示：

environment:
  sdk: ">=2.12.0 <3.0.0"
​
dependencies:  
  flutter:  
    sdk: flutter  
  table_calendar: ^2.3.3

第 3 步：添加上述依赖项后，我们需要运行以下命令来获取所需的包：

$ flutter pub get  

第 4 步：接下来，在 dart 文件中导入依赖项，如下所示：

import 'package:syncfusion_flutter_calendar/calendar.dart';  

第 5 步：在此之后，我们需要一个日历控制器并将日历初始化为CalendarController。

CalendarController _controller;  
  
@override  
void initState() {  
  super.initState();  
  _controller = CalendarController();  
}  

第 6 步：接下来，我们必须添加日历小部件作为任何小部件的子部件。在这里，我们将添加日历小部件作为脚手架小部件的子项。

@override  
Widget build(BuildContext context) {  
  return Scaffold(  
    body: SingleChildScrollView(  
      child: Column(  
        children: <Widget>[  
          TableCalendar()  
        ],  
      ),  
    ),  
  );  

第 7 步：现在，我们可以编写逻辑并添加样式来显示日历。

例子

下面是在应用程序中显示日历的完整代码。

import 'package:flutter/material.dart';  
import 'package:table_calendar/table_calendar.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        primarySwatch: Colors.green,  
      ),  
      home: HomeCalendarPage(),  
    );  
  }  
}  
  
class HomeCalendarPage extends StatefulWidget {  
  @override  
  _HomeCalendarPageState createState() => _HomeCalendarPageState();  
}  
  
class _HomeCalendarPageState extends State<HomeCalendarPage> {  
  CalendarController _controller;  
  
  @override  
  void initState() {  
    super.initState();  
    _controller = CalendarController();  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Calendar Example'),  
      ),  
      body: SingleChildScrollView(  
        child: Column(  
          crossAxisAlignment: CrossAxisAlignment.start,  
          children: <Widget>[  
            TableCalendar(  
              initialCalendarFormat: CalendarFormat.month,  
              calendarStyle: CalendarStyle(  
                  todayColor: Colors.blue,  
                  selectedColor: Theme.of(context).primaryColor,  
                  todayStyle: TextStyle(  
                      fontWeight: FontWeight.bold,  
                      fontSize: 22.0,  
                      color: Colors.white)  
              ),  
              headerStyle: HeaderStyle(  
                centerHeaderTitle: true,  
                formatButtonDecoration: BoxDecoration(  
                  color: Colors.brown,  
                  borderRadius: BorderRadius.circular(22.0),  
                ),  
                formatButtonTextStyle: TextStyle(color: Colors.white),  
                formatButtonShowsNext: false,  
              ),  
              startingDayOfWeek: StartingDayOfWeek.monday,  
              onDaySelected: (date, events) {  
                print(date.toUtc());  
              },  
              builders: CalendarBuilders(  
                selectedDayBuilder: (context, date, events) => Container(  
                    margin: const EdgeInsets.all(5.0),  
                    alignment: Alignment.center,  
                    decoration: BoxDecoration(  
                        color: Theme.of(context).primaryColor,  
                        borderRadius: BorderRadius.circular(8.0)),  
                    child: Text(  
                      date.day.toString(),  
                      style: TextStyle(color: Colors.white),  
                    )),  
                todayDayBuilder: (context, date, events) => Container(  
                    margin: const EdgeInsets.all(5.0),  
                    alignment: Alignment.center,  
                    decoration: BoxDecoration(  
                        color: Colors.blue,  
                        borderRadius: BorderRadius.circular(8.0)),  
                    child: Text(  
                      date.day.toString(),  
                      style: TextStyle(color: Colors.white),  
                    )),  
              ),  
              calendarController: _controller,  
            )  
          ],  
        ),  
      ),  
    );  
  }  
}  

输出：

当我们在设备或模拟器中运行应用程序时，我们应该会看到类似于以下屏幕截图的 UI。在这里，我们可以看到上一个和下一个箭头图标来显示月份。一周从星期一开始，日期 14 是我当前的日期。

如果我们选择另一个日期，我们可以看到当前日期和所选日期的颜色不同。见下图。

我们还可以显示一个月中的一周，如下图所示。