Flutter日期选择插件easy_date_picker的使用

easy_date_picker是一个简单易用的日期选择器小部件。通过它，您可以轻松地在 Flutter 应用中集成日期选择功能。

如何使用插件easy_date_picker

属性说明

属性名 描述
onChanged 用户选择日期时会调用该回调函数，并传递选中的年、月、日。
beginYear 设置日期选择器的开始年份，默认为当前年份减去 10 年。
endYear 设置日期选择器的结束年份，默认为当前年份加 10 年。
ascendingYear 是否按升序排列年份，默认为 true。
labelYear 年份标签的文本，默认为 “Year”。
labelMonth 月份标签的文本，默认为 “Month”。
labelDay 天数标签的文本，默认为 “Day”。
initialDate 设置初始日期，默认为空。

完整示例代码

以下是一个完整的 Flutter 示例代码，展示了如何使用 easy_date_picker 插件：

import 'package:flutter/material.dart';
import 'package:date_picker_v2/date_picker.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 Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  static const String routeName = '/MyHomePage';
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MyHomePage'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          children: [
            const SizedBox(height: 24.0),
            // 基本日期选择器
            DatePicker(
              onChanged: (year, month, day) => print('$year, $month, $day'),
            ),
            const SizedBox(height: 24.0),
            // 自定义起始和结束年份
            DatePicker(
              beginYear: 2020,
              endYear: 2029,
              onChanged: (year, month, day) => print('$year, $month, $day'),
            ),
            const SizedBox(height: 24.0),
            // 年份降序排列
            DatePicker(
              beginYear: 2020,
              endYear: 2029,
              ascendingYear: false,
              onChanged: (year, month, day) => print('$year, $month, $day'),
            ),
            const SizedBox(height: 24.0),
            // 设置初始日期（年份）
            DatePicker(
              beginYear: 2020,
              endYear: 2029,
              ascendingYear: false,
              initialDate: (year: 2025, month: null, day: null),
              onChanged: (year, month, day) => print('$year, $month, $day'),
            ),
            const SizedBox(height: 24.0),
            // 在对话框中选择日期
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) => const DatePickerDialog(),
                );
              },
              child: const Text('Select a date in a dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

// 对话框中的日期选择器
class DatePickerDialog extends StatelessWidget {
  const DatePickerDialog({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            // 对话框内的日期选择器
            DatePicker(
              onChanged: (year, month, day) => print('$year, $month, $day'),
            ),
            const SizedBox(height: 24.0),
            // 关闭按钮
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('Close'),
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


easy_date_picker 是一个用于 Flutter 的日期选择插件，它提供了一个简单易用的界面来选择日期。以下是如何在 Flutter 项目中使用 easy_date_picker 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 easy_date_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_date_picker: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 easy_date_picker 包：

import 'package:easy_date_picker/easy_date_picker.dart';

3. 使用 EasyDatePicker

你可以使用 EasyDatePicker 来显示一个日期选择器。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DatePickerExample(),
    );
  }
}

class DatePickerExample extends StatefulWidget {
  [@override](/user/override)
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime? _selectedDate;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await EasyDatePicker.showDatePicker(
      context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _selectedDate) {
      setState(() {
        _selectedDate = picked;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Date Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedDate == null
                  ? 'No date selected!'
                  : 'Selected Date: ${_selectedDate!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部