Flutter日期选择器插件 flutter_linear_datepicker 的使用

flutter_linear_datepicker 是一个用于Flutter的线性日期选择器插件，支持波斯历（Jalaali）和公历（Gregorian）。本文将介绍如何使用该插件，并提供完整的示例代码。

插件简介

该插件提供了波斯历或公历的线性日期选择器，适用于需要在应用中集成日期选择功能的场景。以下是插件的基本信息：

• Pub Package
• 支持波斯历和公历
• 提供丰富的自定义选项

示例截图

使用步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_linear_datepicker: ^2.0.6

2. 安装依赖

运行以下命令安装依赖包：

$ flutter pub get

3. 导入插件

在 Dart 代码中导入插件：

import 'package:flutter_linear_datepicker/flutter_datepicker.dart';
import 'package:flutter_linear_datepicker/number_picker.dart';

如何使用？

简单用法

只需在 Flutter 代码中插入以下片段即可：

LinearDatePicker(
  dateChangeListener: (String selectedDate) {
    print(selectedDate);
  },
);

高级用法

可以通过以下参数自定义日期选择器：

LinearDatePicker(
  startDate: "2004/10/17", // yyyy/mm/dd
  endDate: "2020/02/20",
  initialDate: "2010/11/15",
  addLeadingZero: true,
  dateChangeListener: (String selectedDate) {
    print(selectedDate);
  },
  showDay: true,  // false -> only select year & month
  labelStyle: TextStyle(
    fontFamily: 'sans',
    fontSize: 14.0,
    color: Colors.black,
  ),
  selectedRowStyle: TextStyle(
    fontFamily: 'sans',
    fontSize: 18.0,
    color: Colors.deepOrange,
  ),
  unselectedRowStyle: TextStyle(
    fontFamily: 'sans',
    fontSize: 16.0,
    color: Colors.blueGrey,
  ),
  yearText: "سال | year",
  monthText: "ماه | month",
  dayText: "روز | day",
  showLabels: true, // to show column captions, e.g., year, month, etc.
  columnWidth: 100,
  showMonthName: true,
  isJalaali: false  // false -> Gregorian
),

完整示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 flutter_linear_datepicker 插件：

import 'package:flutter/material.dart';
import 'package:flutter_linear_datepicker/flutter_datepicker.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DatePicker Demo"),
      ),
      body: Center(
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              LinearDatePicker(
                startDate: "1396/12/12",
                endDate: "1398/01/14",
                initialDate: "1397/05/05",
                addLeadingZero: true,
                dateChangeListener: (String selectedDate) {
                  print(selectedDate);
                },
                showDay: true,
                labelStyle: TextStyle(
                  fontFamily: 'iran',
                  fontSize: 14.0,
                  color: Colors.black,
                ),
                selectedRowStyle: TextStyle(
                  fontFamily: 'iran',
                  fontSize: 18.0,
                  color: Colors.deepOrange,
                ),
                unselectedRowStyle: TextStyle(
                  fontFamily: 'iran',
                  fontSize: 16.0,
                  color: Colors.blueGrey,
                ),
                yearText: "سال | year",
                monthText: "ماه | month",
                dayText: "روز | day",
                showLabels: true,
                columnWidth: 100,
                showMonthName: true,
                isJalaali: true,
              ),
              ElevatedButton(
                child: Text(
                  "Pick Date | انتخاب تاریخ",
                ),
                onPressed: () {
                  showDateDialog(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  void showDateDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title: Text('Choose Date'),
        content: LinearDatePicker(
          dateChangeListener: (String selectedDate) {
            print(selectedDate);
          },
          showMonthName: true,
          isJalaali: false,
        ),
      ),
    );
  }
}

依赖的包

该插件使用了以下两个包：

• NumberPicker
• shamsi_date

通过上述步骤和示例代码，您可以轻松地在 Flutter 应用中集成并使用 flutter_linear_datepicker 插件。