Flutter自定义输入字段插件dob_input_field的使用

Flutter自定义输入字段插件dob_input_field的使用

描述

dob_input_field 是一个Flutter插件，用于手动输入出生日期（DOB）。该插件提供了自动验证用户输入的出生日期，并支持多种日期格式。它还允许开发者自定义输入字段的样式和行为。

功能特性

• 手动输入出生日期：用户可以通过键盘手动输入出生日期。
• 3种不同的日期格式：支持YYYYMMDD、DDMMYYYY和MMDDYYYY三种日期格式。
• 自动验证：插件会自动验证用户输入的日期是否有效。
• 固定字符长度：确保用户输入的日期符合指定的格式。
• 日期类型输入键盘：提供专门的日期输入键盘，方便用户输入数字。
• 用户自定义装饰：允许开发者自定义输入字段的外观，如边框、标签等。

开始使用

1. 安装插件

在pubspec.yaml文件中添加以下依赖：

dependencies:
  dob_input_field: ^2.0.0

然后运行flutter pub get来安装插件。

2. 导入插件

在需要使用DOBInputField的Dart文件中导入插件：

import 'package:dob_input_field/dob_input_field.dart';

使用示例

下面是一个完整的示例代码，展示了如何在Flutter应用中使用dob_input_field插件。该示例展示了不同日期格式的输入字段，并演示了如何自定义输入字段的样式和验证模式。

// ignore_for_file: prefer_const_constructors

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Date Input Field',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("DOB Input Field"),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          // YYYYMMDD 格式的输入字段
          Text(
            "Date Format: YYYYMMDD",
            style: TextStyle(fontWeight: FontWeight.w900),
          ),
          DOBInputField(
            firstDate: DateTime(1900),  // 设置最早可选日期为1900年
            lastDate: DateTime.now(),   // 设置最晚可选日期为当前日期
            showLabel: true,            // 显示标签
            dateFormatType: DateFormatType.YYYYMMDD,  // 设置日期格式为 YYYYMMDD
            autovalidateMode: AutovalidateMode.always,  // 始终进行自动验证
            fieldLabelText: "With label",  // 输入框的提示文本
          ),
          SizedBox(height: 10),  // 添加间距

          // DDMMYYYY 格式的输入字段
          Text(
            "Date Format: DDMMYYYY",
            style: TextStyle(fontWeight: FontWeight.w900),
          ),
          DOBInputField(
            firstDate: DateTime(1900),
            lastDate: DateTime.now(),
            showLabel: true,
            dateFormatType: DateFormatType.DDMMYYYY,  // 设置日期格式为 DDMMYYYY
            autovalidateMode: AutovalidateMode.always,
            fieldLabelText: "With label",
          ),
          SizedBox(height: 10),

          // MMDDYYYY 格式的输入字段
          Text(
            "Date Format: MMDDYYYY",
            style: TextStyle(fontWeight: FontWeight.w900),
          ),
          DOBInputField(
            firstDate: DateTime(1900),
            lastDate: DateTime.now(),
            showLabel: true,
            dateFormatType: DateFormatType.MMDDYYYY,  // 设置日期格式为 MMDDYYYY
            autovalidateMode: AutovalidateMode.always,
            fieldLabelText: "With label",
          ),
          SizedBox(height: 10),

          // 带有标签和验证的输入字段
          DOBInputField(
            firstDate: DateTime(1900),
            lastDate: DateTime.now(),
            showLabel: true,
            autovalidateMode: AutovalidateMode.always,
            fieldLabelText: "With label",
          ),

          // 不带标签但带有验证的输入字段
          DOBInputField(
            firstDate: DateTime(1900),
            lastDate: DateTime.now(),
          ),

          // 带有自定义边框的输入字段
          DOBInputField(
            firstDate: DateTime(1900),
            lastDate: DateTime.now(),
            showLabel: true,
            fieldLabelText: "With border",
            inputDecoration: const InputDecoration(
              border: UnderlineInputBorder(
                borderRadius: BorderRadius.all(Radius.zero),
              ),
            ),
          ),

          // 不带验证的输入字段
          DOBInputField(
            firstDate: DateTime(1900),
            lastDate: DateTime.now(),
            showLabel: true,
            autovalidateMode: AutovalidateMode.disabled,  // 禁用自动验证
            fieldLabelText: "Without Validation",
            inputDecoration: const InputDecoration(
              border: UnderlineInputBorder(
                borderRadius: BorderRadius.all(Radius.zero),
              ),
            ),
          ),
        ],
      ),
    );
  }
}