Flutter尼泊尔年月选择器插件nepali_month_year_picker的使用

Flutter尼泊尔年月选择器插件nepali_month_year_picker的使用

nepali_month_year_picker 是一个基于尼泊尔日历的年月选择器插件。它受到了 zulfahmi.dev 的 month year picker 的启发，并且借助了 nepali_utils 包来实现。

快速开始

以下是使用该插件的基本步骤：

1. 打开你的 pubspec.yaml 文件并添加以下依赖项：

   nepali_month_year_picker: ^0.0.1+1
   

   或者直接在终端运行以下命令：

   flutter pub add nepali_month_year_picker
   

2. 运行 flutter pub get 来获取新的依赖项。

3. 在你的 Dart 代码中导入该库：

   import 'package:nepali_month_year_picker/nepali_month_year_picker.dart';
   

   同时确保你的 MaterialApp 包含以下 localizationsDelegates：

   MaterialApp(
     ...
     localizationsDelegates: const [
       GlobalMaterialLocalizations.delegate,
       MonthYearPickerLocalizations.delegate,
     ],
   )
   

4. 在代码中使用该插件：

   final selected = await showNepaliMonthYearPicker(
     context: context,
     initialDate: NepaliDateTime.now(),
     firstDate: NepaliDateTime(2019),
     lastDate: NepaliDateTime(2023),
   );
   

参数

以下是一些关键参数及其描述：

示例 Demo

你可以通过以下示例代码了解如何使用该插件：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:nepali_month_year_picker/nepali_month_year_picker.dart';

import 'package:nepali_utils/nepali_utils.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nepali Month Year Picker Example',
      home: const MyHomePage(),
      theme: ThemeData(useMaterial3: true),
      localizationsDelegates: const [
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        MonthYearPickerLocalizations.delegate,
      ],
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  NepaliDateTime? _selected;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Nepali Month Year Picker Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_selected == null)
              const Text('No month year selected.')
            else ...[
              CalendarIconButton(
                  onNext: onNextPressed,
                  onPrev: onPrevPressed,
                  onTap: () => _onPressed(context: context),
                  title: NepaliDateFormat(
                    'MMMM yyyy',
                  ).format(_selected!)),
              Text(NepaliDateFormat('MMMM yyyy', Language.nepali)
                  .format(_selected!)),
            ],
            TextButton(
              child: const Text('DEFAULT LOCALE'),
              onPressed: () => _onPressed(context: context),
            ),
            TextButton(
              child: const Text('नेपाली'),
              onPressed: () => _onPressed(
                context: context,
                locale: 'ne',
              ),
            ),
          ],
        ),
      ),
    );
  }

  void onNextPressed() {
    if (_selected!.month + 1 > 12) {
      _selected = NepaliDateTime(_selected!.year + 1, 1);
    } else {
      _selected = NepaliDateTime(_selected!.year, _selected!.month + 1);
    }
    setState(() {});
  }

  void onPrevPressed() {
    if (_selected!.month - 1 < 1) {
      _selected = NepaliDateTime(_selected!.year + 1, 12);
    } else {
      _selected = NepaliDateTime(_selected!.year, _selected!.month - 1);
    }
    setState(() {});
  }

  Future<void> _onPressed({
    required BuildContext context,
    String? locale,
  }) async {
    final localeObj = locale != null ? Locale(locale) : const Locale("en");
    final selected = await showNepaliMonthYearPicker(
      context: context,
      initialDate: _selected ?? NepaliDateTime.now(),
      firstDate: NepaliDateTime(2070),
      lastDate: NepaliDateTime(2090),
      locale: localeObj,
    );
    if (selected != null) {
      setState(() {
        _selected = selected;
      });
    }
  }
}

class CalendarIconWidget extends StatelessWidget {
  const CalendarIconWidget({super.key, required this.icon, required this.func});
  final Widget icon;
  final VoidCallback func;
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: func,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: icon,
      ),
    );
  }
}

class CalendarIconButton extends StatelessWidget {
  const CalendarIconButton(
      {super.key,
      required this.onNext,
      required this.onPrev,
      required this.onTap,
      required this.title});
  final VoidCallback onNext;
  final VoidCallback onPrev;
  final VoidCallback onTap;
  final String title;
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CalendarIconWidget(
              icon: const Icon(
                Icons.arrow_back_ios,
              ),
              func: onPrev,
            ),
            const Icon(
              Icons.calendar_month,
            ),
            Text(
              title,
            ),
            CalendarIconWidget(
              icon: const Icon(
                Icons.arrow_forward_ios,
              ),
              func: onNext,
            ),
          ],
        ),
      ),
    );
  }
}