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

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

开始使用

这是一个用于仅通过数字选择日期的Flutter包。以下是一些示例图：

Date Picker Dialog Date selected

使用方法

要使用此包，请将依赖项添加到您的pubspec.yaml文件中：

dependencies:
  flutter:
      sdk: flutter

  number_date_picker: <latest-package>

然后，您可以使用该包来显示一个日期选择对话框：

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:number_date_picker/number_date_picker.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DateTime selectedDate = DateTime.now(); // 初始化选中的日期为当前日期

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('日期选择器示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => showDateNumPicker(
              context: context,
              startYear: 2000, // 设置开始年份
              endYear: 2023, // 设置结束年份
              initialDate: selectedDate, // 设置初始日期
              onDaySelected: (DateTime? dateTime) {
                setState(() {
                  selectedDate = dateTime as DateTime; // 更新选中的日期
                });
              },
            ),
            child: const Text('选择日期'),
          ),
        ),
      ),
    );
  }
}

在上述代码中：

  • showDateNumPicker函数用于显示日期选择对话框。
  • startYear 和 endYear 分别设置可以选择的日期范围的起始年份和结束年份。
  • initialDate 设置对话框打开时默认显示的日期。
  • onDaySelected 是一个回调函数，当用户选择一个新的日期时会被调用，并更新状态以显示新日期。

最后，展示选中的日期：

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(5),
    boxShadow: const [
      BoxShadow(
        spreadRadius: 2, 
        blurRadius: 2, 
        color: Colors.black12
      )
    ]
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      // 显示日期
      Text(
        DateFormat.d().format(selectedDate), // 显示日
        style: const TextStyle(fontSize: 30, fontWeight: FontWeight.w800),
      ),
      const SizedBox(width: 3),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          // 显示月份
          Text(
            DateFormat.MMM().format(selectedDate),
            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
          ),
          // 显示年份
          Text(
            DateFormat.y().format(selectedDate),
            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
          ),
        ],
      )
    ],
  )
)

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

1 回复

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


number_date_picker 是一个 Flutter 插件，用于在应用中提供一个数字滚轮式的日期选择器。它允许用户通过滚动数字来选择日期，非常适合需要简洁、直观的日期选择体验的场景。

安装

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

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

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

基本用法

以下是 number_date_picker 的基本用法：

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

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

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

class DatePickerDemo extends StatefulWidget {
  @override
  _DatePickerDemoState createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  DateTime _selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showNumberDatePicker(
      context: context,
      initialDate: _selectedDate,
      firstDate: DateTime(1900),
      lastDate: DateTime(2100),
    );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Number Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date: ${_selectedDate.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • context: BuildContext，用于显示日期选择器。
  • initialDate: 初始选中的日期，默认为当前日期。
  • firstDate: 用户可以选择的最早日期。
  • lastDate: 用户可以选择的最晚日期。

自定义

number_date_picker 提供了多种自定义选项，例如：

  • locale: 设置日期选择器的语言环境。
  • theme: 自定义日期选择器的主题。
final DateTime? picked = await showNumberDatePicker(
  context: context,
  initialDate: _selectedDate,
  firstDate: DateTime(1900),
  lastDate: DateTime(2100),
  locale: const Locale('zh', 'CN'), // 设置为中文
  theme: ThemeData.light().copyWith(
    primaryColor: Colors.blue,
    accentColor: Colors.blueAccent,
  ),
);
回到顶部