Flutter年份选择器插件flutter_year_picker的使用

简单使用此插件来选择年份。

功能

flutter_year_picker 可用于仅选择年份。

使用

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

import 'package:flutter/material.dart';
import 'package:logger/logger.dart'; // 引入日志库，方便调试

// 定义一个函数来展示年份选择器
Future<void> showYearPicker(BuildContext context) async {
  // 显示对话框
  return showDialog(
    context: context,
    builder: (context) {
      final Size size = MediaQuery.of(context).size; // 获取屏幕尺寸
      return AlertDialog(
        title: Column(
          children: const [
            Text('选择年份'), // 设置标题
            Divider(thickness: 1,) // 添加分隔线
          ],
        ),
        contentPadding: const EdgeInsets.all(10), // 设置内容内边距
        content: SizedBox(
          height: size.height / 3, // 设置内容高度为屏幕高度的三分之一
          width: size.width, // 设置内容宽度为屏幕宽度
          child: GridView.count(
            physics: const BouncingScrollPhysics(), // 使用反弹滚动效果
            crossAxisCount: 3, // 每行显示3个年份
            children: [
              // 生成从2022年到1900年的年份数组
              ...List.generate(
                123,
                (index) => InkWell(
                  onTap: () {
                    // 记录选中的年份并关闭对话框
                    Logger().d("Selected Year ==> ${(2022 - index).toString()}");
                    Navigator.pop(context);
                  },
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 0),
                    child: Chip(
                      label: Container(
                        padding: const EdgeInsets.all(5),
                        child: Text(
                          (2022 - index).toString(), // 显示年份
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

在应用中调用 showYearPicker

你可以在需要显示年份选择器的地方调用上述定义的 showYearPicker 函数。例如：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('年份选择器示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 当按钮被点击时显示年份选择器
            showYearPicker(context);
          },
          child: Text('选择年份'),
        ),
      ),
    );
  }
}