Flutter自定义文本字段插件customized_text_field的使用

简介

customized_text_field 是一个用于在 Flutter 中创建可动画化的 TextField 和 TextFormField 的包。当文本字段获得焦点时，它会扩展文本字段的大小，并在失去焦点时逐渐缩小其大小。你可以控制聚焦和未聚焦状态下的文本字段宽度，选择不同的动画效果，并调整动画持续时间。

使用步骤

1. 添加依赖

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

dependencies:
  customized_text_field: ^版本号

然后运行 flutter pub get 来安装该包。

2. 创建自定义文本字段

示例代码解析

以下是一个完整的示例代码，展示如何使用 customized_text_field 插件来创建自定义的文本字段。

import 'package:flutter/material.dart';
import 'package:customized_text_field/customized_text_field.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(
        primarySwatch: Colors.blue,
      ),
      home: const CustomTextFieldExample(),
    );
  }
}

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

  [@override](/user/override)
  State<CustomTextFieldExample> createState() => _CustomTextFieldExampleState();
}

class _CustomTextFieldExampleState extends State<CustomTextFieldExample> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义文本字段示例'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 使用 ExpandingTextField
            ExpandingTextField(
              unfocusedFieldSize: MediaQuery.of(context).size.width * 0.6, // 未聚焦时的宽度
              focusedFieldSize: MediaQuery.of(context).size.width - 100, // 聚焦时的宽度
              decoration: InputDecoration(
                labelText: 'Expanding TextField', // 提示文字
                border: OutlineInputBorder(), // 边框样式
              ),
            ),

            // 使用 ExpandingTextFormField
            ExpandingTextFormField(
              unfocusedFieldSize: 150, // 未聚焦时的宽度
              focusedFieldSize: MediaQuery.of(context).size.width, // 聚焦时的宽度
              autoValidateMode: AutovalidateMode.always, // 自动验证模式
              validator: (value) {
                if (value!.isEmpty) {
                  return '不能为空'; // 验证逻辑
                }
                return null;
              },
              decoration: InputDecoration(
                labelText: 'Expanding TextFormField', // 提示文字
                border: OutlineInputBorder(), // 边框样式
              ),
            ),

            // 按钮与普通文本字段组合
            Row(
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('点击这里'), // 按钮文字
                ),
                Expanded(
                  child: TextFormField(), // 普通文本字段
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

3. 效果预览

运行上述代码后，你会看到以下效果：

• ExpandingTextField：

  • 当点击时，文本字段的宽度会从 60% 屏幕宽度扩展到屏幕宽度减去 100 像素。
  • 失去焦点时，宽度会逐渐缩小。

• ExpandingTextFormField：

  • 当点击时，文本字段的宽度会从 150px 扩展到屏幕宽度。
  • 如果输入为空，会触发验证提示 “不能为空”。

• 普通文本字段：

  • 按钮与普通文本字段的组合，展示了标准的 TextFormField。

总结

通过 customized_text_field 插件，你可以轻松实现具有动画效果的自定义文本字段。只需配置 unfocusedFieldSize 和 focusedFieldSize，即可控制文本字段的宽度变化。此外，还可以结合 validator 实现表单验证功能。

如果你有更多需求或问题，可以参考官方文档或 GitHub 示例代码：GitHub。

完整代码

以下是完整的代码片段，方便复制粘贴运行：

import 'package:flutter/material.dart';
import 'package:customized_text_field/customized_text_field.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(
        primarySwatch: Colors.blue,
      ),
      home: const CustomTextFieldExample(),
    );
  }
}

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

  [@override](/user/override)
  State<CustomTextFieldExample> createState() => _CustomTextFieldExampleState();
}

class _CustomTextFieldExampleState extends State<CustomTextFieldExample> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义文本字段示例'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ExpandingTextField(
              unfocusedFieldSize: MediaQuery.of(context).size.width * 0.6,
              focusedFieldSize: MediaQuery.of(context).size.width - 100,
              decoration: InputDecoration(
                labelText: 'Expanding TextField',
                border: OutlineInputBorder(),
              ),
            ),
            ExpandingTextFormField(
              unfocusedFieldSize: 150,
              focusedFieldSize: MediaQuery.of(context).size.width,
              autoValidateMode: AutovalidateMode.always,
              validator: (value) {
                if (value!.isEmpty) {
                  return '不能为空';
                }
                return null;
              },
              decoration: InputDecoration(
                labelText: 'Expanding TextFormField',
                border: OutlineInputBorder(),
              ),
            ),
            Row(
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('点击这里'),
                ),
                Expanded(
                  child: TextFormField(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}