Flutter日历插件flutter_mmcalendar的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter日历插件flutter_mmcalendar的使用

安装 💻

为了开始使用flutter_mmcalendar,你必须在机器上安装Flutter SDK

在你的pubspec.yaml文件中添加flutter_mmcalendar依赖:

dependencies:
  flutter_mmcalendar:

然后运行以下命令来安装它:

flutter packages get

特性

  • Myanmar Date
  • Western Date
  • Astrological Information
  • Holidays - 包括缅甸泼水节和其他节日。
  • MoonPhase小部件。

使用

首先导入包:

import 'package:flutter_mmcalendar/flutter_mmcalendar.dart';

示例用法

默认配置:

final mmCalendar = MmCalendar(
  config: MmCalendarConfig.defaultConfig(),
);

英语语言配置:

final mmCalendar = MmCalendar(
  config: MmCalendarConfig.englishLanguage(),
);

特定语言和日历类型:

final mmCalendar = MmCalendar(
  config: const MmCalendarConfig(
    calendarType: CalendarType.gregorian,
    language: Language.myanmar,
  ),
);

使用示例:

// 获取指定日期的缅甸日期
final myanmarDate = mmCalendar.fromDate(2023, 10, 19);

可用配置:

  • MmCalendarConfig.defaultConfig()
  • MmCalendarConfig.myanmarLanguage()
  • MmCalendarConfig.zawgyiLanguage()
  • MmCalendarConfig.englishLanguage()
  • MmCalendarConfig.monLanguage()
  • MmCalendarConfig.karenLanguage()
  • MmCalendarConfig.taiLanguage()

可用语言:

  • english
  • myanmar - 缅甸语Unicode
  • zawgyi - 缅甸语Zawgyi
  • mon
  • karen
  • tai

其他用法:

// 日期转换方法
final myanmarDate = mmCalendar.fromDateTime(DateTime.now());
mmCalendar.fromDate(2023, 7, 27);
mmCalendar.fromDateAndTime(2023, 7, 27, 10, 30, 01);
mmCalendar.fromJulian(2456599);
final westernDate = mmCalendar.getWesternDateFromJulianDay(2456599);

/// 星座信息
final astro = myanmarDate.astro;
final astroByLanguage = myanmarDate.getAstro(
  languageCatalog: LanguageCatalog.myanmar(),
);
astro.getMahabote();

// 所有节假日
List<String> holidays = myanmarDate.holidays;

final resultStr = myanmarDate.formatByPatternAndLanguage(
  pattern: MyanmarDateFormat.simple,
  langCatalog: mmCalendar.languageCatalog,
);
// 输出: သာသနာနှစ် ၂၅၆၇ ခု, မြန်မာနှစ် ၁၃၈၅ ခု, သီတင်းကျွတ် လပြည့်  ရက် တနင်္ဂနွေနေ့
// (或)

final resultStr = myanmarDate.formatByPatternAndLanguage(
    pattern: 'S s k, B y k, M p f r En',
    langCatalog: LanguageCatalog(language: Language.english),
);
// 输出: Sasana Year 2567 , Myanmar Year 1385 , Thadingyut full moon   Sunday

缅甸日期模式

缅甸日期格式由日期模式字符串指定。以下是定义的模式字母(‘S’, ‘s’, ‘B’, ‘y’, ‘k’, ‘M’, ‘p’, ‘f’, ‘E’, ‘n’, ‘r’ 是保留的):

// S s k, B y k, M p f r En
MyanmarDateFormat.simple
// S
MyanmarDateFormat.sasanaYear
// s
MyanmarDateFormat.buddhistEra
// B
MyanmarDateFormat.burmeseYear
// y
MyanmarDateFormat.myanmarYear
// k
MyanmarDateFormat.ku
// M
MyanmarDateFormat.monthInYear
// p
MyanmarDateFormat.moonPhase
// f
MyanmarDateFormat.fortnightDay
// E
MyanmarDateFormat.dayNameInWeek
// n
MyanmarDateFormat.nay
// r
MyanmarDateFormat.yat
字母 日期组件 示例(缅甸) 示例(英语)
S 佛教纪年 သာသနာနှစ် Sasana Year
s 佛历年 ၂၅၆၁ 2561
B 缅甸年 မြန်မာနှစ် Myanmar Year
y 缅甸年 ၁၃၇၉ 1379
k Ku ခု -
M 年内月份 ဝါခေါင် Wagaung
p 月相 လဆန်း waxing
f 半月日 1
r Yat ရက် -
E 星期几 တနင်္လာ Monday
n Nay နေ့ -

星座信息

final mmCalendar = MmCalendar(
  config: MmCalendarConfig.myanmarLanguage(),
);

final myanmarDate = mmCalendar.fromDate(2023, 10, 19);
final astro = myanmarDate.astro;

// အမြိတ္တစုတ်
final amyeittasote = astro.getAmyeittasote();

// ရက်ရာဇာ, ပြဿဒါး, မွန်းလွဲပြဿဒါး
final astrologicalDay = astro.getAstrologicalDay();

// "Binga", "Atun", "Yaza", "Adipati", "Marana", "Thike", "Puti"
final mahabote = astro.getMahabote();

// မဟာရက်ကြမ်း
final mahayatkyan = astro.getMahayatkyan();

// "West", "North", "East", "South"
final nagahle = astro.getNagahle();

// နဂါးပေါ်
final nagapor = astro.getNagapor();

// "Ogre", "Elf", "Human"
final nakhat = astro.getNakhat();

// ဥပုသ်
final sabbath = astro.getSabbath();

