Flutter日期时间选择器插件ir_datetime_picker的使用

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

Flutter日期时间选择器插件ir_datetime_picker的使用

ir_datetime_picker 是一个支持波斯历（Jalali）、公历（Gregorian）和时间选择器的Flutter插件，具有Cupertino风格和响应式UI。本文将介绍如何在Flutter项目中使用这个插件。

添加依赖

Step 1: 在 pubspec.yaml 文件中添加依赖

dependencies:
  ir_datetime_picker: ^latest_version

请确保将 ^latest_version 替换为实际版本号，可以在 pub.dev 上找到最新版本。

Step 2: 导入库

在需要使用的文件中导入库：

import 'package:ir_datetime_picker/ir_datetime_picker.dart';

使用示例

Jalali Date Picker

ElevatedButton(
  child: const Text("انتخاب تاریخ"),
  onPressed: () async {
    Jalali? selectedDate = await showIRJalaliDatePickerDialog(
      context: context,
      title: "انتخاب تاریخ",
      visibleTodayButton: true,
      todayButtonText: "انتخاب امروز",
      confirmButtonText: "تایید",
      initialDate: Jalali(1400, 4, 2),
    );
    if (selectedDate != null) {
      setState(() {
        _jalaliDate = "${selectedDate.year}/${selectedDate.month}/${selectedDate.day}";
      });
    }
  },
)

Gregorian Date Picker

ElevatedButton(
  child: const Text("انتخاب تاریخ"),
  onPressed: () async {
    Gregorian? selectedDate = await showIRGregorianDatePickerDialog(
      context: context,
      title: "انتخاب تاریخ",
      visibleTodayButton: true,
      todayButtonText: "انتخاب امروز",
      confirmButtonText: "تایید",
      initialDate: Gregorian(2020, 7, 15),
    );
    if (selectedDate != null) {
      setState(() {
        _gregorianDate = "${selectedDate.year}/${selectedDate.month}/${selectedDate.day}";
      });
    }
  },
)

Time Picker

ElevatedButton(
  child: const Text("انتخاب زمان"),
  onPressed: () async {
    IRTimeModel? selectedTime = await showIRTimePickerDialog(
      context: context,
      initialTime: IRTimeModel(hour: 18, minute: 45, second: 59),
      title: "انتخاب زمان",
      visibleSecondsPicker: true,
      visibleNowButton: true,
      nowButtonText: "انتخاب اکنون",
      confirmButtonText: "تایید",
    );
    if (selectedTime != null) {
      setState(() {
        _time = selectedTime.toString(showSecond: true);
        Duration durationTime = selectedTime.toDuration();
        if (kDebugMode) print('Duration: ${durationTime.toString()}');
        if (kDebugMode) print('IRTimeModel: ${IRTimeModel.fromDuration(durationTime).toString(showSecond: true)}');
      });
    }
  },
)

自定义 Jalali DatePicker Widget

Container(
  color: Colors.green.withOpacity(0.1),
  child: IRJalaliDatePicker(
    initialDate: Jalali(1400, 1, 3),
    minYear: 1390,
    maxYear: 1420,
    visibleTodayButton: true,
    todayButtonText: "انتخاب اکنون",
    constraints: const BoxConstraints.tightFor(width: 400, height: 200),
    onSelected: (Jalali date) {
      if (kDebugMode) print(date.toString());
    },
  ),
)

完整示例 Demo

