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

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

特性

支持手动输入并检查格式，以及从提供的日历中选择日期。

请注意，flutter_modal_date_picker 目前仍在开发阶段，自定义功能尚未添加到此包中。

开始使用

该插件支持所有平台。

使用方法

只需调用 showModalDatePicker 函数，并等待它返回一个字符串。

class MyApp extends StatelessWidget {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          backgroundColor: Colors.white,
          body: ElevatedButton(
                child: Text(
                    '显示日期选择器',
                    style: TextStyle(fontSize: 30),
                ),
                onPressed: () async {
                    String chosenDate =
                        await showModalDatePicker(context, DateTime.now());
                    print(chosenDate);
                },
            ), 
        ),
    );
  }
}

额外信息

有关此插件的更多信息，请访问我们的 GitHub 仓库。如果您有任何问题或希望请求更多功能，请随时打开 issue。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 flutter_modal_date_picker 插件。

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_modal_date_picker/flutter_modal_date_picker.dart';

void main() {
  runApp(MaterialApp(theme: ThemeData(), home: MyApp()));
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String date = ""; // 存储选中的日期

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          backgroundColor: Colors.white,
          body: Container(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    child: Text(
                      '显示日期选择器',
                      style: TextStyle(fontSize: 30),
                    ),
                    onPressed: () async {
                      String chosenDate =
                          await showModalDatePicker(context, DateTime.now()); // 显示日期选择器
                      setState(() {
                        date = chosenDate; // 更新日期
                      });
                    },
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    date,
                    style: TextStyle(
                      backgroundColor: Colors.amber,
                      fontSize: 30
                    ),
                  )
                ],
              ),
            ),
          )),
    );
  }
}

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

1 回复

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


flutter_modal_date_picker 是一个用于在 Flutter 应用中显示模态日期选择器的插件。它允许用户通过一个模态弹窗选择日期。以下是使用 flutter_modal_date_picker 的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_modal_date_picker: ^1.0.0  # 请使用最新版本

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

2. 导入包

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

import 'package:flutter_modal_date_picker/flutter_modal_date_picker.dart';

3. 使用日期选择器

你可以通过调用 showModalDatePicker 方法来显示日期选择器。以下是一个简单的示例：

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

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

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

class DatePickerExample extends StatefulWidget {
  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

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

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showModalDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );

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

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

4. 参数说明

showModalDatePicker 方法接受以下参数：

  • context: 当前 BuildContext。
  • initialDate: 初始显示的日期。
  • firstDate: 允许选择的最早日期。
  • lastDate: 允许选择的最晚日期。
  • locale: 日期选择器的语言环境（可选）。
  • initialDatePickerMode: 初始日期选择器的模式（可选，DatePickerMode.day 或 DatePickerMode.year）。

5. 处理选择的日期

在 showModalDatePicker 返回的 DateTime 对象中，你可以获取用户选择的日期，并在应用中进行处理。

6. 自定义样式

你可以通过传递 builder 参数来自定义日期选择器的样式。

showModalDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  builder: (BuildContext context, Widget? child) {
    return Theme(
      data: ThemeData.light().copyWith(
        colorScheme: ColorScheme.light(
          primary: Colors.blue,
          onPrimary: Colors.white,
          surface: Colors.white,
          onSurface: Colors.black,
        ),
        dialogBackgroundColor: Colors.white,
      ),
      child: child!,
    );
  },
);
回到顶部