// ရှမ်းရက်
final shanyat = astro.getShanyat();

// သမားညို
final thamanyo = astro.getThamanyo();

// သမားဖြူ
final thamaphyu = astro.getThamaphyu();

// ဝါရမိတ္တုကြီး
final warameittugyi = astro.getWarameittugyi();

// ဝါရမိတ္တုငယ်
final warameittunge = astro.getWarameittunge();

// ရက်ပုပ်
final yatpote = astro.getYatpote();

// ရက်ယုတ်မာ
final yatyotema = astro.getYatyotema();

// "ပုဿနှစ်", "မာခနှစ်", "ဖ္လကိုန်သံဝစ္ဆိုဝ်ရနှစ်", "စယ်နှစ်", "ပိသျက်နှစ်", "စိဿနှစ်", "အာသတ်နှစ်", "သရဝန်နှစ်",
// "ဘဒ္ဒြသံဝစ္ဆုံရ်နှစ်", "အာသိန်နှစ်", "ကြတိုက်နှစ်", "မြိက္ကသိုဝ်နှစ်"
final yearName = astro.getYearName();

你还可以通过调用以is前缀的属性来检查这些日子是否符合某些条件。例如:

// 它将返回true或false
final isAmyeittasote = astro.isAmyeittasote;

月相小部件

MoonPhaseWidget(
  date: DateTime.now(),
  size: 50,
),

概念参考资源

算法、程序和缅甸日历计算

C++ 和 JavaScript 实现

Java 库实现

完整示例代码

以下是一个完整的示例代码,展示了如何使用flutter_mmcalendar插件:

import 'package:example/pages/home_page.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MMCalendar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_mmcalendar/flutter_mmcalendar.dart';

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

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

class _HomePageState extends State<HomePage> {
  final mmCalendar = MmCalendar(
    config: MmCalendarConfig.defaultConfig(),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MMCalendar Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前日期:',
              style: TextStyle(fontSize: 20),
            ),
            FutureBuilder<DateTime>(
              future: mmCalendar.fromDateTime(DateTime.now()),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    '缅甸日期: ${snapshot.data!.year} 年 ${snapshot.data!.month} 月 ${snapshot.data!.day} 日',
                    style: TextStyle(fontSize: 20),
                  );
                } else if (snapshot.hasError) {
                  return Text('${snapshot.error}');
                }
                return CircularProgressIndicator();
              },
            ),
            SizedBox(height: 20),
            MoonPhaseWidget(
              date: DateTime.now(),
              size: 50,
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_mmcalendar插件的示例代码。这个插件提供了一个高度可定制的日历组件,非常适合用于显示日期选择、事件标记等功能。

首先,确保你已经在pubspec.yaml文件中添加了flutter_mmcalendar依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_mmcalendar: ^最新版本号  # 请替换为实际的最新版本号

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

接下来,你可以在你的Flutter应用中实现一个日历组件。以下是一个基本的示例:

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

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

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

class CalendarScreen extends StatefulWidget {
  @override
  _CalendarScreenState createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  late MMCalendarController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Calendar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: MMCalendar(
          controller: _controller,
          header: MMCalendarHeader(
            leftBuilder: (_, __) => IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => Navigator.pop(context),
            ),
            centerBuilder: (_, date) => Text(
              DateFormat('yyyy-MM').format(date),
              style: TextStyle(fontSize: 20),
            ),
            rightBuilder: (_, __) => IconButton(
              icon: Icon(Icons.today),
              onPressed: () => _controller.jumpToDate(DateTime.now()),
            ),
          ),
          cellBuilder: (context, date, state) {
            // 自定义日期单元格
            final isToday = date.isSameDay(DateTime.now());
            final isSelected = _controller.selectedDates.contains(date);
            final textStyle = TextStyle(
              color: isToday ? Colors.blue : Colors.black,
              fontSize: 16,
              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
            );
            return GestureDetector(
              onTap: () => _controller.toggleSelection(date),
              child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: isSelected ? Colors.grey[100] : Colors.transparent,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Text(
                  date.day.toString(),
                  style: textStyle,
                ),
              ),
            );
          },
          // 设置默认选中的日期
          initialSelectedDates: [DateTime.now()],
          // 设置可选择的日期范围
          dateRange: DateTimeRange(
            start: DateTime(DateTime.now().year - 1),
            end: DateTime(DateTime.now().year + 1),
          ),
          // 设置周末颜色
          weekendTextStyle: TextStyle(color: Colors.red),
          // 设置禁用日期的样式
          disabledDateTextStyle: TextStyle(color: Colors.grey),
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 设置依赖:在pubspec.yaml中添加flutter_mmcalendar依赖。
  2. 创建主应用:使用MaterialApp创建一个简单的Flutter应用。
  3. 创建日历屏幕:创建一个CalendarScreen组件,它包含了一个MMCalendar组件。
  4. 初始化控制器:在initState方法中初始化MMCalendarController
  5. 自定义日历头部:使用MMCalendarHeader自定义日历头部,包括返回按钮、当前月份显示和跳到今天按钮。
  6. 自定义日期单元格:使用cellBuilder自定义每个日期单元格的显示和交互。
  7. 设置初始选中日期和日期范围:使用initialSelectedDatesdateRange设置默认选中的日期和可选择的日期范围。
  8. 设置周末和禁用日期的样式:使用weekendTextStyledisabledDateTextStyle设置周末和禁用日期的样式。

这个示例提供了一个基本的日历组件实现,你可以根据自己的需求进一步自定义和扩展。

回到顶部