Flutter日历时间线插件calendar_timeline_sbk的使用

Flutter日历时间线插件calendar_timeline_sbk的使用

标题

Flutter日历时间线插件calendar_timeline_sbk的使用

内容

• 图片展示

  • header.jpg
  • example.gif

• 简介

  • calendar_timeline_sbk 是一个用于在水平时间线上选择日期的 Flutter 插件，适用于需要占用小屏幕空间且易于单手操作的场景。

• 属性介绍

  • 属性	类型	描述
    initialDate	DateTime	初始选中的日期
    firstDate	DateTime	日历中可用的第一天
    lastDate	DateTime	日历中可用的最后一天
    selectableDayPredicate	SelectableDayPredicate	自定义日期选择逻辑
    onDateSelected	OnDateSelected	日期选择回调
    leftMargin	double	月和日列表左侧边距
    monthColor	Color	月份列表元素的颜色
    dayColor	Color	日列表元素的颜色
    activeDayColor	Color	选中日期文本颜色
    activeBackgroundDayColor	Color	选中日期背景颜色
    dotColor	Color	选中日期顶部点的颜色
    locale	String	获取格式化日期的本地字符串
    showYears	bool	是否显示年份选择器

• 使用示例

  • 可以查看示例文件夹以获取完整示例代码。

CalendarTimeline(
  initialDate: DateTime(2020, 4, 20),
  firstDate: DateTime(2019, 11, 115),
  lastDate: DateTime(2020, 11, 20),
  onDateSelected: (date) =&gt print(date),
  leftMargin: 20,
  monthColor: Colors.blueGrey,
  dayColor: Colors.teal[200],
  activeDayColor: Colors.white,
  activeBackgroundDayColor: Colors.redAccent[100],
  dotsColor: Color(0xFF333A47),
  selectableDayPredicate: (date) =&gt date.day != 23,
  locale: 'en_ISO',
)

示例代码

import 'package:calendar_timeline_sbk/calendar_timeline.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late DateTime _selectedDate;

  void _resetSelectedDate() {
    _selectedDate = DateTime.now().add(const Duration(days: 2));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF333A47),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text(
                'Calendar Timeline',
                style: Theme.of(context)
                    .textTheme
                    .titleLarge!
                    .copyWith(color: Colors.tealAccent[100]),
              ),
            ),
            CalendarTimeline(
              showYears: true,
              initialDate: _selectedDate,
              firstDate: DateTime.now(),
              lastDate: DateTime.now().add(const Duration(days: 365 * 4)),
              onDateSelected: (date) => setState(() => _selectedDate = date),
              leftMargin: 20,
              monthColor: Colors.white70,
              dayColor: Colors.teal[200],
              dayNameColor: Color.fromARGB(255, 50, 59, 77),
              activeDayColor: Colors.white,
              inactiveDayNameColor:Colors.redAccent[100],
              activeBackgroundDayColor: Colors.redAccent[100],
              dotsColor: const Color(0xFF333A47),
              selectableDayPredicate: (date) => date.day != 23,
              locale: 'en',
            ),
            const SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.only(left: 16),
              child: TextButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.teal[200]),
                ),
                child: const Text(
                  'RESET',
                  style: TextStyle(color: Color(0xFF333A47)),
                ),
                onPressed: () => setState(() => _resetSelectedDate()),
              ),
            ),
            const SizedBox(height: 30),
            Center(
              child: Text(
                'Selected date is $_selectedDate',
                style: const TextStyle(color: Colors.white),
              ),
            )
          ],
        ),
      ),
    );
  }
}