以下是一个完整的示例，展示了如何在应用中集成上述所有功能：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:ir_datetime_picker/ir_datetime_picker.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: const [Locale("fa"), Locale("en")],
      locale: const Locale("fa"),
      debugShowCheckedModeBanner: false,
      title: 'Example',
      theme: ThemeData(
        fontFamily: "IranSans",
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _jalaliDate = "Null";
  String _gregorianDate = "Null";
  String _time = "Null";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("تاریخ جلالی: $_jalaliDate", style: const TextStyle(fontSize: 18.0)),
            const SizedBox(height: 5.0),
            ElevatedButton(
              child: const Text("انتخاب تاریخ"),
              onPressed: () async {
                Jalali? selectedDate = await showIRJalaliDatePickerDialog(
                  context: context,
                  title: "انتخاب تاریخ",
                  visibleTodayButton: true,
                  todayButtonText: "انتخاب امروز",
                  confirmButtonText: "تایید",
                  initialDate: Jalali(1400, 4, 2),
                );
                if (selectedDate != null) {
                  setState(() {
                    _jalaliDate = "${selectedDate.year}/${selectedDate.month}/${selectedDate.day}";
                  });
                }
              },
            ),
            const SizedBox(height: 30.0),
            Text("تاریخ میلادی: $_gregorianDate", style: const TextStyle(fontSize: 18.0)),
            const SizedBox(height: 5.0),
            ElevatedButton(
              child: const Text("انتخاب تاریخ"),
              onPressed: () async {
                Gregorian? selectedDate = await showIRGregorianDatePickerDialog(
                  context: context,
                  title: "انتخاب تاریخ",
                  visibleTodayButton: true,
                  todayButtonText: "انتخاب امروز",
                  confirmButtonText: "تایید",
                  initialDate: Gregorian(2020, 7, 15),
                );
                if (selectedDate != null) {
                  setState(() {
                    _gregorianDate = "${selectedDate.year}/${selectedDate.month}/${selectedDate.day}";
                  });
                }
              },
            ),
            const SizedBox(height: 30.0),
            Text("زمان: $_time", style: const TextStyle(fontSize: 18.0)),
            const SizedBox(height: 5.0),
            ElevatedButton(
              child: const Text("انتخاب زمان"),
              onPressed: () async {
                IRTimeModel? selectedTime = await showIRTimePickerDialog(
                  context: context,
                  initialTime: IRTimeModel(hour: 18, minute: 45, second: 59),
                  title: "انتخاب زمان",
                  visibleSecondsPicker: true,
                  visibleNowButton: true,
                  nowButtonText: "انتخاب اکنون",
                  confirmButtonText: "تایید",
                );
                if (selectedTime != null) {
                  setState(() {
                    _time = selectedTime.toString(showSecond: true);
                    Duration durationTime = selectedTime.toDuration();
                    if (kDebugMode) print('Duration: ${durationTime.toString()}');
                    if (kDebugMode) print('IRTimeModel: ${IRTimeModel.fromDuration(durationTime).toString(showSecond: true)}');
                  });
                }
              },
            ),
            const SizedBox(height: 30.0),
            Container(
              color: Colors.green.withOpacity(0.1),
              child: IRJalaliDatePicker(
                initialDate: Jalali(1400, 1, 3),
                minYear: 1390,
                maxYear: 1420,
                visibleTodayButton: true,
                todayButtonText: "انتخاب اکنون",
                constraints: const BoxConstraints.tightFor(width: 400, height: 200),
                onSelected: (Jalali date) {
                  if (kDebugMode) print(date.toString());
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了一个简单的Flutter应用，集成了波斯历、公历和时间选择器的功能。通过这种方式，你可以轻松地在你的Flutter项目中实现日期和时间的选择功能。


更多关于Flutter日期时间选择器插件ir_datetime_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter日期时间选择器插件ir_datetime_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用ir_datetime_picker插件的示例代码。ir_datetime_picker是一个用于选择日期和时间的Flutter插件。以下是一个基本的示例，展示了如何集成和使用该插件。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加ir_datetime_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  ir_datetime_picker: ^latest_version  # 替换为最新的版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入ir_datetime_picker：

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

3. 使用日期时间选择器

下面是一个简单的示例，展示了如何使用IrDateTimePicker来选择日期和时间，并将结果显示在一个Text小部件中。

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDateTime;

  void _selectDateTime() async {
    final DateTime? picked = await IrDateTimePicker.showDateTimePicker(
      context: context,
      initialDateTime: selectedDateTime ?? DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
      locale: Localizations.localeOf(context),
    );

    if (picked != null && picked != selectedDateTime) {
      setState(() {
        selectedDateTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ir_datetime_picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDateTime == null
                  ? 'No date selected.'
                  : 'Selected Date: ${selectedDateTime!.toLocal()}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _selectDateTime,
              child: Text('Select Date and Time'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  • IrDateTimePicker.showDateTimePicker：这是一个静态方法，用于显示日期和时间选择器对话框。它返回一个Future<DateTime?>，即用户选择的日期和时间（如果用户取消选择，则返回null）。
  • initialDateTime：设置日期时间选择器的初始值。
  • firstDate和lastDate：分别设置可选择的最早和最晚日期。
  • locale：设置日期时间选择器的语言环境。

注意事项

  • 确保你已经正确安装了ir_datetime_picker插件，并且你的Flutter环境是配置正确的。
  • 根据你的应用需求，你可以进一步自定义日期时间选择器的外观和行为。

希望这个示例能够帮助你理解如何在Flutter项目中使用ir_datetime_picker插件。如果有任何问题，请随时提问！

回到顶部